5

I'm using Next.js 12 and this error pops up after I created a theme using theme-ui

enter image description here

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\fm-nextjs\node_modules\@mdx-js\react\index.js
require() of ES modules is not supported.
require() of E:\fm-nextjs\node_modules\@mdx-js\react\index.js from E:\fm-nextjs\node_modules\@theme-ui\mdx\dist\theme-ui-mdx.cjs.dev.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.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from E:\fm-nextjs\node_modules\@mdx-js\react\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)    at Module.require (internal/modules/cjs/loader.js:961:19)       
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (E:\fm-nextjs\node_modules\@theme-ui\mdx\dist\theme-ui-mdx.cjs.dev.js:9:15)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)     
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12) {
  code: 'ERR_REQUIRE_ESM'
}

my package.json has following dependencies

  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mdx-js/react": "^2.0.0",
    "@theme-ui/presets": "^0.13.1",
    "next": "^12.0.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "theme-ui": "^0.13.1"
  }

I tried removing "type": "module" from E:\fm-nextjs\node_modules\@mdx-js\react\package.json but it still gave errors.
How do I actually fix this. Seems like I have to manually change a bunch of files. Would be great if there is a workaround.

cmgchess
  • 7,996
  • 37
  • 44
  • 62
  • can you show your code where you suspect the error might be ? Did you use `require` in your code instead of `import` – Bao Huynh Lam Feb 04 '22 at 21:42
  • @BaoHuynhLam https://github.com/Hendrixer/nextjs-course-app/tree/styling code is same. `theme.js` and `pages/_app.jsx` were the only files that used the theme-ui upto now – cmgchess Feb 04 '22 at 21:47
  • 1
    I just cloned Hendrixer's repo and gave it a run, and it seems fine. If possible, would you share a link to your repo ? I would advise against manually changing anything in the node_modules folder – Bao Huynh Lam Feb 04 '22 at 21:58
  • Hi im on mobile right now but the only difference must be the package.json dependencies. I have listed them – cmgchess Feb 04 '22 at 22:12

1 Answers1

9

Downgrade @mdx-js/react to 1.6.22

Usually in these kind of scenarios, it's good to start downgrading the latest installed packages (especially since @mdx-js seems to have had a major version increase)

Manu
  • 106
  • 4
  • 3
    Can't believe that worked. 2022 FE Development is fundamentally broken – umbriel Mar 09 '22 at 00:13
  • 1
    @umbriel yes and no; FE has always been tricky, but all languages have the same issues when packages get upgraded to major versions. The JS space is just way more dynamic (and riskier) than others (personal opinion) – Manu Apr 19 '22 at 06:58