How to use version 3.3.0 (pure ESM)?

[adambisek]

I am using razzle project or create-react-app for my projects.

On both I am now as of 3.3.0 getting error like:

...
server.js:4788
module.exports = require("@xstyled/styled-components");
                 ^
Error [ERR_REQUIRE_ESM]: require() of ES Module .../frontend/node_modules/@xstyled/styled-components/dist/index.js from .../frontend/build/server.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in .../frontend/node_modules/@xstyled/styled-components/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
...

To put "type": "module" does not work and I think that even does not make right sense.

How to best deal with this?

[adambisek]

After further investigation I found out the cause is in webpack or babel, when compiling, it imports this ESM library the way mentioned above (and therefore it mixes ESM with CJS):

module.exports = require("@xstyled/styled-components");

Please let me this issue opened, if anyone would know how to solve this, I am convinced I am not the last person in the world who is struggling with this.

[AlfonzAlfonz]

After some investigation I have found that it was probably caused by commit https://github.com/gregberge/xstyled/commit/410cd679fc6c5c72b527c062bc88fb3d4dfe252c and thus it affects versions >=3.2.0. In my case it could be fixed by reverting all packages to version 3.1.2 or 3.1.0 by settings dependecies in package.json and using yarn resolutions:

{
  "dependencies": {
    "@xstyled/core": "3.1.2",
    "@xstyled/emotion": "3.1.2",
    "@xstyled/system": "3.1.2",
    "@xstyled/util": "3.1.0"
  },
  "resolutions": {
    "**/@xstyled/core": "3.1.2",
    "**/@xstyled/system": "3.1.2",
    "**/@xstyled/util": "3.1.0"
  }
}

[SpicyPete]

@AlfonzAlfonz Thank you for this workaround, I spent a long time stuck on this issue. The resolutions piece is what I was missing 👍

[franzrecinos]

I came across this issue, thanks @AlfonzAlfonz , I was able to make it work like this:

"dependencies": {
    "@xstyled/styled-components": "3.1.2",
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "styled-components": "^5.3.3",
    "swiper": "^7.3.1"
  },
...
"resolutions": {
    "**/@xstyled/core": "3.1.2",
    "**/@xstyled/system": "3.1.2",
    "**/@xstyled/util": "3.1.0"
  }

[sjaakbanaan]

Thanks for the suggestion @AlfonzAlfonz, managed to fix it without resolutions, so just like this:

    "@xstyled/core": "3.1.2",
    "@xstyled/emotion": "3.1.2",
    "@xstyled/system": "3.1.2",
    "@xstyled/util": "3.1.0",
    "@xstyled/styled-components": "3.1.2",

Glad i can fix a whole lot of projects now with this, hopefully this won't be an issue in versions above 3.3.0.

[ion-willo]

We seem to be experiencing the same issue on v3.5.1 - the workaround given by @franzrecinos worked for us

[gregberge]

We seem to be experiencing the same issue on v3.5.1 - the workaround given by @franzrecinos worked for us

That's very weird, everything should be fixed now.