SVGR fails to load SVGs with Next 11

[ScottAgirs]

UPDATE

A temporary solution that seems to work and does not disable Webpack 5

If you find any issues with this solution, please tag me @ScottAgirs to update as appropriate.
By @dohomi

  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
  }

---

What version of Next.js are you using?

Next 11.0.0

What version of Node.js are you using?

14.x

What browser are you using?

Chrome, Brave

What operating system are you using?

macOS 11.4

How are you deploying your application?

localhost atm

Describe the Bug

https://discord.com/channels/752553802359505017/752668543891276009/854396809497673788

After upgrading from 10.x Next.js with webpack 4 config, to Nextjs 11, application fails to build with the below errors:

error - ./icon.svg
TypeError: unsupported file type: undefined (file: undefined)

Full stack trace when trying to load the app (open in browser tab)

----- Expand to view -----

Error: Cannot find module '/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/.next/server/pages-manifest.json'
Require stack:
- /Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/require.js
- /Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/load-components.js
- /Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/api-utils.js
- /Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/next-server.js
- /Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/server/next.js
- /Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/server/lib/start-server.js
- /Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/cli/next-dev.js
- /Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.mod._resolveFilename (/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/build/webpack/require-hook.js:4:1855)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at getPagePath (/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/require.js:1:735)
    at requirePage (/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/require.js:1:1397)
    at loadComponents (/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/load-components.js:1:1289)
    at DevServer.findPageComponents (/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/next-server.js:77:296)
    at DevServer.renderErrorToHTML (/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/next-server.js:139:209) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/require.js',
    '/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/load-components.js',
    '/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/api-utils.js',
    '/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/server/next.js',
    '/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/server/lib/start-server.js',
    '/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/cli/next-dev.js',
    '/Users/scottagirs/workspace/iJS/ijs.to/iJStoFE/node_modules/next/dist/bin/next'
  ]
}

To Reproduce

Upgrade to Next 11 and add next.config.js

module.exports = {
  webpack(config, options) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

in package.json

"@svgr/webpack": "^5.5.0",
"next": "^11.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",

[sambecker]

Getting same error message when pulling in SVGs using npm package next-images.

The following works in Next 10.2.3. but not 11.0.0 (both with Webpack 5):

import SvgImage from '../../images/image.svg';

[dreamer01]

Was using svg-url-loader, got following error

error - ./assets/images/logo.svg
TypeError: unsupported file type: undefined (file: undefined)

Tried after installing @svgr/webpack
Still facing the same issue.

[kripod]

I found a temporary workaround until an official solution is available.

Firstly, add the following to next.config.js:

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

After that, fix type checking errors via patch-package:

• Remove the following snippet from node_modules/next/types/global.d.ts:

  declare module '*.svg' {
    const content: StaticImageData
  
    export default content
  }

• Change a line as follows in node_modules/next/dist/client/image.d.ts:

    export declare type ImageProps = Omit<JSX.IntrinsicElements['img'], 'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'style'> & {
        loader?: ImageLoader;
        quality?: number | string;
        priority?: boolean;
        loading?: LoadingValue;
        unoptimized?: boolean;
        objectFit?: ImgElementStyle['objectFit'];
        objectPosition?: ImgElementStyle['objectPosition'];
  - } & (StringImageProps | ObjectImageProps);
  + } & StringImageProps;

Run npx patch-package next and make sure to apply the patch in every environment by installing patch-package and adding it as a postinstall script.

[FDiskas]

I would like add some reproducible demos here. p.s. Icon component is just converted to js from typescript - do not blame.
example with next10
https://stackblitz.com/edit/nextjs-8hivbq
example with next11
https://stackblitz.com/edit/nextjs-laqdgv

[ilchoTaleski]

I have the same issue. When I add webpack5: false in next.config.js it works. I am using next-images without any loader configuration.

[mxmtsk]

This seems to be a duplicate of #25950.

[chozzz]

This might also be related as it also happens to me, but non svgr related.
However, this happens after upgrading from 10.1.3 to 11.0.0.

./public/static/images/about/faq-cod-visibility.png
TypeError: unsupported file type: undefined (file: undefined)

> Build error occurred
Error: > Build failed because of webpack errors
    at /home/choz/dev/projects/fe/node_modules/next/dist/build/index.js:15:924
    at async Span.traceAsyncFn (/home/choz/dev/projects/fe/node_modules/next/dist/telemetry/trace/trace.js:6:584)

Setting webpack5: false does fix the issue for me too.

[kylemh]

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

#26157

[jakeherp]

I flagged this issue yesterday in Discord (see https://discordapp.com/channels/752553802359505017/752647196419031042/854484227047555102), the proposed solution by @styfle was to use disableStaticImages: true, but this means losing support for some of the amazing new features for next/images.
The other proposed solution was to import SVGs as fs.readFile('./file.svg') and then setting them using dangerouslySetInnerHTML, but I don't think this is a viable solution as firstly the readFile needs to happen serverside and secondly it adds unnecessary complexity.

I believe that inline SVGs are a very common use case and this should be patched in a minor version release soon. One option could be to exclude SVGs from static imports, when svgr/webpack is set up in next.config.js

[mohux]

It will have to be fixed in a minor version, no worries they will surely fix it, just give them time to relax after preparing for the huge confrencee
if you are in deep need for SVG, there are multiple solutions for now (not optimal)

1 - change svg to react components and extend React.HTMLAttrbitutes<HTMLSVGElement> and pass props to svg
2 - disable webpack5 but you will lose a lot of benifits like and probably static files wont work (blurry image placeholder for example)

3- disable staticImages images: { disableStaticImages: true, },

4 - import svg as images not as components

[njmh]

I'm facing this issue too sadly. I make heavy use of both next/image and inline SVGs (using SVGR) in most of my Next projects so the workarounds propsed aren't adequate. Curious why SVG was added to static image type definitions when the use cases for inlining SVGs are so common?