React.createElement: type is invalid in Next.js 13

[hamid842]

I'm getting this warning and Internal error into Next 13:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. at HoverMenu (webpack-internal:///(ssr)/./node_modules/material-ui-popup-state/es/HoverMenu.mjs:17:16) at MenuButtons (webpack-internal:///(ssr)/./src/components/global/menu-buttons.tsx:19:24)

[rajdtta]

@jedwards1211 Is this something you're able to look into? I tried digging into it earlier this week, but wasn't able to make much headway.

[jedwards1211]

Sorry for the delay, yes I'll look into it today

[jedwards1211]

Ugh this is a nasty and complicated webpack module resolution issue.

Next appears to set this module alias by default:

  '@mui/material$': '/Users/andy/gh/mui-popup-state-next-13/node_modules/@mui/material/index.js',

I think I should probably file a bug in Next.js about this, but I'm still trying to investigate why they did this in the first place.

For me this config tweak worked around the issue...hopefully it doesn't break anything for you?

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    if (config.resolve.alias) delete config.resolve.alias["@mui/material$"];
    return config;
  },
};

module.exports = nextConfig;

[jedwards1211]

vercel/next.js#57285

[jedwards1211]

Really don't know the best way to solve that issue with Next.js' default config so I just implemented a workaround in this package...should get released soon

[jedwards1211]

🎉 This issue has been resolved in version 5.0.10 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀