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;

Answer 1

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;