Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Material UI: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. #68012

Open
jrjake opened this issue Jul 21, 2024 · 2 comments
Open

Material UI: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. #68012

jrjake opened this issue Jul 21, 2024 · 2 comments
Labels
bug Issue was opened via the bug report template.

Comments

@jrjake
Copy link

jrjake commented Jul 21, 2024

Link to the code that reproduces this issue

https://github.com/jrjake/nextjs-mui-bug

To Reproduce

  1. Use my repo (or any MUI project)
  2. Ensure package.json has "type": "module" specified along with latest Next.js stable (14.2.5) and Material UI version (5.16.4)
  3. Use an MUI component in layout.js.
  4. You will get "Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object." when running npm run dev.

Current vs. Expected behavior

When I console.log(the component), I get {} when "type": "module", but I get [Function (anonymous)] as expected when running without "type": "module". The expected behavior is that Next.js will not throw an error in this scenario.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Thu Jul 11 19:29:01 UTC 2024
  Available memory (MB): 30006
  Available CPU cores: 8
Binaries:
  Node: 20.12.2
  npm: 10.8.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

I had previously reported this bug as #63394, which was claimed to be fixed in 14.2.3 but it appears that maybe a separate issue was fixed that was unrelated to my initial bug report. This issue does not appear in 14.3.0-canary.9. I attempted to test this with the latest 14.3 and 15.0 canary, but MUI does not claim support for React 19 yet.
@jrjake jrjake added the bug Issue was opened via the bug report template. label Jul 21, 2024
@Rikard-Johansson97
Copy link

For me I had to revert back to v.14.2.7. I dont use MUI but have similar issue

@neo87cs
Copy link

neo87cs commented Sep 20, 2024

Same here, until version 14.2.7 everything works without any warning/error, updating to newer version cause every page to throw Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports, i tried to remove everything but empty page and it is the only case when i don't get any error.
Also, even if the server respond with 500 and console has a big error log, the page shows up.
Deps:

"dependencies": {
    "@aws-amplify/adapter-nextjs": "^1.2.17",
    "@emotion/cache": "^11.13.1",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^6.1.0",
    "@mui/material": "^6.1.0",
    "@mui/material-nextjs": "^6.1.0",
    "@mui/system": "^6.1.0",
    "@mui/types": "^7.2.16",
    "@next/third-parties": "^14.2.9",
    "@rollbar/react": "0.12.0-beta",
    "aws-amplify": "^6.6.0",
    "next": "14.2.11",
    "next-intl": "^3.19.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.0",
    "rollbar": "^2.26.4",
    "sharp": "^0.33.5",
    "zod": "^3.23.8"
  }

I tried to check the log but it is impossible to figure out what is wrong and where

Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46775)
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46505)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at aj (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793)
    at /workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:42336
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:42822)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at aj (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793)
    at /workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:42336
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:42822)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at aj (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793)
    at aC (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:52874)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50095)
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:45321)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at ac (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11400)
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:14707)
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46505)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50067)
    at aj (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793)
    at aC (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:52874)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50095)
    at aj (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793)
    at aC (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:52874)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50095)
    at aj (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793)
    at aC (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:52874)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50095)
    at ac (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11400)
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:14707)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at ab (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11808)
    at /workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16871
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at aj (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793)
    at aC (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:52874)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50095)
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:42922)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at ac (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11400)
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:14707)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at ab (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11808)
    at /workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16871
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
    at a_ (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at aw (/workspace/itachi/node_modules/.pnpm/next@14.2.13_@babel+core@7.25.2_babel-plugin-macros@3.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:45321)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@neo87cs @Rikard-Johansson97 @jrjake