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

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"
  },

[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.