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

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

I am working on upgrading a whole slew of dependencies in the branch https://github.com/skyra-project/skyra.pw/tree/fix/update-dependencies and I'm facing an issue that I've been banging my head over for a couple of hours now with no light at the end of the tunnel so I figured I'd ask it here.

Whenever I run yarn build in this branch I get the following error from 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 .

Some things I have tried without success:

Searching the NextJS issues and documentation
Setting NextJS back to using Babel instead of SWC
Setting "type": "module" in my package.json

The only thing that is still on my mind for trying is changing all default exports to named exports from '@mui/material' but that would be a big chore to change and I really don't want to go through that without some insight from the people here.

Solution

I.. fixed it. I gave the last remark on my post 1 more shot and because I ended up finding the codemod @mui/codemod v5.0.0/top-level-imports documented in the Material-UI repository (yarn dlx @mui/codemod v5.0.0/top-level-imports src/). Figured if it was just running a codemod to change everything to top level named imports I could do that.

Well that did it. I honestly have no idea how or why.. but the problem is fixed. Now the site compiles just fine.