Conflict between styled-components and Webpack 5 Federated Modules (Invalid hook call)

user_1140065 0
Viewed 2262

Been trying out Webpack's 5 Module Federation and came upon this problem. Tried many approaches but none seem to work. Basically when I try to use styled-components on a federated module, I get React's Invalid hook call error.

Here is a repository which tries to reproduce the problem:

I wonder if I'm missing something or if this is some kind of bug.

styled-components webpack reactjs javascript
1 Answers

Problem solved by telling Webpack to use React as a singleton.

In foo/webpack.config.js I changed shared to [{ react: { singleton: true } }].

new ModuleFederationPlugin({
  name: 'foo',
  filename: 'remoteEntry.js',
  exposes: {
    './Foo': './src/App',
  },
  shared: [{ react: { singleton: true } }],
})

Big thanks to Zach Jackson!

user_11400650
Related