Webpack-cli: historyApiFallback not doing rewrites in webpack 5

[superheri]

• Operating System: Windows 10
• Node Version: 12.18.4
• NPM Version: 6.14.6
• webpack Version: 5.2.0
• webpack-dev-server Version: 3.11.0

• Browser: Google Chrome 86.0.4240.111

• [x] This is a bug

• [ ] This is a modification request

Code

// webpack.config.js

devServer : {
    index: 'index.html',
    historyApiFallback: {
        rewrites: [
            {from: /a\/.*/, to: 'a/index.html'},
            {from: /b\/.*/, to: 'b/index.html'}
        ]
    }
}

Expected Behavior

I expect this to actually return me to a/index.html when I do whatever url starting with a/.
I expect the same thing with b.
I also expect the 'index' option to be the file returned in any other case.

Actual Behavior

It always return me the base index.html... Whatever value in index is the one returned.
From what it seems, it is like the code is doing a

if (historyApiFallback) {...}

somewhere and it always acts like we wrote true in the historyApiFallback setting.

In webpack 4, it all worked well. I can't use only one file in index.html in my case because I need 2 'apps' (each with a different path), to be running at the same time.

For Bugs; How can we reproduce the behavior?

Just reproduce a webpack.config.js with some config like my exemple and you can reproduce the bug easy.

[alexander-akait]

No changes between webpack@4 and webpack@5 for this option and I can't reproduce

[superheri]

I even tried to use the 'proxy' setting, but it does not work. Do you think it has a link with the use of webpack serve instead of webpack-dev-server? Should I stick with webpack-cli 3?

[alexander-akait]

Do you think it has a link with the use of webpack serve instead of webpack-dev-server?

I think no, how you run webpack-dev-server?

Should I stick with webpack-cli 3?

No, you will have a lot of problems

Maybe something wrong with your environment

[superheri]

I run my webpack-dev-server like this in webpack 5 :
"watch": "webpack-cli serve --mode=development --config ./webpack/all.webpack.config.js",

I have nothing really special in my config:

output: {
            path: path.resolve(baseFolder, 'dist'),
            chunkFilename: '[name].[chunkhash].js'
        },
devServer: {
            index: 'index.html',
            contentBase: path.resolve(baseFolder, 'dist'),
            writeToDisk: true,
            port: 3000,
            https: false,
            compress: true,
            historyApiFallback: {
                rewrites: [
                    { from: /main\/.*/, to: 'main/index.html' },
                    { from: /portal\/.*/, to: 'portal/index.html' }
                ]
            },
            host: '0.0.0.0',
            disableHostCheck: true
        }

Maybe it has to do with the fact that my main index.html il copied by CopyWebpackPlugin?

[alexander-akait]

@superheri can you try to switch on webpack-cli@3 and test again, and try to switch on webpack@4 and test again and provide test results?

[superheri]

Webpack 4.44.2 and Webpack-cli 3.3.12 works well, I was using this with the same configuration before trying to migrate to webpack 5

I just tried running with Webpack 5.2.0 and Webpack-cli 3.3.12 and it now works just like before. It really seems like Webpack cli is messing up with my options...

Should I send this to the webpack-cli repo?

Thank you for taking the time to answer me by the way 👍

[alexander-akait]

Yes, look like it is bug on webpack-cli side, let's report it t webpack-cli repo and I will look at this, will be great if you provide minimum reproducible test repo, so I will add your case to tests and we never faces with it in future

[superheri]

Good, I'll try to create a test repo soon. I'll tell you when it is done

[superheri]

@evilebottnawi A test repo is now available here with a readme telling how to reproduce

https://github.com/superheri/webpack-cli-bug

[alexander-akait]

/cc @piecyk Maybe you have time to help me, a lot of issue and very few time :disappointed:

[piecyk]

@evilebottnawi yes, will check it.

[piecyk]

Problem here is that the publicPath: '/' is not pass in options to dev server. If publicPath is included in v4 then the rewrites works as in v3.

having this configuration in v3 we pass dev server as options

{
  index: 'index.html',
  contentBase: './dist',
  writeToDisk: true,
  port: 3000,
  compress: true,
  historyApiFallback: _options.historyApiFallback,
  host: 'localhost',
  publicPath: '/',
  hot: undefined,
  hotOnly: undefined,
  clientLogLevel: 'info',
  stats: {
    cached: false,
    cachedAssets: false,
    colors: { level: 3, hasBasic: true, has256: true, has16m: true }
  }
}

but in v4 we pass

{
  index: 'index.html',
  contentBase: './dist',
  writeToDisk: true,
  port: 3000,
  compress: true,
  historyApiFallback: { verbose: true, rewrites: [ [Object], [Object] ] },
  liveReload: true,
  serveIndex: true,
  inline: true,
  clientLogLevel: 'info'
}

Wondering how to resolve this as there are more difference like missing stats, plus liveReload, serveIndex, inline true by default

[alexander-akait]

Problem here is that the publicPath: '/' is not pass in options to dev server. If publicPath is included in v4 then the rewrites works as in v3.

yes publicPath will be works for v4 as for v3

[piecyk]

@superheri if you add publicPath to devServer in config then it will work as in v3

devServer: {
  publicPath: '/',
  index: 'index.html',
  contentBase: './dist',
  writeToDisk: true,
  port: 3000,
  compress: true,
  historyApiFallback: {
      rewrites: [
          { from: /a\/.*/, to: 'a/index.html' },
          { from: /b\/.*/, to: 'b/index.html' }
      ]
  }
}

[alexander-akait]

@piecyk Oh, yes, I see, thanks

@superheri webpack@5 have publicPah: 'auto' by default, it was breaking change

[superheri]

Just to be sure all I need to do is add the publicPath to '/'? If yes, I think the documentation should at least be updated to reflect the new default value since it is still shown as '/' by default on the documentation website https://webpack.js.org/configuration/dev-server/#devserverpublicpath-

[alexander-akait]

Found a bugs:

• docs are invalid, it should be auto
• webpack-dev-middleware@3 doesn't respect publicPath: 'auto', but it is fixed for v4 release will be today (we need couple days for updating it in webpack-dev-server)

I will update docs after updating webpack-dev-server

---

marked as fixed, but not released yet

[alexander-akait]

Fixed in [email protected] (we are working on the next beta, eta is current month)

[alexander-akait]

Feel free to feedback