nextjs - 💡(How to fix) Fix Turbopack Error: Module in async chunking edge is not chunkable [5 comments, 4 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#84912Fetched 2026-04-08 02:17:59
View on GitHub
Comments
5
Participants
4
Timeline
18
Reactions
0
Timeline (top)
commented ×5subscribed ×4labeled ×3mentioned ×3

Error Message

TurbopackInternalError: Failed to write app endpoint /[domain]/(site)/page

Caused by:

  • Module in async chunking edge is not chunkable

Root Cause

The issue occurs in [domain]/(site)/layout.tsx where a dynamic import uses a template literal with a runtime variable:

export default async function RootLayout() {
  const site = await getSiteData(); // Simulates database fetch
  const themeName = site?.themeName ? toKebabCase(site?.themeName) : "one";

  // This line causes the Turbopack error
  const selectedTheme = await import(
    `@/styles/themes/theme-${themeName}`
  );

  const theme = (selectedTheme.default as Theme) ?? null;

  return (
    <div
      className="min-h-screen bg-gray-50"
      {...(site?.themeName
        ? {
            "data-color-theme": `theme-${toKebabCase(site?.themeName)}-palette`,
          }
        : {})}
      {...(site?.themeName
        ? { "data-font-theme": `theme-${toKebabCase(site?.themeName)}-font` }
        : {})}
    >
      ...
    </div>
  );
}

Code Example

TurbopackInternalError: Failed to write app endpoint /[domain]/(site)/page

Caused by:
- Module in async chunking edge is not chunkable

---

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin 24.6.0
Binaries:
  Node: 22.16.0
  pnpm: 10.18.1
  npm: N/A
  Yarn: N/A
Relevant Packages:
  next: 16.0.0-canary.6
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.x
Turbopack: v16.0.0-canary.5-8-gd0ffcfcb3

---

export default async function RootLayout() {
  const site = await getSiteData(); // Simulates database fetch
  const themeName = site?.themeName ? toKebabCase(site?.themeName) : "one";

  // This line causes the Turbopack error
  const selectedTheme = await import(
    `@/styles/themes/theme-${themeName}`
  );

  const theme = (selectedTheme.default as Theme) ?? null;

  return (
    <div
      className="min-h-screen bg-gray-50"
      {...(site?.themeName
        ? {
            "data-color-theme": `theme-${toKebabCase(site?.themeName)}-palette`,
          }
        : {})}
      {...(site?.themeName
        ? { "data-font-theme": `theme-${toKebabCase(site?.themeName)}-font` }
        : {})}
    >
      ...
    </div>
  );
}

---

import type { Theme } from "@/types/theme";

const themeOne: Theme = {
  name: "one",
  global: { /* ... config ... */ },
  nav: { /* ... config ... */ },
};

export default themeOne;

---

import type { Theme } from "@/types/theme";

const themeTwo: Theme = {
  name: "two",
  global: { /* ... config ... */ },
  nav: { /* ... config ... */ },
};

export default themeTwo;

---

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
};

export default nextConfig;

---

Failed to write app endpoint /home/page

Caused by:
- Module in async chunking edge is not chunkable

Debug info:
- Execution of get_written_endpoint_with_issues_operation failed
- Execution of endpoint_write_to_disk failed
- Execution of <AppEndpoint as Endpoint>::output failed
- Failed to write app endpoint /home/page
- Execution of AppEndpoint::output failed
- Execution of AppEndpoint::app_entry_chunks failed
- Execution of <NodeJsChunkingContext as ChunkingContext>::chunk_group failed
- Module in async chunking edge is not chunkable
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/alexanderbnelson/dynamic-import-turbo

To Reproduce

  1. Clone the repository
  2. Run pnpm install
  3. Run pnpm run dev
  4. Navigate to http://site-one.localhost:3000 or http://site-two.localhost:3000
  5. Observe the Turbopack error

Current vs. Expected behavior

Current Behavior: Turbopack throws a fatal error when compiling pages:

TurbopackInternalError: Failed to write app endpoint /[domain]/(site)/page

Caused by:
- Module in async chunking edge is not chunkable

Expected Behavior: The dynamic import should resolve at runtime based on the variable, loading the appropriate theme module without errors.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin 24.6.0
Binaries:
  Node: 22.16.0
  pnpm: 10.18.1
  npm: N/A
  Yarn: N/A
Relevant Packages:
  next: 16.0.0-canary.6
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.x
Turbopack: v16.0.0-canary.5-8-gd0ffcfcb3

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

Turbopack, Dynamic Routes

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

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

Root Cause

The issue occurs in [domain]/(site)/layout.tsx where a dynamic import uses a template literal with a runtime variable:

export default async function RootLayout() {
  const site = await getSiteData(); // Simulates database fetch
  const themeName = site?.themeName ? toKebabCase(site?.themeName) : "one";

  // This line causes the Turbopack error
  const selectedTheme = await import(
    `@/styles/themes/theme-${themeName}`
  );

  const theme = (selectedTheme.default as Theme) ?? null;

  return (
    <div
      className="min-h-screen bg-gray-50"
      {...(site?.themeName
        ? {
            "data-color-theme": `theme-${toKebabCase(site?.themeName)}-palette`,
          }
        : {})}
      {...(site?.themeName
        ? { "data-font-theme": `theme-${toKebabCase(site?.themeName)}-font` }
        : {})}
    >
      ...
    </div>
  );
}

Why This Pattern Matters

This is a critical pattern for:

  • Multi-tenant applications where themes/configurations are loaded dynamically based on database data
  • Dynamic configuration loading based on runtime data (user preferences, tenant settings, etc.)
  • Conditional module loading in Server Components where the module path cannot be known at build time

The Theme Files

The modules being imported are simple TypeScript files:

styles/themes/theme-one/index.tsx:

import type { Theme } from "@/types/theme";

const themeOne: Theme = {
  name: "one",
  global: { /* ... config ... */ },
  nav: { /* ... config ... */ },
};

export default themeOne;

styles/themes/theme-two/index.tsx:

import type { Theme } from "@/types/theme";

const themeTwo: Theme = {
  name: "two",
  global: { /* ... config ... */ },
  nav: { /* ... config ... */ },
};

export default themeTwo;

Configuration Details

next.config.ts:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
};

export default nextConfig;

Panic Log Output

The full error from the panic log shows:

Failed to write app endpoint /home/page

Caused by:
- Module in async chunking edge is not chunkable

Debug info:
- Execution of get_written_endpoint_with_issues_operation failed
- Execution of endpoint_write_to_disk failed
- Execution of <AppEndpoint as Endpoint>::output failed
- Failed to write app endpoint /home/page
- Execution of AppEndpoint::output failed
- Execution of AppEndpoint::app_entry_chunks failed
- Execution of <NodeJsChunkingContext as ChunkingContext>::chunk_group failed
- Module in async chunking edge is not chunkable

Note: While the error mentions /home/page, the root cause is in the root layout (app/layout.tsx) which affects all pages in the application.

I might be able to get around this by just having an index file in my theme folder and using the default export so that I don't need two variables in the import path:

@/styles/themes/theme-${themeName}/theme-${themeName}

becomes

@/styles/themes/theme-${themeName}

<sub>PACK-5692</sub>

extent analysis

TL;DR

The Turbopack error can be resolved by modifying the dynamic import statement to use a single variable in the import path.

Guidance

  • Identify the dynamic import statement causing the error: const selectedTheme = await import(@/styles/themes/theme-${themeName});
  • Modify the import statement to use a single variable in the import path, as suggested: const selectedTheme = await import(@/styles/themes/theme-${themeName}); becomes const selectedTheme = await import(@/styles/themes/${themeName});
  • Ensure the theme files are exported as default exports, allowing for the simplified import path.
  • Verify that the theme files are correctly named and located in the styles/themes directory.

Example

// Simplified import statement
const selectedTheme = await import(`@/styles/themes/${themeName}`);

// Theme file (e.g., theme-one/index.tsx)
import type { Theme } from "@/types/theme";

const themeOne: Theme = {
  name: "one",
  global: { /* ... config ... */ },
  nav: { /* ... config ... */ },
};

export default themeOne;

Notes

  • This solution assumes that the theme files are correctly configured and exported as default exports.
  • If the issue persists, further investigation into the Turbopack configuration and the application's build process may be necessary.

Recommendation

Apply the suggested workaround by modifying the dynamic import statement to use a single variable in the import path, as this is likely to resolve the Turbopack error.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING