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.

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

[material-ui][nextjs] 14.2.0 crashes with Error: Element type is invalid #41865

Closed
Thinkscape opened this issue Apr 12, 2024 · 3 comments
Closed
Assignees
Labels
component: Typography The React component. external dependency Blocked by external dependency, we can’t do anything about it nextjs package: material-ui Specific to @mui/material

Comments

@Thinkscape
Copy link

Thinkscape commented Apr 12, 2024

Steps to reproduce

Link to live example: https://github.com/nunesunil/next-js

To repro have a /src/app/some/page.tsx like so:

import { Typography } from "@mui/material";

export function Page() {
  return <Typography>hello world</Typography>;
}
next build
next start

Current behavior

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at nM (/projectg/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61599)
    at nM (/projectg/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
    at nN (/projectg/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
    at nB (/projectg/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
    at nD (/projectg/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680)
    at nN (/projectg/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853)
    at nB (/projectg/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
    at nM (/projectg/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58560)
    at nN (/projectg/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
    at nN (/projectg/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64825) {
  digest: '4135225613'
}

Expected behavior

Page renders.

Page renders successfully.
Same code works fine in next@14.1.3

Context

vercel/next.js#64369

  next@14.2.0
  @mui/base@5.0.0-beta.42
  @mui/icons-material@5.15.15
  @mui/lab@5.0.0-alpha.160
  @mui/material@5.15.15
  @mui/styles@5.15.15

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.3.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 9.67 GB / 128.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.2 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.3.1 - /opt/homebrew/bin/pnpm
    bun: 1.0.32 - /opt/homebrew/bin/bun
  Managers:
    Cargo: 1.67.1 - ~/.cargo/bin/cargo
    CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
    Homebrew: 4.2.17 - /opt/homebrew/bin/brew
    pip3: 24.0 - /opt/homebrew/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 15.0.0 - /usr/bin/gcc
    Git: 2.37.3 - /opt/homebrew/bin/git
    Clang: 15.0.0 - /usr/bin/clang
    Curl: 8.6.0 - /opt/homebrew/bin/curl
  Servers:
    Apache: 2.4.56 - /usr/sbin/apachectl
  Virtualization:
    Docker: 25.0.3 - /usr/local/bin/docker
    Docker Compose: 2.24.5 - /usr/local/bin/docker-compose
  IDEs:
    Vim: 9.0 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Go: 1.20.1 - /opt/homebrew/bin/go
    Perl: 5.30.3 - /usr/bin/perl
    Protoc: 25.1 - /opt/homebrew/bin/protoc
    Python3: 3.12.2 - /opt/homebrew/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
    Rust: 1.67.1 - /Users/thinkscape/.cargo/bin/rustc
  Databases:
    PostgreSQL: 16.1 - /opt/homebrew/bin/postgres
    SQLite: 3.43.2 - /usr/bin/sqlite3
  Browsers:
    Chrome: 123.0.6312.122
    Edge: 123.0.2420.81
    Safari: 17.3.1

Search keywords: next, mui, element type is invalid

@Thinkscape Thinkscape added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 12, 2024
@zannager zannager added nextjs component: Typography The React component. labels Apr 12, 2024
@danilo-leal danilo-leal changed the title Next 14.2.0 crashes with Error: Element type is invalid [material-ui][nextjs] 14.2.0 crashes with Error: Element type is invalid Apr 12, 2024
@danilo-leal danilo-leal added the package: material-ui Specific to @mui/material label Apr 12, 2024
@nunesunil
Copy link

@oliviertassinari oliviertassinari added the external dependency Blocked by external dependency, we can’t do anything about it label Apr 14, 2024
@Thinkscape
Copy link
Author

Thinkscape commented Apr 15, 2024

Please follow vercel/next.js#64369

The fix: vercel/next.js#64467
Released in canary: v14.2.1-canary.5
The likely cause (trigger) from MUI: #40663

@Thinkscape
Copy link
Author

Thinkscape commented Apr 15, 2024

Confirmed Next.js v14.2.1-canary.5, including vercel/next.js#64467 fixes the issue.
Thanks @huozhi !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: Typography The React component. external dependency Blocked by external dependency, we can’t do anything about it nextjs package: material-ui Specific to @mui/material
Projects
None yet
Development

No branches or pull requests

6 participants