Module not found: Can't resolve 'some-cjs-only-package' · Turbopack could not parse /*! webpackChunkName */
appears when:After upgrading to Next.js 16 where Turbopack becomes the default bundler for both dev and build, breaking webpack loaders and CommonJS-only imports
Turbopack build error in Next.js 16
Next 16 defaults to Turbopack. Webpack loaders no longer run, CommonJS-only packages need ESM wrappers, and custom webpack config is ignored. Most fixes are additive.
webpack() function. Fix by configuring turbopack.rules and resolveAlias, replacing non-ESM deps, and using --webpack only as a temporary fallback. Read node_modules/next/dist/docs/ before assuming old patterns work.Quick fix for Turbopack build error
01// next.config.ts — Next.js 16 config with Turbopack rules and webpack fallback path02import type { NextConfig } from "next";03 04const config: NextConfig = {05 // Turbopack is default in Next 16 — this block configures it06 turbopack: {07 rules: {08 // SVG as React component using the .svg?component suffix09 "*.svg?component": {10 loaders: ["@svgr/webpack"],11 as: "*.js",12 },13 },14 // module resolution aliases (replaces webpack config.resolve.alias)15 resolveAlias: {16 "@": "./src",17 "@lib": "./src/lib",18 },19 },20 // Optional: keep a legacy webpack config that only fires when you opt out21 // Run: next build --webpack to use the legacy path as a temporary fallback22};23 24export default config;25 26// Usage:27// next dev # Turbopack (default)28// next build # Turbopack (default)29// next build --webpack # legacy webpack fallback when a dep still breaks30// import icon from "./hero.svg?component"; // renders as React componentDeeper fixes when the quick fix fails
01 · Replace @svgr/webpack with build-time codegen
01// scripts/generate-svg-components.ts — run at prebuild to emit .tsx from .svg02import { readFileSync, writeFileSync, readdirSync } from "fs";03import { join, parse } from "path";04import { transform } from "@svgr/core";05 06const srcDir = "src/assets/icons";07const outDir = "src/components/icons";08 09for (const file of readdirSync(srcDir).filter((f) => f.endsWith(".svg"))) {10 const svg = readFileSync(join(srcDir, file), "utf8");11 const name = parse(file).name.replace(/(^|-)(\w)/g, (_m, _d, c) => c.toUpperCase());12 const jsx = await transform(svg, { typescript: true, ref: true }, { componentName: name });13 writeFileSync(join(outDir, `${name}.tsx`), jsx);14}15 16// package.json17// "scripts": { "prebuild": "tsx scripts/generate-svg-components.ts" }02 · MDX with the native @next/mdx package
01// next.config.ts — @next/mdx supports Turbopack natively in Next 1602import createMDX from "@next/mdx";03import type { NextConfig } from "next";04 05const withMDX = createMDX({06 extension: /\.mdx?$/,07 options: {08 remarkPlugins: [],09 rehypePlugins: [],10 },11});12 13const config: NextConfig = {14 pageExtensions: ["ts", "tsx", "md", "mdx"],15};16 17export default withMDX(config);03 · Dynamic require bridge for CommonJS-only dependencies
01// lib/legacy-cjs-dep.ts — server-only wrapper for a stubborn CJS package02import { createRequire } from "node:module";03 04export function loadLegacy() {05 // Only call from server components or route handlers06 const require = createRequire(import.meta.url);07 const legacy = require("legacy-cjs-only-package");08 return legacy;09}Why AI-built apps hit Turbopack build error
Next.js 16 promoted Turbopack from an experimental dev server to the default bundler for both next dev and next build. Turbopack is written in Rust and shares very little code with webpack. It does not execute webpack loaders. It does not read your webpack() function in next.config.js. It has its own much smaller configuration surface under the turbopack key, and it prefers ESM packages over CommonJS. The compatibility gap is well-documented but invisible to code that was written before Next 16.
AI builders scaffold Next.js apps with boilerplate from 2023 and 2024: @svgr/webpack for SVG imports, mdx-loader for markdown, raw-loader for text files, a webpack() function that adds a resolve alias. All of these were standard. All of them are silently ignored or explicitly failing under Turbopack. Same source code, completely different build result.
CommonJS is the second pain point. A surprising number of packages still ship CommonJS only or ship an ESM wrapper with a broken package.json exports field. Turbopack follows Node's strict resolution rules, so if the package advertises ESM but the file is actually CommonJS, Turbopack fails to parse it. Webpack was permissive and would fall back to CommonJS. Turbopack does not. The fix is to install a patched version or wrap the import in a dynamic require.
Experimental flags from earlier Next.js versions also cause failures. Flags like serverActions.bodySizeLimit moved into stable config under different names, and some options were removed entirely. Read node_modules/next/dist/docs/ before shipping. The docs list every deprecated flag and its replacement. AI-generated code rarely cross-references deprecations because the training data predates the release.
Turbopack build error by AI builder
How often each AI builder ships this error and the pattern that produces it.
| Builder | Frequency | Pattern |
|---|---|---|
| Lovable | Every Next 16 scaffold | Uses @svgr/webpack — silently ignored by Turbopack |
| Bolt.new | Common | Adds custom webpack() function that Turbopack does not read |
| v0 | Common | Pulls in CJS-only chart libraries that fail ESM resolution |
| Cursor | Sometimes | Uses deprecated experimental flags from Next 14 |
| Replit Agent | Rare | Mixes next dev (Turbopack) with next build --webpack — inconsistent output |
Related errors we fix
Stop Turbopack build error recurring in AI-built apps
- →Read node_modules/next/dist/docs/ whenever you upgrade Next.js major versions.
- →Prefer ESM-only dependencies; check the package.json `type` and `exports` fields before installing.
- →Replace webpack-specific loaders with build-time codegen when possible (svg → tsx at prebuild).
- →Keep both next build and next build --webpack green during migration windows.
- →Add a CI step that runs `next build` with no flags so Turbopack regressions fail loudly.
Still stuck with Turbopack build error?
Turbopack build error questions
Why did Turbopack break after upgrading to Next.js 16?+
Can I still use custom webpack config with Turbopack?+
How do I fall back to webpack in Next.js 16?+
What is the canonical SVG-as-React-component replacement for SVGR under Turbopack?+
How long does a Turbopack migration take?+
Ship the fix. Keep the fix.
Emergency Triage restores service in 48 hours. Break the Fix Loop rebuilds CI so this error cannot ship again.
Hyder Shah leads Afterbuild Labs, shipping production rescues for apps built in Lovable, Bolt.new, Cursor, Replit, v0, and Base44. our rescue methodology.