Omit svg static imports if custom webpack config is defined

package.json

@@ -43,6 +43,7 @@
     "@babel/preset-react": "7.12.10",
     "@fullhuman/postcss-purgecss": "1.3.0",
     "@mdx-js/loader": "0.18.0",
+    "@svgr/webpack": "5.5.0",
     "@testing-library/react": "11.2.5",
     "@types/cheerio": "0.22.16",
     "@types/fs-extra": "8.1.0",
@@ -127,7 +128,7 @@
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
     "tree-kill": "1.2.2",
-    "typescript": "4.3.0-beta",
+    "typescript": "4.3.4",
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",
     "webpack-bundle-analyzer": "4.3.0",

packages/next/build/webpack-config.ts

@@ -1007,7 +1007,12 @@ export default async function getBaseWebpackConfig(
         ...(!config.images.disableStaticImages && isWebpack5
           ? [
               {
-                test: /\.(png|svg|jpg|jpeg|gif|webp|ico|bmp)$/i,
+                // Exclude svg if the user defined a custom webpack config
+                // because it might include the `@svgr/webpack` plugin or
+                // the `babel-plugin-inline-react-svg` plugin.
+                test: config.webpack
+                  ? /\.(png|jpg|jpeg|gif|webp|ico|bmp)$/i
+                  : /\.(png|svg|jpg|jpeg|gif|webp|ico|bmp)$/i,
                 loader: 'next-image-loader',
                 issuer: { not: regexLikeCss },
                 dependency: { not: ['url'] },

packages/next/types/global.d.ts

@@ -40,7 +40,12 @@ declare module '*.png' {
 }
 
 declare module '*.svg' {
-  const content: StaticImageData
+  /**
+   * Use `any` to avoid conflicts with
+   * `@svgr/webpack` plugin or
+   * `babel-plugin-inline-react-svg` plugin.
+   */
+  const content: any
 
   export default content
 }

test/integration/image-component/svgo-webpack/next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  webpack(config, options) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    })
+
+    return config
+  },
+}

test/integration/image-component/svgo-webpack/pages/index.tsx

@@ -0,0 +1,5 @@
+import Icon from '../public/test.svg'
+
+export default function Home() {
+  return <Icon />
+}

test/integration/image-component/svgo-webpack/test/index.test.js

@@ -0,0 +1,48 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import {
+  renderViaHTTP,
+  findPort,
+  launchApp,
+  nextBuild,
+  killApp,
+} from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const appDir = join(__dirname, '..')
+let appPort
+let app
+let devOutput
+
+describe('svgo-webpack with Image Component', () => {
+  describe('next build', () => {
+    it('should not fail to build invalid usage of the Image component', async () => {
+      const { stderr, code } = await nextBuild(appDir, [], { stderr: true })
+      expect(stderr).toBeFalsy()
+      expect(code).toBe(0)
+    })
+  })
+
+  describe('next dev', () => {
+    beforeAll(async () => {
+      devOutput = { stdout: '', stderr: '' }
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort, {
+        onStdout: (msg) => {
+          devOutput.stdout += msg
+        },
+        onStderr: (msg) => {
+          devOutput.stderr += msg
+        },
+      })
+    })
+    afterAll(() => killApp(app))
+
+    it('should print error when invalid Image usage', async () => {
+      await renderViaHTTP(appPort, '/', {})
+      expect(devOutput.stderr).toBeFalsy()
+    })
+  })
+})

test/integration/image-component/svgo-webpack/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

test/integration/image-component/typescript/pages/valid.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Image from 'next/image'
 import testTall from '../public/tall.png'
+import svg from '../public/test.svg'
 
 const Page = () => {
   return (
@@ -73,6 +74,7 @@ const Page = () => {
         src={testTall}
         placeholder="blur"
       />
+      <Image id="object-src-with-svg" src={svg} />
       <p id="stubtext">This is valid usage of the Image component</p>
     </div>
   )