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.

Michael Cox Michael Cox · Accepted Answer · 2019-11-07T21:18:13

0

votes

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

Found it here.

Webpack Bundling with React Router

1 Answers