Emotion: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module for Stylis.umd.js

[uhrohraggy]

Current behavior:
Deploying to production environment produces an error with stylis trying to be loaded. We've also tried using next-transpile-modules to force it to transpile to require style but no avail.

20:24:07.120  
> Build error occurred
20:24:07.121  
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /vercel/661fc9aa/node_modules/@emotion/cache/node_modules/stylis/dist/stylis.umd.js
20:24:07.121  
require() of ES modules is not supported.
20:24:07.121  
require() of /vercel/661fc9aa/node_modules/@emotion/cache/node_modules/stylis/dist/stylis.umd.js from /vercel/661fc9aa/node_modules/@emotion/cache/dist/cache.cjs.prod.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
20:24:07.121  
Instead rename stylis.umd.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /vercel/661fc9aa/node_modules/@emotion/cache/node_modules/stylis/package.json.
20:24:07.122  
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1172:13)
20:24:07.122  
    at Module.load (internal/modules/cjs/loader.js:1000:32)
20:24:07.122  
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
20:24:07.122  
    at Module.require (internal/modules/cjs/loader.js:1042:19)
20:24:07.122  
    at require (internal/modules/cjs/helpers.js:77:18)
20:24:07.122  
    at Object.<anonymous> (/vercel/661fc9aa/node_modules/@emotion/cache/dist/cache.cjs.prod.js:11:49)
20:24:07.122  
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
20:24:07.122  
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
20:24:07.122  
    at Module.load (internal/modules/cjs/loader.js:1000:32)
20:24:07.122  
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
20:24:07.122  
    at Module.require (internal/modules/cjs/loader.js:1042:19)
20:24:07.122  
    at require (internal/modules/cjs/helpers.js:77:18)
20:24:07.122  
    at Object.<anonymous> (/vercel/661fc9aa/node_modules/@emotion/cache/dist/cache.cjs.js:4:20)
20:24:07.122  
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
20:24:07.122  
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
20:24:07.122  
    at Module.load (internal/modules/cjs/loader.js:1000:32) {
20:24:07.122  
  code: 'ERR_REQUIRE_ESM'
20:24:07.122  
}
20:24:07.186  
error Command failed with exit code 1.

Expected behavior:

Is loaded or transpiled accordingly.

Environment information:

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/css": "^11.0.0-next.12",
    "@emotion/react": "^11.0.0-next.12",
    "@emotion/server": "^11.0.0-next.12",
    "@expo/vector-icons": "^10.2.0",
    "@material-ui/core": "^4.10.1",
    "@now/node": "^1.6.1",
    "@react-native-community/toolbar-android": "^0.1.0-rc.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^10.2.0",
    "@visitdays/theme": "*",
    "@visitdays/utils": "*",
    "@zeit/fetch": "^6.0.0",
    "core-js": "3",
    "country-list": "^2.2.0",
    "expo": "^37.0.12",
    "i18n-js": "^3.5.1",
    "next": "^9.4.2",
    "next-fonts": "^1.1.0",
    "next-optimized-images": "^2.6.0",
    "node-sass": "^4.14.1",
    "nookies": "^2.3.0",
    "numeral": "^2.0.6",
    "patch-package": "^6.2.2",
    "phone": "^2.4.12",
    "postinstall-postinstall": "^2.1.0",
    "rambdax": "^3.7.0",
    "ramda": "^0.27.0",
    "react": "^16.13.1",
    "react-art": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-headroom": "^3.0.0",
    "react-hook-form": "^5.7.2",
    "react-input-mask": "^3.0.0-alpha.2",
    "react-modal": "^3.11.2",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-appearance": "^0.3.4",
    "react-native-localize": "^1.4.0",
    "react-native-paper": "^3.10.1",
    "react-native-safe-area-context": "^1.0.2",
    "react-native-safe-area-view": "^1.1.1",
    "react-native-unimodules": "^0.9.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "0.11.7",
    "react-native-web-image-loader": "^0.1.1",
    "react-youtube": "^7.11.2",
    "rebass": "^4.0.7",
    "shortid": "^2.2.15",
    "swr": "^0.2.1",
    "unfetch": "^4.1.0",
    "yup": "^0.29.0"
  },

[denkristoffer]

This looks like an issue for Stylis due to it using https://github.com/standard-things/esm. See also https://github.com/standard-things/esm/issues/868

[Andarist]

@uhrohraggy could you prepare a runnable repro case? I need to get more information about your setup to be able to fix this in Stylis.

[harrisrobin]

@Andarist this is only happening when it's being built on Vercel for me. We were able to get around it by downgrading to node10 for now.

You can reproduce with this repo https://github.com/harrisrobin/vercel-deploy-issue by deploying it on Vercel

[Andarist]

I think this might be because node 12 has now unflagged support for ESM (since 12.17.0) but conditional exports are not yet unflagged in this version and Stylis is using them. This is really a sort of a limbo situation from my POV because of how Stylis is distributed is totally fine, it's just that this v12 version has some partial support implemented for CJS/ESM interop (or rather, the second part still requires an experimental flag).

I don't think we can classify this as Emotion's issue, not it would be fair to classify this as Stylis' issue.

[ogheo]

try to add in package.json

"start": "next --experimental-modules start"

[Andarist]

As mentioned in my previous post - this flag is no longer needed for node 12 (since 12.17.0) and even if it is for a prior minor then it is already enabled because that very modules loader is resulting in an error.

@harrisrobin It would be best if you could check what exact version of node is used there.

[denkristoffer]

I believe Vercel runs on AWS, which supports node 10.x and 12.x (default) and doesn't allow you to target versions more specific than that.

[Andarist]

Right, but some exact version still has to be used there 😅 it would at least allow us to explain the issue

[LaurisJakobsons]

Vercel currently is using Node 12.16.2 version. I ran into the same error today.

[Andarist]

@LaurisJakobsons thank you! this has helped me to reproduce this problem. I've created a PR fixing this in Stylis: https://github.com/thysultan/stylis.js/pull/228 , although, quite frankly, I blame node for this being broken. It seems like unflagged partial support for modules has been released to node v12, which from the start means that valid configurations for newer versions are not valid for v12, so we are going to be stuck with backward compat configs for a new feature. That's weird...

[Andarist]

A new Stylis version (4.0.2) has been released with a fix. I won't be creating a new dedicated prerelease of Emotion for this (even though I will be bumping a dependency range soon) - 4.0.2 is allowed by our dependency ranges, so please just reinstall correctly in a way that this updates. Going to close this as handled but feel free to respond back at any time.