TypeError: React.Component is not a constructor

[niklaswallerstedt]

Hey @timlrx. First off, thanks a lot for maintaining this fork. After upgrading past 0.5.0 I'm starting to get these errors

⨯ TypeError: React.Component is not a constructor
    at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:13953:23)
    at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:29862:5)
    at (rsc)/../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js ([project_root]/packages/web/.next/server/vendor-chunks/[email protected][email protected]:20:1)
    at __webpack_require__ ([project_root]/packages/web/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/index.js:32:20)
    at (rsc)/../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/index.js ([project_root]/packages/web/.next/server/vendor-chunks/[email protected][email protected]:30:1)
    at __webpack_require__ ([project_root]/packages/web/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected][email protected]/node_modules/mdx-bundler/dist/client.js:10:40)
    at (rsc)/../../node_modules/.pnpm/[email protected][email protected]/node_modules/mdx-bundler/dist/client.js ([project_root]/packages/web/.next/server/vendor-chunks/[email protected][email protected]:30:1)
    at __webpack_require__ ([project_root]/packages/web/.next/server/webpack-runtime.js:33:42) {
  type: 'TypeError',
  page: '/example-blog-post'
}

I've narrowed it down to my monorepo resolving react/react-dom to 18.2.0. If I override the resolved version it works again. While it may not be something on your end to fix, just reporting it in case there is something that can be fixed.

  "resolutions": {
    "react": "18.3.1",
    "react-dom": "18.3.1"
  }

I pulled out bits and pieces from another repo in a reproduction.

Node: v18.20.4

[niklaswallerstedt]

Another solution is to use next-mdx-remote instead of this https://contentlayer.dev/docs/sources/files/mdx-d747e46d#app-directory

import { MDXRemote } from 'next-mdx-remote/rsc';

...

<MDXRemote source={post.body.raw} components={customComponents} />

[timlrx]

Hi @niklaswallerstedt, thanks for the example repo. I tried it out and notice that it works if installed with npm or yarn, but I am not sure what's the issue with the resolution that results in the error for pnpm.

[niklaswallerstedt]

I haven't tested with npm or yarn yet but I'll give it a go.

[niklaswallerstedt]

Just to clarify this started from v0.5.0 and if you downgrade contentlayer2 it should still work. At least in my project going to verify in the repro as well