Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
gu-stav opened this issue Jun 9, 2021 · 14 comments · Fixed by #26281
Closed

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

gu-stav opened this issue Jun 9, 2021 · 14 comments · Fixed by #26281
Labels
bug Issue was opened via the bug report template.

Comments

@gu-stav
Copy link

gu-stav commented Jun 9, 2021

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

@gu-stav gu-stav added the bug Issue was opened via the bug report template. label Jun 9, 2021
@gurkerl83
Copy link
Contributor

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

@gu-stav
Copy link
Author

gu-stav commented Jun 11, 2021

@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
Copy link
Member

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
Copy link

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
Copy link
Author

gu-stav commented Jun 14, 2021

@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
Copy link

@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
Copy link

mxmtsk commented Jun 15, 2021

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
Copy link
Contributor

kripod commented Jun 15, 2021

@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
Copy link

FDiskas commented Jun 15, 2021

somehow related to webpack 5 #26130 (comment)

@kylemh
Copy link
Contributor

kylemh commented Jun 16, 2021

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

#26157

gurkerl83 pushed a commit to project-millipede/millipede-docs that referenced this issue Jun 16, 2021
Loading SVG resources, we use the next-svg plugin. Underneath, the plugin leverages the great SVGr library.

Between versions 10.2.4-canary.4 and 10.2.4-canary.5, incompatibility issues with the used plugin and SVGr, respectively, became known.

The problem gets tracked here vercel/next.js#25950.

To work around the problem in the meantime, the following next configuration gets used.

images: {
   disableStaticImages: true
}

Note: In Next 11 the default webpack version is 5.
gurkerl83 pushed a commit to project-millipede/millipede-docs that referenced this issue Jun 16, 2021
Loading SVG resources, we use the next-svg plugin. Underneath, the plugin leverages the great SVGr library.

Between versions 10.2.4-canary.4 and 10.2.4-canary.5, incompatibility issues with the used plugin and SVGr, respectively, became known.

The problem gets tracked here vercel/next.js#25950.

To work around the problem in the meantime, the following next configuration gets used.

images: {
   disableStaticImages: true
}

Note: In Next 11 the default webpack version is 5.
@dohomi
Copy link

dohomi commented Jun 17, 2021

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
Copy link
Member

styfle commented Jun 17, 2021

Thanks for reporting this issue!

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

@styfle styfle closed this as completed Jun 17, 2021
kodiakhq bot pushed a commit that referenced this issue Jun 18, 2021
This PR does a couple things:

1. Omit svg static imports if the user has defined custom webpack config with svg rule
2. Change TS type to `any` for svg imports to avoid conflicts with other plugins

The idea is that some users want to use `next/image` with static imports for most image types but not for svg and instead inline those images with a plugin.

- Fixes #25950  
- Fixes #26130 
- Fixes #26176 
- Fixes #26196 
- Fixes #26067 


## Bug

- [x] Related issues linked using Fixes #26130 
- [x] Integration tests added
flybayer pushed a commit to blitz-js/next.js that referenced this issue Jun 24, 2021
…6281)

This PR does a couple things:

1. Omit svg static imports if the user has defined custom webpack config with svg rule
2. Change TS type to `any` for svg imports to avoid conflicts with other plugins

The idea is that some users want to use `next/image` with static imports for most image types but not for svg and instead inline those images with a plugin.

- Fixes vercel#25950  
- Fixes vercel#26130 
- Fixes vercel#26176 
- Fixes vercel#26196 
- Fixes vercel#26067 


## Bug

- [x] Related issues linked using Fixes vercel#26130 
- [x] Integration tests added
@florianGierlichs
Copy link

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
Copy link
Member

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.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

Successfully merging a pull request may close this issue.