historyApiFallback doesn't work in Webpack dev server

historyapifallback production
historyapifallback create-react app
devserver: ( historyapifallback)
webpack-dev-server cannot get
webpack-dev-server write to disk
webpack output is served from /
react router refresh 404
webpack-dev-server overlay

I use Webpack dev server and browserHistory in React Router to manipulate with urls by HTML5 History API. historyapifallback-option does not work in my webpack config file. After refreshing http://localhost:8080/users or http://localhost:8080/products I got 404.

webpack.config.js

var webpack = require('webpack');
var merge = require('webpack-merge');

const TARGET = process.env.npm_lifecycle_event;

var common = {
    cache: true,
    debug: true,
    entry: './src/script/index.jsx',
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        sourceMapFilename: '[file].map'
    },
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

if(TARGET === 'dev' || !TARGET) {
    module.exports = merge(common,{
        devtool: 'eval-source-map',
        devServer: {
            historyApiFallback: true
        },
        output: {
            filename: 'index.js',
            publicPath: 'http://localhost:8090/assets/'
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('dev')
            })
        ]
    });
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <title>Test</title>
    </head>
    <body>
        <div id="content">
            <!-- this is where the root react component will get rendered -->
        </div>
        <script src="http://localhost:8090/webpack-dev-server.js"></script>
        <script type="text/javascript" src="http://localhost:8090/assets/index.js"></script>
    </body>
</html>

index.jsx

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, useRouterHistory, browserHistory, Link} from 'react-router';

class Home extends Component{
  constructor(props) {
    super(props);
  }

  render() {
      return <div>
          I am home component
          <Link to="/users" activeClassName="active">Users</Link>
          <Link to="/products" activeClassName="active">Products</Link>
        </div>;
  }
}

class Users extends Component{
  constructor(props) {
    super(props);
  }

  render() {
      return <div> I am Users component </div>;
  }
}

class Products extends Component{
  constructor(props) {
    super(props);
  }

  render() {
      return <div> I am Products component </div>;
  }
}

ReactDOM.render(
    <Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)}>
        <Route path="/" component={Home}/>
        <Route path="/users" component={Users} type="users"/>
        <Route path="/products" component={Products} type="products"/>
    </Router>
    , document.getElementById('content'));

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.jsx",
  "scripts": {
    "start": "npm run serve | npm run dev",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server -d --progress --colors --port 8090 --history-api-fallback"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "events": "^1.1.0",
    "jquery": "^2.2.3",
    "path": "^0.12.7",
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-mixin": "^3.0.5",
    "react-router": "^2.4.0"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-register": "^6.8.0",
    "http-server": "^0.9.0",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.12.0"
  }
}

I tried to change devServer in my config, but it didn't help:

devServer: {
    historyApiFallback: {
        index: 'index.html',
    }
},

devServer: {
    historyApiFallback: {
        index: 'index.js',
    }
},

devServer: {
    historyApiFallback: {
        index: 'http://localhost:8090/assets',
    }
},

devServer: {
    historyApiFallback: {
        index: 'http://localhost:8090/assets/',
    }
},

devServer: {
    historyApiFallback: {
        index: 'http://localhost:8090/assets/index.html',
    }
},

devServer: {
    historyApiFallback: {
        index: 'http://localhost:8090/assets/index.js',
    }
},

devServer: {
    historyApiFallback: {
        index: 'http://localhost:8090/assets/index.js',
    }
},
output: {
    filename: 'index.js',
            publicPath: 'http://localhost:8090/assets/'
},

I meet the same question today. let config in webpack.config.js: output.publicPath be equal to devServer.historyApiFallback.index and point out html file route。my webpack-dev-server version is 1.10.1 and work well. http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option doesn't work, you must point out html file route.

for example

module.exports = {
    entry: "./src/app/index.js",
    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: 'build',
        filename: 'bundle-main.js'
    },
    devServer: {
        historyApiFallback:{
            index:'build/index.html'
        },
    },
};

historyApiFallback.index indicate that when url path not match a true file,webpack-dev-server use the file config in historyApiFallback.index to show in browser rather than 404 page. then all things about your route change let your js using react-router do it.

historyApiFallback option doesn't work · Issue #491 · webpack , I use browserHistory in React Router and historyApiFallback option is true in my config, but it doesn't work. After refreshing I got 404 error. I'm using historyApiFallback so that my react application can use the newer client-side routing / HTML 5 history. I've set historyApiFallback to true. This works when the client-side route is something like /users or /home, etc.

output: {
    ...
    publicPath: "/"
  },

Adding public path solved this for me

historyApiFallback doesn't work in Webpack dev server, I meet the same question today. let config in webpack.config.js: output.publicPath be equal to devServer.historyApiFallback.index and point out  Why GitHub? Features →. Code review; Project management; Integrations; Actions; Packages; Security

I had this problem and was only able to fix it using index: '/' with webpack 4.20.2

        historyApiFallback: {
            index: '/'
        }

Webpack Dev Server, You cannot use the second compiler argument (a callback) when using For more options and information, see the connect-history-api-fallback documentation. @nelix I ran into a similar issue. I am not yet using react-router, but the symptom matched to what is being described here. In my case, setting historyApiFallback: true worked when when the root url is loaded first, when I loaded some deep url, browser failed to load a few fonts.

Ref.: https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback

This works with any react-router

You have to add historyApiFallback: true

module.exports = {
    cache: true,
    entry: "./index.js",
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'public')
    },
    context: SRC,
    devServer: {
        contentBase: path.resolve(__dirname, 'public/assets'),
        stats: 'errors-only',
        open: true,
        port: 8080,
        compress: true,
        historyApiFallback: true
    },
...
}

Fixing the "cannot GET /URL" error on refresh with React Router and , historyAPIFallback will redirect 404s to /index.html . Here's an example of a basic webpack config file with both options in case you need it. var  I was about to ask the same question (for vue) and found the answer somehow buried here: historyApiFallback doesn't work in Webpack dev server Just add to the webpack.config.js:

Build React.js routing using History API Fallback, can use the History API fallback to create routes for their React apps and Exactly when the way does not organize, the course won't render  So I what I want is hitting the remote api server if the request's path starts with either /users or /sitters or /bookings but go for historyApiFallback (serve index.html) otherwise. Of course right now historyApiFallback works always serving the HTML file but I'd also need the proxy to be working.

connect-history-api-fallback, connect-history-api-fallback. 1.6.0 • Public • Published a year ago. Readme · ExploreBETA · 0Dependencies · 1,007Dependents · 12Versions  Fallback to index.html for applications that are using the HTML 5 history API - bripkens/connect-history-api-fallback

historyApiFallback doesn't work in Webpack dev server, I use Webpack dev server and browserHistory in React Router to manipulate with urls by HTML5 History API. historyapifallback-option does not work in my  webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Comments
  • output: { publicPath: '/', path: path.join(__dirname, 'public'), filename: 'bundle.js' }, devServer: { historyApiFallback: true, } In my case , my output path is like this and here historyApi fallback is not working even if i placed historyApiFallback : { index : '/' }
  • @BijayRai I have the same config as yours. How did you solve the problem?
  • 其他的配置省略 translated using google translate is "Other configuration omitted".
  • for anyone else using React + latest webpack, this was the only solution which helped listed in thread.
  • They're using this already by passing in the object where they were trying to use a specific index