How to integrate @svgr/webpack to turbopack in next.js?

Question

The documentation says that turbopack works with @svgr/webpack, but doesn't really want to work.

If you run the project without --turbo (turbopack), everything works fine. And if run with --turbo, it gives an error:

Error run turbopack:

Processing image failed
  Failed to parse svg source code for image dimensions
  
  Caused by:
  - Source code does not contain a <svg> root element

my next.config.js

const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      use: ["@svgr/webpack"],
    });

    return config;
  },

  experimental: {
    appDir: true,
    turbo: {
      loaders: {
        ".svg": ["@svgr/webpack"],
      },
    },
  },
};

module.exports = nextConfig;

Does this answer your question? Can't import SVG into Next.js (refer last part of my answer, should work fine with latest canary) — brc-dd
– brc-dd, Commented Feb 9, 2024 at 15:30

Dmitrii Gorshkov · Accepted Answer · 2024-02-20 20:10:38Z

7

Error occurs because next tries to get dimensions of svg component but @svgr/webpack already change svg to React component. to prevent next.js doing that you can specify "as: '*.js'" in rules options;

next.confing.js

const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      use: ["@svgr/webpack"],
    });

    return config;
  },

  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js'
        }
      },
    }
  },
};

module.exports = nextConfig;

answered Feb 20, 2024 at 20:10

Dmitrii Gorshkov

711 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moeid Kh · Accepted Answer · 2025-09-03 07:51:14Z

0

You can refer to the official next js documentation:
turbopack doc

To use "@svgr/webpack" you can add this section to the next.config file:

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

answered Sep 3 at 7:51

Moeid Kh

111 bronze badge

Collectives™ on Stack Overflow

How to integrate @svgr/webpack to turbopack in next.js?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related