I'm using @svgr/webpack

Further investigation:

I found out that importing SVG indeed return object

My config:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      rules: {
        "*.svg": {
          loaders: ["@svgr/webpack"],
          as: "*.js",
        }
      }
    }
  }
};

export default nextConfig;

## Note
This works in Development mode

It only occur when building in production

# SOLUTION

Use this method (creating a IconSvg component)

Reference: https://discord.com/channels/752553802359505017/752647196419031042/1335631895257546864

Thank you @Arinji

🙏 🙏 🙏

Yo wth? Lmao that's fucking awesome

No worries, mark this as the solution

I came across the same issue. That's because turbo is used only for dev. I fixed the issue by just adding webpack config alongside turbo. Now it works fine with .svg files and for both dev and prod

Really? Interesting, shouldn't you get error like "You are using webpack while using turbo at same time"? I don't really remember but it happens when I do that.

Looks like I guess it's pretty much in beta?

No error, i'm running dev with --turbopack flag. Afaik it should just ignore webpack config when using the flag.

I just saw this post. Can you show me your webpack config?

Nah now I got an error when running npm start:

 Error: Expected to use Webpack bindings (react-server-dom-webpack/server.edge) for React but the current process is referencing '__esModule' from 
the Turbopack bindings (react-server-dom-turbopack/server.edge). This is likely a bug in our integration of the Next.js server runtime.

  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            dimensions: false,
          },
        },
      ],
    });

    return config;
  },

  experimental: {
    mdxRs: true,
    turbo: {
      rules: {
        "*.svg": {
          loaders: [
            {
              loader: "@svgr/webpack",
              options: {
                dimensions: false,
              },
            },
          ],
          as: "*.js",
        },
      },
    },
  },

Pretty much that's all

Do you use any build flags?

No, i do use "output: standalone" in next config but that's all. I'm on "next": "15.1.7"

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            svgoConfig: require("./svgo.config.js"),
          },
        },
      ],
    });

    return config;
  },
  experimental: {
    turbo: {
      rules: {
        "*.svg": {
          loaders: ["@svgr/webpack"],
          as: "*.ts",
          options: require("./svgo.config.js"),
        },
      },
    },
  },
};

export default nextConfig;

That is my config rn. Is there a problem?

minor differences but i doubt it's related to the error you're getting.

"*.svg": {
          loaders: ["@svgr/webpack"],
          as: "*.ts",
          options: require("./svgo.config.js"),
        },

Putting options like so didn't work for me, i had to do

"*.svg": {
          loaders: [{loader: "@svgr/webpack", options: require("./svgo.config.js")}],
          as: "*.ts",,
        },

But it does not seem like it's part of the issue you're having

I used standalone output and now it is working?

Hm I guess that was it.

Thank you very much! You saved me many many hours haha

Now I get the error "next start" does not work with "output: standalone" configuration. Use "node .next/standalone/server.js" instead.

But when I use this my axios requests wont work? And when I use npm start everything seems fine? (besides the error) @Pont-Audemer Spaniel

I think it has something to do with the .env?

I don't think using output: standalone is a correct solution if you don't actually want to do that. For example if you're deplyoing to vercel you shouldn't use that option, my guess is that it won't work.

Tbh i'm not sue why would this fix the issue you're having, but to me it does not look like a proper way to handle the issue. But i'm not sure what is the proper solution tho 😄

I might play around with this after work

Okay maybe it isnt fixed then. 😦 I want to deploy it on a hetzner vps but idk if its a problem. When I cut off output: standalone I get the error back.

Hey, i just tested it without standalone and still everything works fine on my side. turbopack on dev and webpack on prod

GET http://localhost/_next/static/chunks/app/user/swipe/page-21d05fe6ac66c7ff.js net::ERR_ABORTED 404 (Not Found) is the error I get when using the node server.js. I use axios in this file.

I tested cutting of the .env but even when going to my home "/" with nox axios reuqests I get errors like this.

I removed standalone and now it builds fine. I dont know. But it is good enough for me I guess.