Issues when combining webpack HMR and react-refresh-webpack-plugin

[JKHSDTV]

We have both HMR and RRWP running, and both seem to work fine on their own. But in a project with both, we are facing the problem that .js-files can't be reloaded without a full reload. I suspect this may be due to the chaining, so before I dig deeper, is the following supposed to work in the first place ? Or are we 'doing things wrong' somehow ?

• we have a main.js, which after some initializing calls ReactDOM.render(<Provider store = {store} ><ClientContent /></Provider>, document.getElementById('react_container'));.
• in our component chain, we have many components/containers in the form of a Foo.jsx component wrapped by a FooContainer.js container
• during initializing of props for Foo's, the FooContainer.js import's multiple functions from WhatEverStuff.js
• changes to WhatEverStuff.js can not be hot reloaded

Since our setup works without RRWP, I suspect that it gets confused somewhere in that chain ? Any hints ?

[NWang]

What is RRWP? Did you mean this plugin? Nevermind, thinking about your problem now.

[JKHSDTV]

Yes, someone on IRC referenced it like that and I was under the impression that it was a common abbreviation.

[NWang]

I will need to see your webpack.config.js, just provide me the part you setup for devServer. The setup itself is tricky.

[JKHSDTV]

{
  devtool: "eval-source-map",
  mode: "development",
  devServer: {
    hot: true,
    liveReload: false,
    allowedHosts: [ "all" ],
    devMiddleware: { writeToDisk: true, index: false },
    proxy: [{
      context: [
        "**",
        "!/client/our-client.js"
      ],
      target: "http://localhost:8000",
      proxyTimeout: 1000 * 60 * 30,
      timeout: 1000 * 60 * 30
    }],
    compress: false,
    port: 9000
  }
}

And we run webpack like so: webpack serve --config=webpack.development.config.js

[NWang]

@JKHSDTV Does your <ClientContent /> directly contain those many Foo.jsx component wrapped by a FooContainer.js container? If so try adding one more layer like this:

<App/> -> <ClientContent/> -> many `Foo.jsx`

Also, make sure that you don't use any anonymous function for default export.

reference: https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#troubleshooting

[JKHSDTV]

Got multiple levels like that between Foo and ClientContent, and no anonymous default exports. Went through all the troubleshooting, none seem to apply.

[JKHSDTV]

I've got another clue, I think: when I limited my module.hot.accept to accept a specific file, like module.hot.accept('./stuff/WhatEverStuff.js'), I got the error message Error: Aborted because ./src/stuff/WhatEverStuff.js is not accepted. However, if I change the accept to include the src part of the path, it (correctly, since main.js is in src) complains that it can't resolve ./src/stuff/WhatEverStuff.js. I am not certain what could be introducing this mismatch.

[Michael Mok]

Are you doing any manual module.hot.accept?

[Michael Mok]

It would be helpful if a reproduction can be provided

[JKHSDTV]

Are you doing any manual module.hot.accept?

Your responded to a comment from me about how I use module.hot.accept 😂

I'm afraid it's the typical situation of where it's part of a complex proprietary setup that isn't easy to export as a test case :(