This should be inside the webpack config

[lapis temple]

how would that look in my case 😕

[wise sequoia]

so the purpose of this function is to take a next config and put this webpack thing right?

[lapis temple]

yep

[wise sequoia]

function defineNextConfig(nextConfig) {
  nextConfig.webpack = (config,options) => {
    const webpack = nextConfig.webpack
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    })
    // Preserve custom webpack config
    return typeof webpack ==="function" ? webpack(config,options) : config
  };
  return nextConfig;
}

[lapis temple]

That way I get this error

error - Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
ReferenceError: config is not defined

Running npm run dev

[wise sequoia]

oops

yeah I messed up the names

I think I should work now try the edited version

[lapis temple]

Get this now

info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
ReferenceError: webpack is not defined

Doing this it runs but not sure if that is correct

function defineNextConfig(config) {
  config.webpack = (config, options) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    })
    // Preserve custom webpack config
    return typeof config.webpack === "function" ? webpack(config, options) : config
  };
  return config;
}

[wise sequoia]

ok I messed up again

I didn't put the nextConfig.webpack part

try now

@lapis temple does it work now?

[lapis temple]

Tried it getting this now 😄

info  - Loaded env from /Users/utdev/code/invoicer.so/.env
info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
RangeError: Maximum call stack size exceeded

[wise sequoia]

oh shit, infinite recursion

how?

oh nvm I found it

[lapis temple]

[wise sequoia]

ok it should be good now

hopefully

[lapis temple]

😄 same error

[wise sequoia]

I messed up the scope

function defineNextConfig(nextConfig) {
  const webpack = nextConfig.webpack
  nextConfig.webpack = (config,options) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    })
    // Preserve custom webpack config
    return typeof webpack ==="function" ? webpack(config,options) : config
  };
  return nextConfig;
}

ok now it should be good

[lapis temple]

seems to work now, but not sure why I can't import the svg in next 😄

Failed to compile
./src/pages/login.tsx:7:0
Module not found: Can't resolve '/vector/default.svg'
   5 | import AuthLayout from "../layouts/auth-layout";
   6 | import Image from "next/image";
>  7 | import Logo from "/vector/default.svg";
   8 | 
   9 | export default function Login() {
  10 |   const router = useRouter();

Should not be related to this I think

Thanks alot btw

[wise sequoia]

nah it seems that the loader isn't getting pushed or something

[lapis temple]

not even sure if it is worth it to use svgr instead of loading the svg to the Image component

[wise sequoia]

well honestly you should do svgr the normal way and then make something like this

[lapis temple]

have to do this config stuff to use it in next

but not sure why the loader is fucked

[wise sequoia]

I will try to debug it

but for me the normal way always work

[lapis temple]

what is the normal way?

you just install svgr and it works on your side?

[wise sequoia]

https://react-svgr.com/docs/next/

[lapis temple]

oh you use that one

going to trry that out

[wise sequoia]

@lapis temple idk for you but for me the function I just made just works

[wise sequoia]

are you sure the path is correct?

maybe you meant ./vector/default.svg

@lapis temple ?

[lapis temple]

hmm strange, same error I put the .svg file now into public and updated the path just to be sure

./src/pages/login.tsx:7:0
Module not found: Can't resolve './default.svg'
   5 | import AuthLayout from "../layouts/auth-layout";
   6 | import Image from "next/image";
>  7 | import Logo from "./default.svg";

[wise sequoia]

this doesn't point to public though

the path at least

[lapis temple]

Same with this

| import Logo from "/default.svg";

it does default search inside public or not?

omg

this worked

import Logo from "../../public/default.svg";

[wise sequoia]

no it doesn't afaik

at least by default

you could make it do that

[lapis temple]

yeah going to add an alias probably

but thanks alot !

[wise sequoia]

also I should point out that I don't really recommend the function approach

The only way I would use that is if I was making a next.js plugin

[lapis temple]

I started this side project using this repo https://github.com/t3-oss/create-t3-app they are using it like that, so I just thought I stick with that

[wise sequoia]

that's my opinion and I don't why they are doing that

if theo did that just for the types it is kinda stupid

I just like simple things

And not using the function seems as simple and explicit as possible