⚠️ 에러

컴포넌트화된 svg 아이콘을 사용하려고 하니 아래와 같은 에러가 발생.

검색해보니 컴포넌트의 이름이 잘못되었거나, import 경로가 잘못되었을 때 발생한다고 한다.

근데 import 정상적으로 했는데..?

svgr/webpack 설치 후 next.config.ts에 아래와 같은 코드를 추가해주어야한다

아래 코드 설정은 webpack에 맞춰진 설정이기때문에 생긴 에러라는 것을 알게됐다.

기존 웹팩과는 달리 파일로드하는 방법이 변경되어서 발생하는 문제라고 한다.

 webpack(config) {
    config.module.rules.push({
      // 웹팩설정에 로더 추가함
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
      },
      use: ["@svgr/webpack"],
    });

    return config;
  },

💡 해결

"turbopack svgr" 이라고 검색하니 나와 같은 오류를 맞닥드린 이들이 많았다.. 나의 구세주

아직 turbo은 svgr을 아직 정식적으로 지원하지않는다고 한다.

next.config.ts에 아래와 같은 코드를 추가해주면 정상적으로 사용할 수 있다.

  // turbopack에서 svgr 사용방법 - 추가코드
  experimental: {
    turbo: {
      rules: {
        "*.svg": {
          loaders: ["@svgr/webpack"],
          as: "*.js",
        },
      },
    },
  },