Next.js 12与主题-ui提供的“代码：'ERR_REQUIRE_ESM'”一起使用时会中断。

Question

我使用的是Next.js 12，在使用主题-ui创建主题后，会弹出此错误

​

​

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'
}

我的package.json有以下依赖项

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

我尝试将"type": "module"从E:\fm-nextjs\node_modules\@mdx-js\react\package.json中删除，但仍然出现了错误。

我怎么才能解决这个问题。看来我得手动修改一堆文件了。如果有解决办法的话就太好了。

Answer 1

将@mdx-js/react降级为1.6.22

通常，在这种情况下，最好开始降级最新安装的软件包(特别是考虑到@mdx-js似乎已经大幅增加了版本)。