How to integrate @svgr/webpack to make turbopack work?

[penteleichuk]

Summary

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

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;

If you run the project without turbopack, everything works fine.

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

Additional information

No response

Example

No response

[tntchn]

There is an issue #48140 in turbopack working with @svgr/webpack, so probable need to wait for resolving this

[ifedayoprince]

Hello, is this fixed? I'm still running into the error

[tntchn]

vercel/turborepo#4832 (comment) Does this work for you?

[cpotey]

EDIT

This is sorted now. I was being thick...

I already had an instance of experimental in my next.config.js, and I had to put the above turbo code inside it, as I accidentally had two experimentals in there - worked after that! Hope this might help someone else look at their code twice!

---

Also running into the Error: Unsupported Server Component type: {...} error still

We've got a shared UI library, and are importing a Footer component, which has SVGs inside it. This Footer component is used in multiple Next.js apps - and it works if I disable turbopack, but errors if enabled.

import Facebook from '@assets/images/icons/social/facebook.svg';
import LinkedIn from '@assets/images/icons/social/linkedin.svg';
import Twitter from '@assets/images/icons/social/twitter.svg';

...

const CommonFooter = ({ children }: FooterProps) => {
  const footerData = {
    ...
    social: [
      {
        id: 1,
        title: 'Twitter',
        img: <Twitter />,
      },
      {
        id: 2,
        title: 'Facebook',
        img: <Facebook />,
      },
      {
        id: 3,
        title: 'Linkedin',
        img: <LinkedIn />,
      },
    ],
  };

  return (
    <footer>
        {children}
        
      <Container>
        <nav>
          {footerData.social.map((link) => (
            <a
              href={link.url}
              target="_blank"
              rel="noreferrer"
              aria-label={link.title}
              key={link.id}
            >
              {link.img}
            </a>
          ))}
        </nav>
      </Container>
    </footer>
  );
};

I've got all the usual stuff in my Next.config.js too - including the

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

[bloodykheeng]

@penteleichuk

try this typescript
next 15
next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            icon: true
          }
        }
      ]
    });
    return config;
  },
  experimental: {
    turbo: {
      rules: {
        "*.svg": {
          loaders: ["@svgr/webpack"],
          as: "*.js"
        }
      }
    }
  }
};

export default nextConfig;

npm i @svgr/webpack

[bloodykheeng]

Your welcome 🤗

[Manhha3010]

Bố cứu đời con

[abdul-irfan-k]

Thank you, it worked

[d-zhukov-snotor]

Thanks!

[bradleyplaydon]

Damn, thank you!

[sectsect]

It might be helpful for others in the future, so just leaving this example here.
It seems that passing options to @svgr/webpack is supported in this format.

Example for Next.js v15.3.0

15.3.0: experimental.turbo is changed to turbopack.

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: [
          {
            loader: '@svgr/webpack',
            options: {
              svgoConfig: {
                plugins: [
                  {
                    name: 'preset-default',
                    params: {
                      overrides: {
                        // customize default plugin options
                        removeViewBox: false,
                      },
                    },
                  },
                  'removeDimensions',
                ],
              },
            },
          },
        ],
        as: '*.js',
      },
    },
  },
}

[its-mohammadhosein]

I used to do remove width and height manually

[vishalx07]

It only works in development. When I run the build, it throws an error—but if I remove the SVG, everything works fine and the application builds successfully.

[sectsect]

If you're using next build (without the --turbopack flag), you also need to include the traditional webpack configuration in next.config.ts.

[d-zhukov-snotor]

thanks, it works ideal