search

TexteaInc / json-viewer

not only a JSON viewer
https://viewer.textea.io
MIT License
433 stars 34 forks source link

next 14 pnpm build fail #429

Open zbw-zbw opened 9 months ago

zbw-zbw commented 9 months ago
image
zbw-zbw commented 9 months ago
image
pionxzh commented 9 months ago

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

zbw-zbw commented 9 months ago

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 commented 9 months ago

it could be resolved with no ssr.

pionxzh commented 9 months ago

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

pionxzh commented 9 months ago

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 commented 7 months ago

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 commented 7 months ago

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)