Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic import trace in page source #65592

Open
bonesoul opened this issue May 9, 2024 · 1 comment
Open

Dynamic import trace in page source #65592

bonesoul opened this issue May 9, 2024 · 1 comment
Labels
bug Issue was opened via the bug report template. Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`).

Comments

@bonesoul
Copy link

bonesoul commented May 9, 2024

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: #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>


@bonesoul bonesoul added the bug Issue was opened via the bug report template. label May 9, 2024
@github-actions github-actions bot added the Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`). label May 9, 2024
@CaptainN
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Lazy Loading Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`).
Projects
None yet
Development

No branches or pull requests

2 participants