SVG not loading in Next.js version 14.0.4

[ecatugy]

🐛 Bug Report

It stopped working in NextJS version 14.0.4; is there any configuration example? It worked perfectly in version 13.4.19, but now it's not working. I've already followed the official documentation, but it didn't help

To Reproduce

Upgrading Next from version 13.4.19 to 14.0.4.

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = {
  ...nextConfig,
  images: {
    dangerouslyAllowSVG: true,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
  webpack(config) {
    config.module.rules.push({
      loader: '@svgr/webpack',
      options: {
        prettier: false,
        svgo: true,
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: { removeViewBox: false },
              },
            },
          ],
        },
        titleProp: true,
      },
      test: /\.svg$/,
    });

    return config;
  },
};

Expected behavior

Load the SVG

Result

Module not found: Can't resolve 'src/styles/svg/image/any-doubt.svg'

[thekoenekamp]

+1

[KhaledAshraf2]

same here, any updates or other approaches to load SVG in next v14 ?

[giovannidias1]

same here, but my error only occurs with ?url in build

[abbasKareem]

this work for me I am using next:14.1.0

const nextConfig = {
    webpack(config) {
        // Grab the existing rule that handles SVG imports
        const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.(".svg"));

        config.module.rules.push(
            // Reapply the existing rule, but only for svg imports ending in ?url
            {
                ...fileLoaderRule,
                test: /\.svg$/i,
                resourceQuery: /url/, // *.svg?url
            },
            // Convert all other *.svg imports to React components
            {
                test: /\.svg$/i,
                issuer: fileLoaderRule.issuer,
                resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
                use: ["@svgr/webpack"],
            },
        );

        // Modify the file loader rule to ignore *.svg, since we have it handled now.
        fileLoaderRule.exclude = /\.svg$/i;

        return config;
    },

    // ...other config
};
export default nextConfig;

and your .eslintrc.json should look like this:

{
    "extends": ["next/babel", "next/core-web-vitals"]
}