react-boilerplate: WebpackDevServer breaks on complex nested routes

Was running into this for a few days (on master & since upgrading to 3.0.0)

I had some routes like /releases /releases/:version

My :version param takes a semver number, like 1.2.3.

They work perfectly when navigating around the app using <Link /> etc, and /releases works when hard-refreshing the page, but hard refreshing on a url like localhost:3000/releases/1.2.3 returns an error like this: messages image 3763230329

I confirmed that it’s specifically having periods in paths that are broken (by adding a route handler on /releases/foo; finally managed to track it down to this issues. The fix proposed by stefanfisk works perfectly when I edited webpack/server.dev.js.

https://github.com/rackt/react-router/issues/676#issuecomment-73963306

I think this is a general enough problem to fix; it certainly shouldn’t be happening - do you want me to clean up the code and submit a PR to 3.0.0?

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 28 (14 by maintainers)

Most upvoted comments

Add the publicPath to your output option in your webpack config:

output: {
  path: path.resolve(__dirname, '..', 'build'),
  filename: '[name].js',
  chunkFilename: '[name].chunk.js',
  publicPath: '/'
}

+89

mxstbr on Feb 6, 2016

I totally forgot you’re on master, the above solution would only work on v3.0.0! For master, please try this:

    output: { // Compile into js/build.js
      path: path.resolve(__dirname, 'build'),
      filename: "/js/bundle.js",
      publicPath: "/"
    },

Sorry for the unnecessary troubles!

mxstbr on Feb 6, 2016

@thehashrocket I have this same issue with routing and I add HtmlWebpackPlugin, try this solution maybe help you. plugins: [new HtmlWebpackPlugin({template: 'index.html'})],

Adriang71 on Jun 27, 2017

Sorry, I’ve been super busy with work. Written and rewritten about 1000 webpack configs over the past month; just ran into that bug again and fixed it by…

building into /public/build/{commons,main}.js etc
serving from public app.use(express.static(staticPath))
proxying from webpack dev server’s build folder to public/build
sending every other request to public/index.html

It’s a little bit different from the current setup and I don’t feel confident enough with my webpack or express skills to propose a change to such a popular project (sorry) - but this is working for me. https://gist.github.com/d69778adb88ec1acf11b

jemgold on Feb 16, 2016

Alright, maybe that was one slash too much, can you try this:

    output: { // Compile into js/build.js
      path: path.resolve(__dirname, 'build'),
      filename: "js/bundle.js",
      publicPath: "/"
    },

mxstbr on Feb 6, 2016