Next.js 13 Error during SSR Rendering ReferenceError: defaultStyleFunctionMapping is not defined #34910

oalexdoda · 2022-10-27T16:32:32Z

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Steps to reproduce 🕹

Steps:

Set up a starter Next.13 app and install MUI.
Disable the app folder, just use the good ol' regular pages folder.
Add a component, such as Card on a page, like index.
Run the dev server using next dev --turbo
Error.

Current behavior 😯

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - initial compilation 20ms
error - [rendering] [root of the dev server]/
  Error during SSR Rendering
  ReferenceError: defaultStyleFunctionMapping is not defined
    at unstable_createStyleFunctionSx (.next/server/pages/chunks/node_modules__292df6.pnpm.js:16:70)
    at <unknown> (.next/server/pages/chunks/node_modules__292df6.pnpm.js:104:24)
    at Module.[project-with-next]/node_modules/.pnpm/@[email protected]_dovxhg2tvkkxkdnqyoum6wzcxm/node_modules/@mui/system/esm/styleFunctionSx/styleFunctionSx.js (ecmascript) (.next/server/pages/chunks/node_modules__292df6.pnpm.js:1558:3)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:40706:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_9d4207.js:40744:5)
    at instantiateModule (.next/server/pages/chunks/_9d4207.js:40705:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_9d4207.js:40786:12)
    at esmImport (.next/server/pages/chunks/_9d4207.js:40515:20)
    at <unknown> (.next/server/pages/chunks/node_modules__292df6.pnpm.js:1:0)
    at Module.[project-with-next]/node_modules/.pnpm/@[email protected]_dovxhg2tvkkxkdnqyoum6wzcxm/node_modules/@mui/system/esm/styleFunctionSx/index.js (ecmascript) (.next/server/pages/chunks/node_modules__292df6.pnpm.js:1419:3)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:40706:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_9d4207.js:40744:5)
    at instantiateModule (.next/server/pages/chunks/_9d4207.js:40705:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_9d4207.js:40786:12)
    at esmImport (.next/server/pages/chunks/_9d4207.js:40515:20)
    at <unknown> (.next/server/pages/chunks/node_modules__292df6.pnpm.js:1:0)
    at Module.[project-with-next]/node_modules/.pnpm/@[email protected]_dovxhg2tvkkxkdnqyoum6wzcxm/node_modules/@mui/system/esm/index.js (ecmascript) (.next/server/pages/chunks/node_modules__292df6.pnpm.js:1976:3)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:40706:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_9d4207.js:40744:5)
    at instantiateModule (.next/server/pages/chunks/_9d4207.js:40705:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_9d4207.js:40786:12)
    at esmImport (.next/server/pages/chunks/_9d4207.js:40515:20)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:1:0)
    at Module.[project-with-next]/node_modules/.pnpm/@[email protected]_5rzy53przelm5jchjmb5vr6dxy/node_modules/@mui/material/esm/styles/adaptV4Theme.js (ecmascript) (.next/server/pages/chunks/_9d4207.js:3897:3)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:40706:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_9d4207.js:40744:5)
    at instantiateModule (.next/server/pages/chunks/_9d4207.js:40705:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_9d4207.js:40786:12)
    at esmImport (.next/server/pages/chunks/_9d4207.js:40515:20)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:1:0)
    at Module.[project-with-next]/node_modules/.pnpm/@[email protected]_5rzy53przelm5jchjmb5vr6dxy/node_modules/@mui/material/esm/styles/index.js (ecmascript) (.next/server/pages/chunks/_9d4207.js:1276:3)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:40706:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_9d4207.js:40744:5)
    at instantiateModule (.next/server/pages/chunks/_9d4207.js:40705:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_9d4207.js:40786:12)
    at esmImport (.next/server/pages/chunks/_9d4207.js:40515:20)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:2:0)
    at Module.[project-with-next]/node_modules/.pnpm/@[email protected]_5rzy53przelm5jchjmb5vr6dxy/node_modules/@mui/material/esm/index.js (ecmascript) (.next/server/pages/chunks/_9d4207.js:1128:3)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:40706:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_9d4207.js:40744:5)
    at instantiateModule (.next/server/pages/chunks/_9d4207.js:40705:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_9d4207.js:40786:12)
    at esmImport (.next/server/pages/chunks/_9d4207.js:40515:20)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:1:0)
    at Module.[project-with-next]/pages/index.js (ecmascript) (.next/server/pages/chunks/_9d4207.js:264:3)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:40706:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_9d4207.js:40744:5)
    at instantiateModule (.next/server/pages/chunks/_9d4207.js:40705:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_9d4207.js:40786:12)
    at esmImport (.next/server/pages/chunks/_9d4207.js:40515:20)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:1:0)
    at Object.[project-with-next]/pages/index.js/server-renderer.tsx (ecmascript) (.next/server/pages/chunks/_9d4207.js:230:3)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:40706:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_9d4207.js:40744:5)
    at instantiateModule (.next/server/pages/chunks/_9d4207.js:40705:5)
    at instantiateRuntimeModule (.next/server/pages/chunks/_9d4207.js:41290:12)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:40345:1)
    at <unknown> (.next/server/pages/chunks/_9d4207.js:41341:39)
    at <anonymous>
    at Object.registerChunk [as push] (.next/server/pages/chunks/_9d4207.js:41341:25)
    at Object.<anonymous> (.next/server/pages/chunks/[embedded_modules]_@vercel_turbopack-next_40e91d.js:1:41)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1057:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (.next/server/pages/index.js:11:1)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at <unknown> (node:internal/main/run_main_module:22:47)

Expected behavior 🤔

No error.

Context 🔦

Using Next 13 + MUI + Emotion + next dev --turbo.

More details here: vercel/turborepo#2312 (comment)

Works without --turbo.

Your environment 🌎

{
	"name": "example",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start",
		"lint": "next lint"
	},
	"dependencies": {
		"@emotion/react": "^11.10.5",
		"@emotion/styled": "^11.10.5",
		"@mui/material": "^5.10.11",
		"next": "13.0.0",
		"react": "18.2.0",
		"react-dom": "18.2.0"
	},
	"devDependencies": {
		"eslint": "8.26.0",
		"eslint-config-next": "13.0.0",
		"prettier": "^2.7.1",
		"typescript": "^4.8.4"
	}
}

The text was updated successfully, but these errors were encountered:

mnajdova · 2022-11-01T10:43:25Z

@altechzilla can you please share a reproduction repository where we can see the issue? Looks like this import cannot be resolved for some reason - https://github.com/mui/material-ui/blob/master/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js#L2

RPDeshaies · 2022-11-01T13:50:58Z

Hey @mnajdova, I created a repo this morning where I configured a new NextJS 13 repo with TypeScript + Turbo Pack enabled along with the latest version of MUI.

By using a <Box> with the sx property, the app crashes when trying to render the home page.

Here's the repo, hoping that can help with the troubleshooting phase of this issue.

https://github.com/RPDeshaies/mui-34910-nextjs/tree/49816963c992eb0f502156d7aac204e85b421423

I had looked a bit at the MUI code and I found the file you mentioned above, though I find it weird that this import would trigger any sort of error since it seems pretty standard, apart from the symbol renaming inside the import.

oalexdoda · 2022-11-01T14:46:44Z

Hey @mnajdova, I created a repo this morning where I configured a new NextJS 13 repo with TypeScript + Turbo Pack enabled along with the latest version of MUI.

By using a <Box> with the sx property, the app crashes when trying to render the home page.

Here's the repo, hoping that can help with the troubleshooting phase of this issue.

RPDeshaies/mui-34910-nextjs@4981696

I had looked a bit at the MUI code and I found the file you mentioned above, though I find it weird that this import would trigger any sort of error since it seems pretty standard, apart from the symbol renaming inside the import.

Maybe it's something related to the bundler?
i.e. Something along the lines of what's described here? https://tsup.egoist.dev/#tree-shaking or evanw/esbuild#1794 / evanw/esbuild#1435

mnajdova · 2022-11-02T09:45:15Z

Aaah you may be right, it could be related to #31835

RPDeshaies · 2022-11-02T17:31:08Z

Also, as a side note, AFAIK NextJS uses Turbopack / SWC, and not ESbuild.

CalebJamesStevens · 2022-11-05T04:54:50Z

@altechzilla is this still happening to you? Same exact error happening to me today

dejurin · 2022-11-05T05:18:54Z

Also I was have same error

CalebJamesStevens · 2022-11-05T06:02:35Z

#35008

Opened PR to fix issue

CalebJamesStevens · 2022-11-10T05:49:41Z

@mnajdova I think you should take the label off of this for "not our responsibility" right?

mnajdova · 2022-11-10T12:36:46Z

@mnajdova I think you should take the label off of this for "not our responsibility" right?

I've left a comment on the pull request.

mj12albert · 2023-07-21T13:55:44Z

As of v5.14.1 Material UI works with the Pages Router using next-dev --turbo!

Tested using this example

oalexdoda added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 27, 2022

oalexdoda mentioned this issue Oct 27, 2022

[system] Support new style engine that generates static CSS files at build time #34826

Closed

zannager added the package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5. label Oct 28, 2022

zannager assigned mnajdova Oct 28, 2022

RPDeshaies mentioned this issue Oct 28, 2022

Improve Next.js support #34905

Open

22 tasks

oalexdoda mentioned this issue Oct 31, 2022

ReferenceError: defaultStyleFunctionMapping is not defined emotion-js/emotion#2930

Closed

mnajdova changed the title ~~Error during SSR Rendering ReferenceError: defaultStyleFunctionMapping is not defined~~ Next.js 13 Error during SSR Rendering ReferenceError: defaultStyleFunctionMapping is not defined Nov 1, 2022

CalebJamesStevens mentioned this issue Nov 5, 2022

[System] Calls unstable_createStyleFunctionSx with passed in arg #35008

Closed

mj12albert closed this as completed Jul 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next.js 13 Error during SSR Rendering ReferenceError: defaultStyleFunctionMapping is not defined #34910

Next.js 13 Error during SSR Rendering ReferenceError: defaultStyleFunctionMapping is not defined #34910

oalexdoda commented Oct 27, 2022

mnajdova commented Nov 1, 2022

RPDeshaies commented Nov 1, 2022

oalexdoda commented Nov 1, 2022

mnajdova commented Nov 2, 2022

RPDeshaies commented Nov 2, 2022

CalebJamesStevens commented Nov 5, 2022

dejurin commented Nov 5, 2022

CalebJamesStevens commented Nov 5, 2022

CalebJamesStevens commented Nov 10, 2022

mnajdova commented Nov 10, 2022

mj12albert commented Jul 21, 2023

Next.js 13 Error during SSR Rendering ReferenceError: defaultStyleFunctionMapping is not defined #34910

Next.js 13 Error during SSR Rendering ReferenceError: defaultStyleFunctionMapping is not defined #34910

Comments

oalexdoda commented Oct 27, 2022

Duplicates

Latest version

Steps to reproduce 🕹

Current behavior 😯

Expected behavior 🤔

Context 🔦

Your environment 🌎

mnajdova commented Nov 1, 2022

RPDeshaies commented Nov 1, 2022

oalexdoda commented Nov 1, 2022

mnajdova commented Nov 2, 2022

RPDeshaies commented Nov 2, 2022

CalebJamesStevens commented Nov 5, 2022

dejurin commented Nov 5, 2022

CalebJamesStevens commented Nov 5, 2022

CalebJamesStevens commented Nov 10, 2022

mnajdova commented Nov 10, 2022

mj12albert commented Jul 21, 2023