Material-UI v5 无法使用 NextJS v12 / React v18 编译（不能在模块外使用导入语句）

Question

我正在努力升级分支 https://github.com/skyra-project/skyra.pw/tree/fix/update-dependencies 中的大量依赖项，我正面临一个问题，我已经苦苦思索了几个小时，但现在还没有亮着灯隧道的尽头，所以我想我应该在这里问一下。

每当我运行 yarn build 在此分支中时，我都会从 NextJS 收到以下错误：

info  - Loaded env from F:\dev\skyraproject\skyrapw\src\.env.production.local
info  - Loaded env from F:\dev\skyraproject\skyrapw\src\.env.production
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

warn  - SWC minify release candidate enabled. https://nextjs.org/docs/messages/swc-minify-enabled
info  - Checking validity of types
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: F:\dev\skyraproject\skyrapw\node_modules\next-pwa\register.js
> [PWA] Service worker: F:\dev\skyraproject\skyrapw\src\public\sw.js
> [PWA]   url: /sw.js
> [PWA]   scope: /
> [PWA] Compile server
> [PWA] Compile server
info  - Creating an optimized production build
info  - Compiled successfully

> Build error occurred
F:\dev\skyraproject\skyrapw\node_modules\@mui\material\Grid\Grid.js:1
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.8303 (F:\dev\skyraproject\skyrapw\src\.next\server\pages\guilds\[...id].js:6919:18)
    at __webpack_require__ (F:\dev\skyraproject\skyrapw\src\.next\server\webpack-runtime.js:25:42) {
  type: 'SyntaxError'
}
info  - Collecting page data .

有些我尝试过但没有成功的事情：

搜索 NextJS 问题和文档
将 NextJS 设置回使用 Babel 而不是 SWC
在我的 package.json

"type": "module"

我唯一想尝试的事情是将所有默认导出更改为来自 '@mui/material' 的命名导出，但这将是一项繁重的更改，我真的不想经历那个没有这里的人的一些见解。

Answer 1

我..修好了。我在我的 post 1 次拍摄中给出了最后的评论，因为我最终找到了 Material-UI 存储库 (yarn dlx @mui/codemod v5.0.0/top-level-imports src/) 中记录的 codemod @mui/codemod v5.0.0/top-level-imports。我想如果它只是运行一个 codemod 来将所有内容更改为顶级命名导入我可以做到这一点。

好吧，做到了。老实说，我不知道如何或为什么......但问题已解决。现在站点编译正常了。

Material-UI v5 无法使用 NextJS v12 / React v18 编译（不能在模块外使用导入语句）

Material-UI v5 fails to compile with NextJS v12 / React v18 (Cannot use import statement outside a module)

reactjs

material-ui

next.js