@xstyled/emotion v3 does not work with Webpack 4

AlfonzAlfonz commented 3 years ago

🐛 Bug Report

After upgrade to v3 Webpack build fails. I've tried it in Next app with Webpack set to v4. It fails with this error:

error - ./node_modules/@xstyled/emotion/dist/index.mjs
Can't import the named export 'Global' from non EcmaScript module (only default export is available)

If I switch to Webpack 5 it works fine.

To Reproduce

Steps to reproduce the behavior:

Create next app

Add next.config.js:

module.exports = {
future: {
webpack5: false,
}
}

Expected behavior

It should work with Webpack 4.

Link to repl or repo (highly encouraged)

https://github.com/AlfonzAlfonz/xstyled-webpack4

Run `npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/emotion,@emotion/react,@emotion/styled --markdown --clipboard`

Paste the results here:

## System:
 - OS: macOS 11.2.3
 - CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
 - Memory: 60.82 MB / 8.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 15.14.0 - /usr/local/bin/node
 - Yarn: 1.22.10 - /usr/local/bin/yarn
 - npm: 7.7.6 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @emotion/react: ^11.4.0 => 11.4.0 
 - @emotion/styled: ^11.3.0 => 11.3.0 
 - @xstyled/emotion: ^3.0.0 => 3.0.0

strozw commented 3 years ago

@AlfonzAlfonz

I think it's not be fundamental solutions, but maybe this problem resolve to use cjs dist.

for example, add resolve.alias about xstyled into next.config.js.

module.exports = {
  webpack: config => {
    config.resolve.alias = {
      ...config.resolve.alias,
       '@xstyled/util': '@xstyled/util/dist/index.js',
       '@xstyled/core': '@xstyled/core/dist/index.js',
       '@xstyled/system': '@xstyled/system/dist/index.js',
       '@xstyled/styled-components': '@xstyled/styled-components/dist/index.js',
    }

    return config
  }
}

pstoica commented 3 years ago

Having the same issue. The CJS files don't work even if you use them instead: https://github.com/gregberge/xstyled/issues/265#issuecomment-849451694

snaer-yolabs commented 3 years ago

Any updates on the matter

AhmedAymanM commented 3 years ago

I'm facing the same issue with using it in storybook which comes preconfigured with webpack 4.

I did some research and I found that the issue is that .mjs files might have compatibility issues with some bundlers/tools.

https://github.com/danoc/react-use-clipboard/issues/2

https://github.com/apollographql/react-apollo/issues/1737

I opened a PR with a fix for this issue https://github.com/gregberge/xstyled/pull/275

I tested it with storybook and it now works for me as expected!

## System:
 - OS: macOS 11.2.3
 - CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
 - Memory: 568.00 MB / 8.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
 - Yarn: 2.4.1 - ~/.yarn/bin/yarn
 - npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm

gregberge commented 3 years ago

Fixed in #275

styled-components / xstyled