Do not use .mjs extension for ES module files

[aldeed]

Type: minor

Describe the bug When a Webpack app imports this package and styled-components, two copies of the styled-components code are bundled. See Webpack issue: https://github.com/webpack/webpack/issues/9329

Expected behavior Only one copy of styled-components package should be bundled.

Solution This still seems like something wrong in Webpack, but as discovered in the issue, the problem stems from the .mjs extension, which we need not use to provide ES modules. So the solution is to update this file in a few places to use .esm.js instead of .mjs as the extension.

[aldeed]

@willopez I think if you do this and publish updated package, you will then be able to remove your other resolve workaround in the apps that had this issue.

[Kiailandi]

This is a major issue for me, as the two styled-components modules seem to be interfering with each other and they end up breaking either the reaction components style or the style of my "handmade" components.

EDIT: I "fixed" it adding an alias for styled-components in webpack to force it to chose just one version of it.

[HarisSpahijaPon]

Would you mind sharing your solution for future troubleshooting @Kiailandi ?

[Kiailandi]

I added an alias for styled-components in my webpack config file forcing the choice on the one coming from the styled-components package itself.

resolve: { extensions: ['.mjs', '.js', '.jsx', '.tsx', '.ts'], alias: { 'styled-components': 'styled-components/dist/styled-components.browser.esm.js', } }

EDIT: sorry about the format, I don't really understand why it removes the line breaks even if it's formatted as code.