next 14 pnpm build fail

[zbw-zbw]

[zbw-zbw]

[pionxzh]

Can you share a minimal reproducible repo? I tried creating a clean Next14 project with json-viewer, and it works fine.

The stackbliz example is broken on Next.js 14 because of an issue from stackbliz itself stackblitz/core#1904

[zbw-zbw]

Can you share a minimal reproducible repo? I tried creating a clean Next14 project with json-viewer, and it works fine.

The stackbliz example is broken on Next.js 14 because of an issue from stackbliz itself stackblitz/core#1904

try to use App router

[zbw-zbw]

it could be resolved with no ssr.

[pionxzh]

I tried with App router, and it works fine. Please provide a minimal reproducible repo so that I can help on this.

[pionxzh]

Oh there is a error from mui. Looks like mui is having some issues with Next 14

Internal error: TypeError: Cannot read properties of undefined (reading '0')
    at Paper (./node_modules/@mui/material/Paper/Paper.js:101:26)
    at renderWithHooks (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8245:26)
    at renderForwardRef (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8433:28)
    at renderElement (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8589:29)
    at renderNodeDestructiveImpl (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8778:33)
    at renderNodeDestructive (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8735:28)
    at finishFunctionComponent (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8383:17)
    at renderIndeterminateComponent (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8337:17)
    at renderElement (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8528:21)
    at renderNodeDestructiveImpl (./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:8778:33)

[pionxzh]

Most of the errors have gone on Next.js 14.1.0.

For people who are using Next App Directory:

With the new App Directory, React Components are categorized into two: Server Components and Client Components, and by default they are all Server Component as mentioned in: Using Server Components in Next.js.

Components that need hooks (context, use...) need to be classified as Client Components and they need to have the directive "use client" at the top of the source file before any import.

#442 (comment)

[pionxzh]

Found another error related to zustand or react context. Registered built-in is missing on the server side.

 ⨯ node_modules/@textea/json-viewer/dist/index.mjs (1265:14) @ matchTypeComponents
 ⨯ Internal error: Error: No type matched for value: 1
    at matchTypeComponents (./node_modules/@textea/json-viewer/dist/index.mjs:1290:15)
    at eval (./node_modules/@textea/json-viewer/dist/index.mjs:1297:63)
    at Object.oL [as useMemo] (./node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:12:72230)
    at t.useMemo (./node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:163482)