[3.0] Ignored an update to unaccepted module with React Router

[olegstepura]

Hi!

Not sure if this is the right place to ask, but please guide me.

I tried to use [email protected] + [email protected] with [email protected]. it works. If I add some nested React components - it also works (triggering reload if inner component is changed).

But later I tried to add react-router to this.
No I got this warning in console:

Ignored an update to unaccepted module 783 -> 785 -> 315 -> 770

It's hard to understand what those module ids mean. It would be very helpful if it were component paths or some meaningful values (this seem to be an issue to report to https://github.com/webpack/webpack-dev-server, right?)

Here are the changes (project uses Typescript):
https://github.com/olegstepura/awesome-typescript-loader-test/pull/1/files

It's runnable, with some warnings from awesome-typescript-loader after App is ready, please just ignore it.

I tried making router/routes.tsx to export a function (second commit in PR), but this does not help.

So the main question here is: Is it possible to have hot reloading working with react-router?

Thanks!

[olegstepura]

After searching better I found this:
#249
remix-run/react-router#2182
gaearon/react-hot-boilerplate#61

This seem to be a solution, but it does not work for me: gaearon/react-hot-boilerplate#61 (comment)
Adding a Math.random() as a key property to Router did not help either.

[calesce]

Hi @olegstepura, sorry for taking so long to respond! I'll try to respond to each of your questions.

Adding a Math.random() as a key property to Router did not help either.

Yes, that will force the <Route/>'s components to re-mount, which will destroy their state, so this wouldn't be a solution.

It's hard to understand what those module ids mean. It would be very helpful if it were component paths or some meaningful values

I agree, that code seems to live in the main Webpack repo, might be worth opening an issue there.

It's runnable, with some warnings from awesome-typescript-loader after App is ready, please just ignore it.

Does awesome-typescript-loader use Babel under the hood? Otherwise I don't see react-hot-loader/webpack or react-hot-loader/babel being used, which may be the issue.

I tried making router/routes.tsx to export a function (second commit in PR), but this does not help.

This is the approach that seems to work best, I added a minimal example with RR here. I export the routes as a function (plain object config works as well), and specifically reload that file and pass as props to <Root/>. This will also work with Redux if you hot reload the reducers when creating your store, see here for a full example.

Let me know if those tips help, I may try to make a PR to your repo to demonstrate a solution, but not being familiar with TypeScript slowed me down there 😄

[calesce]

Going to close this out because I haven't heard back, and the problem looks like that you're not reloading the routes. Please re-open if you're still having the issue!

[olegstepura]

Hi! Sorry I didn't answer anything before. I haven't had time to check since I switched back to older but working configuration in the project I worked on. But now this project is kind of freezed, so I will definitely try to use webpack 2 + react-hot-loader 3 later when I'll have time to switch back to that project. If I'll face an issue again, I'll reopen this with new details. Thanks!

[pts-moog16]

@olegstepura this seems like an old post, but I've been looking into this issue and I found that using this plugin: new webpack.NamedModulesPlugin() gives the random numbers an actual name. Thought this might help someone.

[olegstepura]

@pts-moog16 yep, I already know and use that =) But thanks anyway. I forgot to mention this here.

[olegstepura]

BTW I'm now using webpack 2 and RHL 3.0 latest beta and I love this bundle. Cannot wait 'till RHL 3.0 will be released as stable version.