search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.71k stars 26.62k forks source link

Dynamic import trace in page source #65592

Open bonesoul opened 4 months ago

bonesoul commented 4 months ago

Link to the code that reproduces this issue

https://github.com/mertafor/nextjs-dynamic-bailout

To Reproduce

1 - Start application: pnpm dev 2 - Visit localhost:3000 and view page source 3 - dynamic imports with "ssr:false" leaves a trace in dev mode

Current vs. Expected behavior

same issue as here: https://github.com/vercel/next.js/issues/63272

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 64729
  Available CPU cores: 32
Binaries:
  Node: 20.11.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Lazy Loading

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

const LazyCompNonSSR = dynamic(
  () =>
    import('./LazyImportComponent').then(
      (mod) => mod.LazyImportComponent
    ),
  { ssr: false }
);
<template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING" data-msg="Bail out to client-side rendering: next/dynamic" data-stck="
--
  | at BailoutToCSR (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/shared/lib/lazy-dynamic/dynamic-bailout-to-csr.js:13:11)
  | at Suspense
  | at LoadableComponent
  | at div
  | at ClientComp
  | at Lazy
  | at main
  | at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:241:11)
  | at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:72:9)
  | at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:80:11)
  | at NotFoundErrorBoundary (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:76:9)
  | at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:84:11)
  | at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:338:11)
  | at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:159:11)
  | at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:152:9)
  | at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:227:11)
  | at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/render-from-template-context.js:16:44)
  | at Lazy
  | at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:356:11)
  | at Lazy
  | at body
  | at html
  | at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:72:9)
  | at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:80:11)
  | at ReactDevOverlay (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
  | at HotReload (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:308:11)
  | at Router (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/app-router.js:177:11)
  | at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:113:9)
  | at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:159:11)
  | at AppRouter (webpack-internal:///(ssr)/./node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/app-router.js:517:13)
  | at Lazy
  | at Lazy
  | at rw (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/nextjs-dynamic-bailout/node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:15737)
  | at rw (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/nextjs-dynamic-bailout/node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:15737)
  | at ServerInsertedHTMLProvider (/Users/mertdaglaroglu/Documents/WebProjects/Reactive/nextjs-dynamic-bailout/node_modules/.pnpm/next@14.1.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:21384)"></template>
CaptainN commented 3 months ago

This is causing errors in production for me. How do I fix it?