Share

Since Next.js 16 ships with Turbopack as the default bundler, many developers upgrading from earlier versions encounter a common issue: SVG imports that used to work via custom webpack configurations fail under Turbopack. This often manifests as SVG imports resolving to undefined, errors on build, or simply failing to render when used as React components.

Why? In Next.js 16, Turbopack doesn’t run your custom Webpack config, so any webpack-specific loader setup like SVG handling gets ignored.

The SVG Import Problem in Next.js 16

Traditionally, in Webpack-based Next.js apps, you could import SVGs like this:

import Logo from './logo.svg';

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
}

Why This Happens

Next.js 16+ with Turbopack does not respect the old webpack() override in next.config.js. So any webpack loader you defined previously (including SVGR for SVGs) no longer runs.

Instead, Turbopack introduces its own loader configuration API under turbopack.rules, which lets you declare how certain files should be handled.

That API is similar to webpack rules but tailored for Turbopack’s loader system.

Configuring Turpopack Rule in next.config.mjs

First, install the loader you want—for example SVGR:

npm install --save-dev @svgr/webpack

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        // Treat the loaded file as JS (so importing returns a component)
        as: '*.js',
      },
    },
  },
};

module.exports = nextConfig;

import Logo from './logo.svg';

export default function Header() {
  return (
    <header>
      <Logo width={48} height={48} />
      <h1>Welcome</h1>
    </header>
  );
}

turbopack: {
  rules: {
    '*.svg': {
      loaders: [
        {
          loader: '@svgr/webpack',
          options: { icon: true },
        },
      ],
      as: '*.js',
    },
  },
},