Webpack: @svgr/webpack broken since 10.2.4-canary.5

[gu-stav]

What version of Next.js are you using?

10.2.4-canary.12

What version of Node.js are you using?

v14.17.0

What browser are you using?

Node

What operating system are you using?

Ubuntu

How are you deploying your application?

Not yet

Describe the Bug

In order to import SVG files as React component we are currently extending the webpack config with

webpack(config) {
  config.module.rules.push({
    test: /\.svg$/,
    issuer: /\.(js|ts)x?$/,
    use: ['@svgr/webpack']
  });

  return config;
},

In the latest canary this seems to be broken and leads to:

error - ./public/icons/bars.svg
TypeError: unsupported file type: undefined (file: undefined)

See the codesandbox for a minimal reproduction.

Expected Behavior

I expect the import to work and to render a React component.

To Reproduce

https://codesandbox.io/s/polished-fire-z8w39

[gurkerl83]

I`m seeing this error as well, version 10.2.4-canary.4 is working, 10.2.4-canary.5 is broken.

[gu-stav]

@timneutkens Sorry for the direct ping, but seems to be a showstopper for upgrades at the moment. Given the popularity of the rule I just want to avoid this to be a showstopper for whatever you are going to present next week :)

I believe this could be related to the following PR: #25797

[timneutkens]

You're customizing webpack configuration which has no guarantee that those customizations will continue working in newer versions. You can disable static image imports using:

module.exports = {
  images: {
    disableStaticImages: true
  }
}

[kikoanis]

If you are using babel, this plugin should work just fine babel-plugin-inline-react-svg. Just add it to .babelrc or babel.config.js plugins.

[gu-stav]

@kikoanis Thanks for you suggestion. Did you test the approach with the latest canary? Even with the babel solution I see a similar problem ... Disabling static images didn't fix the issue for me ...

I'm wondering what's the idea here - are static images supposed to replace other inline-svg solutions?

[kikoanis]

@gustavpursche Actually I am using it right now with only the babel plugin. I got rid of the webpack plugin (next-react-svg) I was using and everything is working fine. Unfortunately I am not in a position to share my code as it is not public.

[mxmtsk]

You're customizing webpack configuration which has no guarantee that those customizations will continue working in newer versions. You can disable static image imports using:

module.exports = {
  images: {
    disableStaticImages: true
  }
}

This won't disable the type definitions for static files like SVGs though. These make my builds fail. It's still StaticImageData - Is there a way to override these? I've tried my own global.d.ts in my project but this didn't work.

[kripod]

@mxmtsk I recently came up with a workaround even for types until a more sophisticated solution is available.

I think that static image types should be toggle-able out of the box.

[FDiskas]

somehow related to webpack 5 #26130 (comment)

[kylemh]

I added a feature request to internalize SVGR into Next.js's core webpack configuration. Please voice your support there!

#26157

[dohomi]

I think with this webpack config you can use in in v11

webpack (config) {
    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'))
    fileLoaderRule.exclude = /\.svg$/
    config.module.rules.push({
      test: /\.svg$/,
      loader: require.resolve('@svgr/webpack')
    })
    return config
  }

[styfle]

Thanks for reporting this issue!

I'm going to merge with the other duplicate issue which has more comments: #26130.

[florianGierlichs]

I think with this webpack config you can use in in v11

webpack (config) {
    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'))
    fileLoaderRule.exclude = /\.svg$/
    config.module.rules.push({
      test: /\.svg$/,
      loader: require.resolve('@svgr/webpack')
    })
    return config
  }

I'm getting the error

Cannot set property 'exclude' of undefined

for "fileLoaderRule"
When I switch some lines to this

webpack (config) {
    config.module.rules.push({
          test: /\.svg$/,
          loader: require.resolve('@svgr/webpack')
        })
    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'))
    fileLoaderRule.exclude = /\.svg$/
    
    return config
  }

this error is gone, but I'm starting to get new ones

error - ./public/img/svg/icon-mail.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Obviously, I'm handling something wrong here, but I cant figure out, how to fix it... some1 got any hints?

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.