Webpack-dev-server: historyApiFallback with custom publicPath return 404

[exAspArk]

• Operating System: MacOS
• Node Version: v10.7.0
• NPM Version: 6.2.0
• webpack Version: 4.16.5
• webpack-dev-server Version: 3.1.5
• html-webpack-plugin Version: 3.2.0

• [x] This is a bug

Code

// webpack.config.js
module.exports = {
  devServer: {
    historyApiFallback: true,
  },
  entry: ['babel-polyfill', './src/app.js'],
  output: {
    filename: 'app.js',
    publicPath: '/myapp/',
  },
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

> webpack-dev-server --mode development --hot --watch-stdin --config config/webpack.config.js --port 8082
ℹ ｢wds｣: Project is running at http://localhost:8082/
ℹ ｢wds｣: webpack output is served from /fan/
ℹ ｢wds｣: 404s will fallback to /index.html

Expected Behavior

GET /myapp/ => 200
  GET /myapp/app.js => 200

GET /myapp/somepath => 200
  GET /myapp/app.js => 200

Actual Behavior

GET /myapp/ => 200
  GET /myapp/app.js => 200

GET /myapp/somepath => 404 "Cannot GET /myapp/somepath"
  _

From the docs:

... the index.html page will likely have to be served in place of any 404 responses

The process outputs the following:

404s will fallback to /index.html

But it returns 404 for GET /myapp/somepath. When I change publicPath: '/', then it serves:

GET / => 200
  GET /app.js => 200

GET /somepath => 200
  GET /app.js => 200

For Bugs; How can we reproduce the behavior?

Please use the webpack config described above ^

[exAspArk]

historyApiFallback: {
  index: '/myapp/'
}

^ that fixed the issue.

Can anyone who knows how this option works update the docs please?

[abettke]

historyApiFallback: {
  index: '/myapp/'
}

^ that fixed the issue.

Can anyone who knows how this option works update the docs please?

Can confirm after much hair pulling, this resolved my issue using react router v4 and webpack-dev-server.

historyApiFallback: true was not enough. I needed to explicitly set the fallback path as such.
historyApiFallback: { index: '/' }

[cobyrne09]

thank you @abettke and @exAspArk. I too, wasted half a day until I found this thread.

[fabianngala]

webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
i have the same issue its not working

[abettke]

webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
i have the same issue its not working

//index.html doesn't look right. Make sure you haven't typo'd in your config. There shouldn't be that double slash.

[mikeaustin]

Which is the "correct" solution?

Setting output.publicPath also solves it:

https://stackoverflow.com/questions/34620628/htmlwebpackplugin-injects-relative-path-files-which-breaks-when-loading-non-root

[abettke]

Which is the "correct" solution?

Setting output.publicPath also solves it:

https://stackoverflow.com/questions/34620628/htmlwebpackplugin-injects-relative-path-files-which-breaks-when-loading-non-root

It depends on what problem you are trying to solve. This particular thread is in respect to the historyAPIFallback option, which is the behavior that should occur when webpack dev server encounters a 404'd request. When trying to integrate this with React Router v4, where all the routes will be defined client side in the SPA instead of by the dev server, you would want to set this option so that any requests to the server to any URL automatically fallback to the index.html page so that the react router will handling the actual routing. The only way I found to get this to work correctly with v4 is to explicitly set the fallback path string instead of using a boolean.

[bartoszhernas]

this should be added in docs, we spent 1h looking into the issue and @exAspArk comment helped