Getting Error: Element type is invalid when using IconButton

quad5 commented 1 month ago

Steps to reproduce

Link to live example: (required)

Similar to 40214

Steps: 1) Create a new Next.js project: npx create-next-app@latest (select the app router and javascript), 2) Install Material-UI: npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache 3) Wrap the children in the root layout with the AppRouterCacheProvider, as it is described here,

`export default function RootLayout({ children }) {

return (

<html lang="en”>

    <body>

      <SessionProvider>  << - this is for auth0 (authentication)

        <AppRouterCacheProvider>
          <ThemeProvider theme={theme}>
            <Menu/>
              {children}
            </ThemeProvider>
        </AppRouterCacheProvider>
      </SessionProvider>
    </body>
</html>

); }`

Current behavior

4) In a Menu component, add IconButton with any icon (tried DeleteIcon, MenuIcon)

import {IconButton} from '@mui/material' import MenuIcon from '@mui/icons-material/Menu’;

export default function Menu() { return (

)

}

Then I get this error:

GET / 500 in 122ms ⨯ Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at aw (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46775) at aw (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46505) at a_ (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776) at aj (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793) at aC (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:52874) at a_ (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50095) at aj (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:53793) at /Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:42336 at aw (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:42822) at a_ (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776) at a_ (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50067) at /Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:58612 at /Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:59270 at aN (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:59278) at Timeout._onTimeout (/Users/quad/nextjs_next_auth_v5/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:6939) at listOnTimeout (node:internal/timers:573:17) at process.processTimers (node:internal/timers:514:7)

Expected behavior

Should show the icon (in this case MenuIcon).

Context

I tried the latest next.js version (14.2.5) with material v5.16.4, and got the same error message.

In 40214, someone mentioned that it works for them with next.js v14.2.3, but I still run into the same issue.

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. System: OS: macOS 13.6.7 Binaries: Node: 20.11.1 - /usr/local/bin/node npm: 10.2.4 - /usr/local/bin/npm pnpm: Not Found Browsers: Chrome: Not Found Edge: Not Found Safari: 17.5 npmPackages: @emotion/react: 11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/core-downloads-tracker: 5.16.4 @mui/icons-material: ^5.16.4 => 5.16.4 @mui/material: 5.16.4 @mui/material-nextjs: 5.15.11 => 5.15.11 @mui/private-theming: 5.16.4 @mui/styled-engine: 5.16.4 @mui/system: 5.16.4 @mui/types: 7.2.15 @mui/utils: 5.16.4 @types/react: 18.3.3 react: ^18.3.1 => 18.3.1 react-dom: ^18 => 18.3.1 typescript: 5.5.3 ```

Search keywords: element type

DiegoAndai commented 1 month ago

Hey @quad5, thanks for the report!

May I ask you to update your example, for example, in the shared code I cannot see how IconButton is used. Also, could you provide a minimal reproduction? This would help a lot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point. Thank you!

Did you take a look at our Next.js example?: https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-ts

It might provide some guidance on the setup. You can also use it as a starting point.

quad5 commented 1 month ago

Hi, this can be closed. I was able to track a setting that was causing the issue.

In package.json, I have ”type": “module” setting. And when I remove it, no more errors.

Thanks much!

mui / material-ui