CODEWITHSUNDEEP
javascriptreactjswebpackstyled-components
Camilo
Camilo

Reputation: 7194

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

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.

Upvotes: 5

Views: 3724

Answers (1)

Camilo
Camilo

Reputation: 7194

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!

Upvotes: 7

Related Questions