Warning about several instances of `styled-components` with Webpack 4 optimization.splitChunks

Environment

System:

• OS: macOS High Sierra 10.13.6
• CPU: x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz
• Memory: 162.12 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 8.6.0 - ~/.nvm/versions/node/v8.6.0/bin/node
• Yarn: 1.2.1 - /usr/local/bin/yarn
• npm: 6.4.1 - ~/.nvm/versions/node/v8.6.0/bin/npm

npmPackages:

• styled-components: ^4.0.2 => 4.0.2

Reproduction

Steps to reproduce

1. Create a package with Webpack 4 and two entry points that import styled-components.
2. Add optimization.splitChunks to webpack.config.js and create an explicit vendors.bundle.js for node_modules.
3. Create bundles and verify that only a single instance of styled-components exist in vendors.bundle.js.
4. Create a HTML page that includes once vendors.bundle.js.

Expected Behavior

The console shouldn’t display any warning about multiple instances of styled-components being initialized.

Actual Behavior

The console displays the message It looks like there are several instances of 'styled-components' initialized in this application....

[alfonsomunozpomer]

@probablyup I’ve been investigating a bit, since it was clear from my bundles that styled-components (and React, for that matter) was included in a single bundle but evaluated twice. It turns out that this is a change in behaviour from Webpack 3. It would be a good idea to add a Webpack 4 configuration snippet to the FAQ related section. If this is hosted somewhere I can submit a PR.

[probablyup]

You need to make sure it’s only in a single bundle. If you’re getting that warning it’s not being deduped properly. styled-components is a singleton library like react and loading multiple copies of it will cause all sorts of problems.