json-viewer icon indicating copy to clipboard operation
json-viewer copied to clipboard

next 14 pnpm build fail

Open zbw-zbw opened this issue 1 year ago • 8 comments

image

zbw-zbw avatar Nov 14 '23 09:11 zbw-zbw

image

zbw-zbw avatar Nov 14 '23 09:11 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 https://github.com/stackblitz/core/issues/1904

pionxzh avatar Nov 17 '23 02:11 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

try to use App router

zbw-zbw avatar Nov 17 '23 02:11 zbw-zbw

it could be resolved with no ssr.

zbw-zbw avatar Nov 17 '23 03:11 zbw-zbw

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

pionxzh avatar Nov 17 '23 15:11 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 avatar Nov 17 '23 15:11 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.

https://github.com/TexteaInc/json-viewer/issues/442#issuecomment-1907336089

pionxzh avatar Jan 24 '24 04:01 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)

pionxzh avatar Jan 24 '24 04:01 pionxzh