Next.js Discord

Discord Forum

Pass options to `@svgr/webpack` in Turbopack

Unanswered
Harrier posted this in #help-forum
Open in Discord
HarrierOP
Hey!

I saw that to use @svgr/webpack, you do this:
module.exports = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
}


However, I need to pass options to this loader. This is how it is with Webpack:
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
        use: [
          {
            loader: "@svgr/webpack",
            options: {
              // prevent stripping of viewBox
              // https://github.com/gregberge/svgr/issues/18#issuecomment-2045408585
              svgoConfig: {
                plugins: [
                  {
                    name: "preset-default",
                    params: {
                      overrides: {
                        removeViewBox: false,
                      },
                    },
                  },
                ],
              },
            },


how can i achieve the same w/ turbopack?

2 Replies

Labrador Retriever
Now that turbopack is stable, I'd also like to know the answer to this question. None of the docs say anything about passing config options to the loaders...
Labrador Retriever
Ok, looked through the typescript defs and found out how to do options:

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