Webpack-dev-server: Webpack chunks fail to load in nested routes

Created on 2 Dec 2015  路  7Comments  路  Source: webpack/webpack-dev-server

I've a react and react-router application written to utilize react-router's dynamic routing.

Using that along with Webpack's code splitting, I've got myself a bunch of chunks (app.js, 1.app.js, 2.app.js etc) along with a single index.html file and I'm serving them with webpack-dev-server.

I'm using a HTML5 router with the historyApiFallback option set to true. This worked great before I started using dynamic routing but now I get the following issue:

Navigating to http://localhost:8080/artists/new results in....

http://localhost:8080/artists/2.app.js Failed to load resource: the server responded with a status of 404 (Not Found)

The dynamic route is...

path: "artists/new",
getComponent: (location, callback) => {
  require.ensure([], require => {
    callback(null, require("./components/NewArtist").default)
  })
}

Obviously what is happening here is that when attempted to navigate to http://localhost:8080/artists/new, a relative path is constructed to 2.app.js. Everything works great for routes at a single depth e.g. http://localhost:8080/artists.

Now historyApiFallback works to fix this kind of issue for index.html, how do I also get around this for JS chunks when using webpack-dev-server?

FYI I'm using the following command to run webpack-dev-server

webpack-dev-server --config config/webpack/development.babel.js --content-base public --history-api-fallback --hot --inline

Thanks

picture philostler
👍7 ❤1

Most helpful comment

I don't know if this is still relevant, but the solution specified in https://github.com/gaearon/react-hot-loader/issues/620#issuecomment-321729281 looks much cleaner.

You just need to add <base href="/" /> to the <head> of your HTML.

<!DOCTYPE html>
<html>
  <head>
    <base href="/" /> <!-- THIS -->
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>
picture akxcv on 4 Sep 2017
👍42 ❤24 🎉14

All 7 comments

OK I came across #197 after writing this and cooked up the following....

historyApiFallback: {
  rewrites: [{
    from: /\/(\d\.)?app\.js(\.map)?/,
    to: context => context.match[0]
  }]
}

...and omitting --history-api-fallback from the command line.

Seems to work. Is this the expected way of fixing this?? Shouldn't this be documented somewhere if so!?

philostler picture philostler on 2 Dec 2015

Closing as I've pretty much worked my way around this

philostler picture philostler on 10 Dec 2015

Thanks for opening this issue. I just ran into the same problem where I have a nested route, and it's being added to my publicPath when attempting to request assets.

ConAntonakos picture ConAntonakos on 17 Mar 2016

@ConAntonakos Glad this issue helped someone else out! I still use the snippet from above today, not come across any other issues with WDS history since

philostler picture philostler on 23 Mar 2016

rewrites is not a public documented API, is it a bug?

gutenye picture gutenye on 4 Dec 2016

I don't know if this is still relevant, but the solution specified in https://github.com/gaearon/react-hot-loader/issues/620#issuecomment-321729281 looks much cleaner.

You just need to add <base href="/" /> to the <head> of your HTML.

<!DOCTYPE html>
<html>
  <head>
    <base href="/" /> <!-- THIS -->
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>
akxcv picture akxcv on 4 Sep 2017
👍42 ❤24 🎉14

I don't know if this is still relevant, but the solution specified in gaearon/react-hot-loader#620 (comment) looks much cleaner.

You just need to add <base href="/" /> to the <head> of your HTML.

<!DOCTYPE html>
<html>
  <head>
    <base href="/" /> <!-- THIS -->
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

This answer has saved the day for me and my team while facing the same issue with Laravel Mix & Vuejs. We faced the problem when using Nested Routes with Dynamic Route Matching. Strangely, the chunks were being requested relative to the parent path resulting in 404 on the Chunk Files. After lot of searching this solution worked for us with Vuejs & Laravel MIx.

<head>
    <base href="{{ url('/') }}" />
    <!-- ... -->
</head>
reedknight picture reedknight on 19 May 2020
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

nikirossi picture nikirossi  路  3Comments
antoinerousseau picture antoinerousseau  路  3Comments
mischkl picture mischkl  路  3Comments
uMaxmaxmaximus picture uMaxmaxmaximus  路  3Comments
adiachenko picture adiachenko  路  3Comments