[turbopack] SVG via svgr support

[pkolt]

What version of Turborepo are you using?

next@13.4.1

What package manager are you using / does the bug impact?

npm

What operating system are you using?

Mac

Describe the Bug

In Next.js, I use the SVG image include using the svgr webpack plugin.

// SiteLogo.svg
import LogoImage from 'public/images/logo.svg';

Next.js config:

// next.config.js
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },
  webpack(config) {
    // Support SVG (aviable )
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
  output: 'export',
};

module.exports = nextConfig;

Unfortunately when using next dev --turbo I get errors:

- error Error: Cannot find module 'public/images/logo.svg'

Expected Behavior

SVG pictures are loaded by picking up settings from next.config.js or by turbopack mechanisms.

To Reproduce

Open repository

npm ci
npx next dev --turbo

Reproduction Repo

https://github.com/pkolt/pkolt.ru

[cpotey]

To chime in, I'm getting similar issues with SVGR after upgrading to 13.4.1 too

I'm importing SVGs in from a package/shared-ui/images dir, and am getting

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg xmlns="http://www.w3.org/2000/svg" ...></svg>

Errors after importing/using in the Next 13.4 app router app (not in pages). Unsure whether this is a Next issue, or Turborepo one

[jridgewell]

We don't currently support SVGR loader natively, though it could probably be enabled using experimental.turbo.loaders config option in your next.config.js:

module.exports = {
  experimental: {
    turbo: {
      loaders: {
        '.svg': ['@svgr/webpack'],
      },
    },
  },
};

---

Also @pkolt, the 'public/images/logo.svg' specifier in your import isn't support. To fix, you need to use '../public/images/logo.svg' (or whatever the appropriate number of ../s) to import from your public directly. Alternatively, you could use compilerOptions.paths in tsconfig.json to remap importing from public/* to your public directory:

{
  "compilerOptions": {
    "paths": {
      "public/*": ["./public/*"]
    }
  }
}

[pkolt]

Hi @jridgewell !

I tried to do what you described, but unfortunately it did not help me. I get an error:

There is a<svg> root element in my picture, you can see for yourself:

https://github.com/pkolt/pkolt.ru/blob/master/public/images/calendar.svg?short_path=e465239#L0-L1

Thanks!

[iipanda]

Hi @jridgewell !

I tried to do what you described, but unfortunately it did not help me. I get an error:

There is a<svg> root element in my picture, you can see for yourself:

https://github.com/pkolt/pkolt.ru/blob/master/public/images/calendar.svg?short_path=e465239#L0-L1

Thanks!

I have the same issue, is there any fix available for this?

[tntchn]

Found a related issue here vercel/next.js#48140

It was caused by turbopack trying to get the dimension of svg but webpack already turn the import into a function

[stevenmunro]

Found a related issue here vercel/next.js#48140

It was caused by turbopack trying to get the dimension of svg but webpack already turn the import into a function

The whole world needs to know about this. I just fixed hours and hours of frustration by adopting this simple little change.

[osdiab]

Idk anything about how Turbopack nor Rust works but it seems

• there is an import test for SVGs from a while ago, not sure what the significance of that is
• Turbopack seems to have a part that treats SVGs as a static asset like other image formats, though again not sure what that means in practice.

Hoping that SVG support becomes built in or more formally supported without hacks like the above!

[tntchn]

This issue seemed to be resolved in the latest with-turbopack-loaders example with rules option in next.config.js

https://github.com/vercel/next.js/blob/17ba84b7a7774ca09917ec3fbf44074d534b5c12/examples/with-turbopack-loaders/next.config.js#L1-L16

Works for me in my project, however with this config, the usage of <Image src={SvgFile} alt='' /> is not possible as turbopack takes svg files as js files

[karldivad]

Thanks @tntchn. It worked for me on both configs, just for changing a fill color 🥳
Node: v20.7.0
Next: 13.5.3

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',
        },
      },
    },
  },
}

[Yongveloper]

감사해요@tntchn. 교체 색상을 변경하기 위해 두 가지 구성 모두에서 저에게 있었습니다. 🥳 개별: v20.7.0 다음: 13.5.3

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',
        },
      },
    },
  },
}

This has completely resolved the issue, thank you!

[dmythro]

Thanks, it works with Next.js v14 as well. Wondering when it finally transitions from experimental to stable :)

[michaelhays]

This is working as expected with @svgr/webpack, should this issue be closed?

[dmythro]

Using it like that for the last few days, didn't see issues so far.

But it was not so easy to find, so I'd close it after documenting properly.

Wondering when can it go out of "experimental" though.

[bettiolo]

Worked for me too, can be closed.

[Anishali2]

Thanks @tntchn. It worked for me on both configs, just for changing a fill color 🥳 Node: v20.7.0 Next: 13.5.3

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',
        },
      },
    },
  },
}

You saved my life thanks brother !

[Yihao-G]

How can I configure it if I want to keep the original .svg loader rule? Like the one documented on the SVGR website:

module.exports = {
  webpack(config) {
    // Grab the existing rule that handles SVG imports
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.('.svg'),
    )

    config.module.rules.push(
      // Reapply the existing rule, but only for svg imports ending in ?url
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      },
      // Convert all other *.svg imports to React components
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
        use: ['@svgr/webpack'],
      },
    )

    // Modify the file loader rule to ignore *.svg, since we have it handled now.
    fileLoaderRule.exclude = /\.svg$/i

    return config
  },

  // ...other config
}

[Anishali2]

Yihao

Which version of framework you are using ?

[Yihao-G]

Which version of framework you are using ?

I'm using Nextjs 14.2.3

[Anishali2]

I've configured this hope this helps you

If you are using turbo repo
file: /next.config.js

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

and this is the svgr config
file: /next.config.js

  webpack(config) {
   const fileLoaderRule = config.module.rules.find((rule) =>
     rule.test?.test?.('.svg')
   )

   config.module.rules.push(
     {
       ...fileLoaderRule,
       type: 'javascript/auto',
       test: /\.svg$/i,
       resourceQuery: /url/ // *.svg?url
     },
     {
       test: /\.svg$/i,
       type: 'javascript/auto',
       issuer: fileLoaderRule.issuer,
       resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
       use: ['@svgr/webpack']
     }
   )

   return config
 },

for typescript support use this
file root/svgr.d.ts

 import { FC, SVGProps } from 'react'
 const content: FC<SVGProps<SVGElement>>
 export default content
}

declare module '*.svg?url' {
 const content: any
 export default content
}

How I use those

file: root/src/assets/svg/index.ts
export { default as GlobeIcon } from './globe.svg'

file: root/src/assets/svg/globe.svg
note use the "currentColor" for color in svgr to modify the color according your style by just changing the text-color

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path fill="currentColor" d="M29.52 22.52L18 10.6L6.48 22.52a1.7 1.7 0 0 0 2.45 2.36L18 15.49l9.08 9.39a1.7 1.7 0 0 0 2.45-2.36Z" class="clr-i-outline clr-i-outline-path-1"/><path fill="none" d="M0 0h36v36H0z"/></svg>

usage

import React from 'react'
import { GlobeIcon } from '@/src/assets/svg' // using  alias @ import

const IconUse = () => {
 return (
   <div>
     {/* im using tailwind css and this text color only works with currentColor value in fill */}
     <GlobeIcon className='text-red-500'/>
   </div>
 )
}

export default IconUse

:)

[daaain]

If I understood right from the turbo docs page, the webpack() bit is pointless, it won't be used. Putting a console.log() in there I didn't get any output, so by all means seems to be true.

There's the with-turbopack-loaders example in the repo that covers this usecase and currently works with latest Next.js.

This all being said, I've wasted a few hours on this and just can't get it working with Next 14 and Typescript 5, always getting back {"src":"/_next/static/media/data-sources.b4ce7cbe.svg","width":24,"height":24,"blurDataURL":null,"blurWidth":0,"blurHeight":0} instead of a component, no matter what I try...

As a workaround, I'm just converting the SVGs to React components with https://react-svgr.com/playground/ now

[mirismaili]

Like @Yihao-G I still have problem with loading .svgs using Turbopack. I want to configure the boundler to load .svgs in two ways according to my import method. If I just import it, it should be imported regularly (the default way in Next.js). And if I import it using ?react resource-query, it should be imported using SVGR.

And this is my webpack configuration:

webpack(config) {
  const defaultSvgLoader = config.module.rules.find((rule) => rule.test?.test?.('.svg'))
  config.module.rules.push(
    {
      ...defaultSvgLoader,
      test: /\.svg$/i,
      resourceQuery: {not: [...defaultSvgLoader.resourceQuery.not, /react/]}, // exclude if *.svg?react
    },
    {
      test: /\.svg$/i,
      issuer: defaultSvgLoader.issuer, // issuer: /\.[jt]sx?$/ doesn't work:
      // https://github.com/vercel/next.js/issues/48177#issuecomment-1506251112
      resourceQuery: /react/, // *.svg?react
      use: '@svgr/webpack',
    },
  )
  return config
}

As you can see, I can use ?react query to tell the boundler that I want a React component, and w/o it, it should be imported regularly (as StaticImageData).

How can I configure the similar behaviour for Turbopack?

[judewang]

@mirismaili Turbopack doesn't support resourceQuery. We can import SVG as React component without passing "?react". If we want to use SVG image as src of an Image component, we don't have to statically import the SVG image, we can just pass the public path like /logo.svg as the src property. The downside is that we need to add width, height props, but it's ok for me as a workaround.