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-ponents 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.

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-ponents on a federated module, I get React's Invalid hook call error.

Here is a repository which tries to reproduce the problem:

• https://github./oncet/federated-modules-styled-ponents

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

• javascript
• reactjs
• webpack
• styled-ponents

• Made a bug report github./styled-ponents/styled-ponents/issues/3302 – Camilo Commented Oct 11, 2020 at 5:02

1 Answer 1

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!