gotchatypescriptnextjsModerate
Turbopack: enabling and known limitations in Next.js 15
Viewed 0 times
Turbopack stable for next dev in Next.js 15; production build still uses webpack
turbopackbundlerfast buildswebpack alternativeSWCdevelopment performance
Error Messages
Error: webpack 'loaders' configuration is not supported with Turbopack.Problem
Turbopack speeds up local development but some webpack plugins, loaders, and configurations are not yet supported. Enabling it breaks certain setups without clear error messages.
Solution
Enable Turbopack with the --turbopack flag and configure supported transforms:
// package.json
{
"scripts": {
"dev": "next dev --turbopack",
"build": "next build"
}
}
// Turbopack compatibility:
// Supported: sass/scss, CSS Modules, Tailwind CSS (PostCSS)
// Supported: TypeScript, JSX, SVG with config
// NOT supported: arbitrary webpack plugins
// NOT supported: custom Babel plugins (use SWC transforms)
// NOT supported: webpack-bundle-analyzer
// SVGR with Turbopack — next.config.ts
const config: NextConfig = {
experimental: {
turbo: {
rules: {
'*.svg': {
loaders: ['@svgr/webpack'],
as: '*.js',
},
},
},
},
};
// To analyze bundle with Turbopack off:
// Use next build (webpack) + @next/bundle-analyzer
// package.json
{
"scripts": {
"dev": "next dev --turbopack",
"build": "next build"
}
}
// Turbopack compatibility:
// Supported: sass/scss, CSS Modules, Tailwind CSS (PostCSS)
// Supported: TypeScript, JSX, SVG with config
// NOT supported: arbitrary webpack plugins
// NOT supported: custom Babel plugins (use SWC transforms)
// NOT supported: webpack-bundle-analyzer
// SVGR with Turbopack — next.config.ts
const config: NextConfig = {
experimental: {
turbo: {
rules: {
'*.svg': {
loaders: ['@svgr/webpack'],
as: '*.js',
},
},
},
},
};
// To analyze bundle with Turbopack off:
// Use next build (webpack) + @next/bundle-analyzer
Why
Turbopack is a Rust-based bundler that provides much faster local dev builds than webpack by only bundling what's changed. However, it is not webpack-compatible — custom webpack loaders and plugins require Turbopack-specific equivalents. Production builds still use webpack as of Next.js 15.
Gotchas
- Turbopack is only for next dev in Next.js 15 — next build still uses webpack
- Custom Babel configurations are ignored by Turbopack — SWC transforms are used instead
- webpack-bundle-analyzer requires switching back to webpack for analysis
- next.config.js webpack() function is ignored when Turbopack is active
Code Snippets
Enable Turbopack for dev only
{
"scripts": {
"dev": "next dev --turbopack",
"build": "next build"
}
}Context
When enabling Turbopack for faster local development in Next.js 15+
Revisions (0)
No revisions yet.