Steps to reproduce
Steps:
-
No StackBlitz because the template example doesn't build (even with --webpack) https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts
Error: Turbopack is not supported on this platform (linux/x64) because native bindings are not available. Only WebAssembly (WASM) bindings were loaded, and Turbopack requires native bindings.
To use Next.js on this platform, use Webpack instead:
next dev --webpack
For more information, see: https://nextjs.org/docs/app/api-reference/turbopack#supported-platforms
at ignore-listed frames
-
Add InitColorSchemeScript as first child of body as per https://mui.com/material-ui/react-init-color-scheme-script/#basics
-
Build works fine but development server complains with
## Error Type
Console Error
## Error Message
Encountered a script tag while rendering React component. Scripts inside React components are never executed when rendering on the client. Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).
at script (unknown:0:0)
at __TURBOPACK__default__export__ (app/layout.tsx:65:9)
## Code Frame
63 | >
64 | <body className={[baskerville.variable, roboto.variable].join(' ')}>
> 65 | <InitColorSchemeScript attribute="data" />
| ^
66 | <AppRouterCacheProvider>
67 | <ThemeProvider theme={theme}>
68 | <Tracking />
Next.js version: 16.2.6 (Turbopack)
Current behavior
Build works fine and both production and development builds render the application with no flickering
However development server logs the above error
Expected behavior
Page rendered in development should not error with the color scheme script
Context
No response
Your environment
Using Firefox mostly.
npx @mui/envinfo
System:
OS: macOS 26.5
Binaries:
Node: 24.16.0 - /<home>/.nvm/versions/node/v24.16.0/bin/node
npm: 11.13.0 - /<home>/.nvm/versions/node/v24.16.0/bin/npm
pnpm: 10.33.4 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 148.0.7778.216
Edge: Not Found
Firefox: 151.0.2
Safari: 26.5
npmPackages:
@emotion/react: 11.14.0 => 11.14.0
@emotion/styled: 11.14.1 => 11.14.1
@mui/material: 9.0.1 => 9.0.1
@mui/material-nextjs: 9.0.1 => 9.0.1
@types/react: 19.2.15 => 19.2.15
react: 19.2.6 => 19.2.6
react-dom: 19.2.6 => 19.2.6
typescript: 6.0.3 => 6.0.3
Search keywords: next16 nextjs16 getInitColorSchemeScript InitColorSchemeScript
Steps to reproduce
Steps:
No StackBlitz because the template example doesn't build (even with
--webpack) https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-tsAdd
InitColorSchemeScriptas first child ofbodyas per https://mui.com/material-ui/react-init-color-scheme-script/#basicsBuild works fine but development server complains with
Current behavior
Build works fine and both production and development builds render the application with no flickering
However development server logs the above error
Expected behavior
Page rendered in development should not error with the color scheme script
Context
No response
Your environment
Using Firefox mostly.
npx @mui/envinfoSearch keywords: next16 nextjs16 getInitColorSchemeScript InitColorSchemeScript