search

melloware / react-logviewer

React LogViewer
https://melloware.github.io/react-logviewer/
Mozilla Public License 2.0
63 stars 18 forks source link

[React 19 | Next.js 15]: TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher') #67

Open Kealman opened 2 days ago

Kealman commented 2 days ago

Hello! There is an error with new React 19-RC and Next.js 15

I've tried to import with "use client" and even dynamic like this:

const LazyLogViewer = dynamic(
  () => import("@melloware/react-logviewer").then(mod => mod.LazyLog),
  { ssr: false }
);

const ScrollFollowViewer = dynamic(
  () => import("@melloware/react-logviewer").then(mod => mod.ScrollFollow),
  { ssr: false }
);

Dynamic:

TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')
    at react-jsx-runtime.development.js:328:51
    at requireReactJsxRuntime_development (react-jsx-runtime.development.js:1332:4)
    at [project]/node_modules/@melloware/react-logviewer/dist/esm/index.js [app-client] (ecmascript) (http://localhost:3000/_next/static/chunks/node_modules_%40melloware_react-logviewer_dist_esm_index_504ee5.js:5707:26)
    at dev-base.ts:205:21
    at runModuleExecutionHooks (dev-base.ts:264:5)
    at instantiateModule (dev-base.ts:203:5)
    at getOrInstantiateModuleFromParent (dev-base.ts:132:10)
    at esmImport (runtime-utils.ts:214:18)
    at node_modules_@melloware_react-logviewer_dist_esm_index_446fad.js:12:16

The above error occurred in the <Lazy> component. It was handled by the <ReactDevOverlay> error boundary.

With SSR:

 ⨯ TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')
    at <unknown> (node_modules/@melloware/react-logviewer/node_modules/react/cjs/react-jsx-runtime.development.js:328:50)
    at requireReactJsxRuntime_development (node_modules/@melloware/react-logviewer/node_modules/react/cjs/react-jsx-runtime.development.js:1332:3)
    at require$$1 (node_modules/@melloware/react-logviewer/node_modules/react/jsx-runtime.js:6:19)
    at instantiateModule (.next/server/chunks/ssr/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (.next/server/chunks/ssr/[turbopack]_runtime.js:644:12)
    at esmImport (.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at [project]/lib/loki-view/log-view.tsx [app-rsc] (ecmascript) (lib/loki-view/log-view.tsx:1:0)
    at instantiateModule (.next/server/chunks/ssr/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (.next/server/chunks/ssr/[turbopack]_runtime.js:644:12)
    at esmImport (.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at [project]/lib/loki-view/log.tsx [app-rsc] (ecmascript) (lib/loki-view/log.tsx:3:0)
    at instantiateModule (.next/server/chunks/ssr/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (.next/server/chunks/ssr/[turbopack]_runtime.js:644:12)
    at esmImport (.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at [project]/app/logs/page.tsx [app-rsc] (ecmascript) (app/logs/page.tsx:1:0)
    at instantiateModule (.next/server/chunks/ssr/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (.next/server/chunks/ssr/[turbopack]_runtime.js:644:12)
    at esmImport (.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at [project]/app/logs/page.tsx [app-rsc] (ecmascript, Next.js server component) (.next/server/chunks/ssr/[root of the server]__3b80e2._.js:287:32)
    at instantiateModule (.next/server/chunks/ssr/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (.next/server/chunks/ssr/[turbopack]_runtime.js:644:12)
    at esmImport (.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at [project]/node_modules/next/dist/esm/build/templates/app-page.js?page=/logs/page { METADATA_0 => "[project]/app/favicon.ico.mjs { IMAGE => \"[project]/app/favicon.ico [app-rsc] (static)\" } [app-rsc] (structured image object, ecmascript, Next.js server component)", MODULE_1 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", MODULE_2 => "[project]/node_modules/next/dist/client/components/not-found-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_3 => "[project]/app/logs/page.tsx [app-rsc] (ecmascript, Next.js server component)" } [app-rsc] (ecmascript) <module evaluation> (.next/server/chunks/ssr/node_modules_3afdce._.js:4548:159)
    at instantiateModule (.next/server/chunks/ssr/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (.next/server/chunks/ssr/[turbopack]_runtime.js:644:12)
    at esmImport (.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at [project]/node_modules/next/dist/esm/build/templates/app-page.js?page=/logs/page { METADATA_0 => "[project]/app/favicon.ico.mjs { IMAGE => \"[project]/app/favicon.ico [app-rsc] (static)\" } [app-rsc] (structured image object, ecmascript, Next.js server component)", MODULE_1 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", MODULE_2 => "[project]/node_modules/next/dist/client/components/not-found-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_3 => "[project]/app/logs/page.tsx [app-rsc] (ecmascript, Next.js server component)" } [app-rsc] (ecmascript) (.next/server/chunks/ssr/node_modules_3afdce._.js:4647:1013)
    at instantiateModule (.next/server/chunks/ssr/[turbopack]_runtime.js:589:23)
    at instantiateRuntimeModule (.next/server/chunks/ssr/[turbopack]_runtime.js:652:12)
    at Object.getOrInstantiateRuntimeModule (.next/server/chunks/ssr/[turbopack]_runtime.js:668:12)
    at Object.<anonymous> (.next/server/app/logs/page.js:14:26)
    at call (node_modules/next/src/server/require-hook.ts:70:25)
    at require (node_modules/next/src/server/require.ts:121:8)
    at page (node_modules/next/src/server/load-components.ts:189:41)
    at async DevServer.findPageComponentsImpl (node_modules/next/src/server/next-server.ts:779:27)
    at async DevServer.findPageComponents (node_modules/next/src/server/dev/next-dev-server.ts:881:13)
    at async DevServer.renderPageComponent (node_modules/next/src/server/base-server.ts:3584:19)
    at async DevServer.renderToResponseImpl (node_modules/next/src/server/base-server.ts:3659:23)
    at async DevServer.pipeImpl (node_modules/next/src/server/base-server.ts:1698:20)
    at async NextNodeServer.handleCatchallRenderRequest (node_modules/next/src/server/next-server.ts:1034:6)
    at async DevServer.handleRequestImpl (node_modules/next/src/server/base-server.ts:1462:8)
    at async (node_modules/next/src/server/dev/next-dev-server.ts:514:13)
    at async Span.traceAsyncFn (node_modules/next/src/trace/trace.ts:143:13)
    at async DevServer.handleRequest (node_modules/next/src/server/dev/next-dev-server.ts:512:19)
> 1 | import { LazyLog, ScrollFollow } from "@melloware/react-logviewer";

Packages:

"@melloware/react-logviewer": "^6.0.2",
"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106",
melloware commented 2 days ago

Unfortunately I don't use Next 15 and React 19 is the bleeding edge and still BETA. I have a feeling the issue is NextJS though...

melloware commented 21 hours ago

I can't even test React 19 because StoryBook doesn't support it yet.