SSG throws Error: `Element type is invalid`
Answered
jantimon posted this in #help-forum
jantimonOP
Hey everyone
I'm currently debugging an issue in a Next.js app involving React Server Components:
https://github.com/vercel/next.js/issues/53366
I receive the message following error message when running
I've traced it back to the ServerComponentsRenderer in the Next.js source code (https://github.com/vercel/next.js/blob/9d1b3f43a18dd316fa27758a5d8baafd06a36529/packages/next/src/server/app-render/app-render.tsx#L1390),
but it's tough to determine which component is causing the problem from the terminal output.
Is there any tool which helps with inspecting the React tree in the terminal?
Any insights into debugging React Server Components in Next.js would be greatly appreciated 🙂
I'm currently debugging an issue in a Next.js app involving React Server Components:
https://github.com/vercel/next.js/issues/53366
I receive the message following error message when running
next build
during the SSG
:Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
at Ue (next-app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:2489:15)
at Ue (next-app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:2484:17)
at Z (next-app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:2498:17)
at Ve (next-app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:2551:16)
at Ue (next-app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:2344:9)
at Z (next-app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:2498:17)
at Ve (next-app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:2551:16)
at Xe (next-app/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:2536:13)
I've traced it back to the ServerComponentsRenderer in the Next.js source code (https://github.com/vercel/next.js/blob/9d1b3f43a18dd316fa27758a5d8baafd06a36529/packages/next/src/server/app-render/app-render.tsx#L1390),
but it's tough to determine which component is causing the problem from the terminal output.
Is there any tool which helps with inspecting the React tree in the terminal?
Any insights into debugging React Server Components in Next.js would be greatly appreciated 🙂
2 Replies
jantimonOP
it seems to be an issue in addSSRIDMapping: https://github.com/vercel/next.js/blob/e127c51327ee9191098fb7b73c681db934505dcc/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts#L270
as it points to an empty module..
is there any documentation about the ssr id mapping?
as it points to an empty module..
is there any documentation about the ssr id mapping?
jantimonOP
found a solution: https://github.com/vercel/next.js/pull/53796
Answer