Adding shared modules to entrypoints behind async boundaries

[IMalyugin]

Got an interesting and simple case with no straightforward solution.

The requirement is pretty simple, for HMR to work well with react I need to add react-hot-loader/patch to webpack entrypoint before any other modules, like so:

...
entry: {
  main: [
    'react-hot-loader/patch',
    path.resolve(__dirname, './src/index.js'),
  ]
},
...

But react-hot-loader/patch depends on react, and it is common practice to make react a shared module.

The code above obviously leads to: Error: Shared module is not available for eager consumption.

Tried to solve this issue in a graceful way with no luck, the only way I see so far is importing react-hot-loader/patch in ./src/bootstrap.js and adding it to package.json sideEffects array. That is ... dirty.

Any way to solve it in a more straightforward way? From what i see, it could be solved by moving async boundary configuration to entrydescription-object https://webpack.js.org/concepts/entry-points/#entrydescription-object .

Instead of creating async import everytime, we could just declare entry as async: true, so it would generate bootstrap automatically, and all the files added to entry.import would be behind the boundary by default.

[ScriptedAlchemy]

I'd say importing it below the async boundary is probably the best way to go. Alternatively you can try using dependOn which is relatively new

[IMalyugin]

Ouch, well that means there are no straightforward solutions, I thought about using dependOn, but it seems it won't fix the problem. Since dependsOn will just postpone execution till a dependant chunk is loaded, adding anything eager to it will still crash it.

Issue might become a feature request:

Instead of creating async import everytime, we could just declare entry as async: true, so it would generate bootstrap automatically, and all the files added to entry.import would be behind the boundary by default.

[ScriptedAlchemy]

We had a discussion about this at webpack. About auto installing an async boundary. It's a lot more complicated than it looks unfortunately.

However declaring it as async might improve the chances.

That said, there are ways around this via webpack plugins. Webpack virtual modules for example. Or single entry plugin or normal module replacement might provide some solutions