Webpack Bundling with React Router

Question

Everything was working dandy then for some reason I decided to update some packages. Bad move.

I'm using React.lazy and Webpack to code split and bundle my JavaScript. If I'm at the root URL ( http://localhost:9000/ ) there's no problem. It will load http://localhost:9000/dist/24.js . But if (using react-router) I'm anywhere down in the app, say http://localhost:9000/page/category/ it will try to load http://localhost:9000/page/category/dist/26.js . Obviously that's not where the files are saved.

I can ignore the problem in production by using a wildcard: app.get('*/dist/:js'... , but I can't do that with my devServer. I'm sure there's a way to tell it to use the absolute path always, but I can't figure out how to do it. How do I tell it to always load from http://localhost:9000/dist/*.js ?

Here's the relevant piece of webpack.config.js .

    output: {
      filename: '[name].js',
      chunkFilename: '[name].js',
      path: path.resolve(process.cwd(), 'dist'),
      publicPath: 'dist/',
    },

I'm using webpack 4.41.2, webpack-dev-server 3.9.0, react-router 5.1.2, and react-hot-loader 4.12.16. If you're wondering why I'm using process.cwd() instead of __dirname it's because I'm using this file via symlinks in a handful of apps.

Answer 1

Add <base href="/" /> to index.html before any <script/> .

Found it here .