[material-ui] Next.js 14 with NX monorepo build fails on PonyfillGlobal

[clickspider]

Steps to reproduce

Link to live example: (nextjs error repo)

Steps:

1. npm i
2. npx nx build nx-nextjs-monorepo

Current behavior

Getting an error:

   Creating an optimized production build ...
Failed to compile.

../../libs/ui/src/lib/client/configs/theme/theme.ts
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

The error was caused by importing '@mui/material/styles/index.js' in '../../libs/ui/src/lib/client/configs/theme/theme.ts'.

Also saw this error when using mui pervious version 5.15.14:

../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@mui/utils/ponyfillGlobal/ponyfillGlobal.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

Import trace for requested module:
../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@mui/utils/ponyfillGlobal/ponyfillGlobal.js
../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@mui/utils/ponyfillGlobal/index.js
../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@mui/utils/index.js
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/className/index.js
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/Box/Box.js
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/Box/index.js
__barrel_optimize__?names=Box!=!../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/index.js
../../libs/ui/src/lib/client/components/hero/hero.tsx
../../libs/ui/src/lib/client/components/hero/index.ts
../../libs/ui/src/lib/client/components/index.ts
../../libs/ui/src/lib/client/index.ts
../../libs/ui/src/lib/server/providers/nn-app-provider.tsx
../../libs/ui/src/lib/server/providers/index.ts
../../libs/ui/src/lib/server/index.ts
../../libs/ui/src/server.ts


> Build failed because of webpack errors
Error occurred while trying to run the build command
1

Expected behavior

That error will not appear, and fix the code that causes the issue.

Context

When trying to setup a NX monorepo with NextJS 14 (App Router), I have exported from my libs folder some middleware(s) and then when running the build command I get this error (see above).

After I further investigated I saw that it has something to deal with this file: https://github.com/mui/material-ui/blame/next/packages/mui-utils/src/ponyfillGlobal/ponyfillGlobal.ts

Whenever I changed it locally in my node_modules to just return this instead of Function('return this') the build started to work fine again. I am not sure on the cause of this.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: ponyfillglobal

[clickspider]

tagging @Janpot as it he was the last who touched this file, but might not be related to his changes - #40772

[clickspider]

@zannager thanks for helping out! small update -> it seems like @Janpot just pushed a Prettier update on that file but originally the logic was written here - #13426 by @TrySound , sorry for the confusion earlier.

[clickspider]

Small update: to workaround this I have split my libs to not have to build NextJS middleware in the same lib as my MUI code. However, this issue still needs to be addressed.

[Janpot]

global is not supported by the vercel edge runtime. Neither is window or self available and eval is restricted. We could expand the ponyfill, but I don't get why it's there in the first place. globalThis should be supported in all hosts we currently support. I propose we remove it and just use globalThis.
@clickspider would you be interested in contributing this fix?