search

reactioncommerce / reaction-component-library

Example Storefront Component Library: A set of React components for the Example Storefront
Apache License 2.0
96 stars 57 forks source link

Do not use .mjs extension for ES module files #419

Open aldeed opened 5 years ago

aldeed commented 5 years ago

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 commented 5 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

Kiailandi commented 4 years ago

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.