[Next.js] Turbopack에서 SVG 관련 Element type is invalid: expected a string 에러 해결

📖 들어가며

Next.js 13 버전 이후에는 Rust 언어로 개발된 Turbopack이 도입되었습니다.

터보팩 성능

Next 14 버전으로 마이그레이션을 진행하고 Turbopack으로 개발 환경을 실행했을 때 맞이한 문제에 대해서 정리해보려 합니다.

문제 발생 ❗

Turbopack으로 개발 환경을 실행하자 아래와 같이 오류가 발생했습니다.

Element type is invalid: expected a string

 

이 오류에 대해 검색해 보니 "컴포넌트의 이름이 잘못되었거나, import 경로가 잘못 입력되었을 때 발생한다"는 설명을 찾을 수 있었습니다.

이에 따라 import 된 부분을 잘 확인해 보라는 조언이 있었습니다.

그러나, 제 코드에서는 import가 정상적으로 이루어졌기 때문에 수정할 부분이 없었습니다.

 

따라서 에러 메시지를 다시 확인해 본 결과 'DarkModeBtn' 컴포넌트에서 발생했음을 알 수 있었습니다.

이에 따라 DarkModeBtn이 import 된 부분을 주석 처리해 보았고, 이로 인해 에러가 사라졌음을 확인할 수 있었습니다.

더 자세히 살펴본 결과, DarkModeBtn 컴포넌트에서 svg를 사용하고 있었고, Next.js에서 svg를 사용하기 위해 추가 설정을 했었습니다.

 

이때 '@svgr/webpack'을 사용하여 svg를 표현하고 있었고, '@svgr/webpack'에 대한 설정도 next.config.js에서 아래와 같이 추가해 뒀었습니다.

webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },

이러한 설정은 webpack에 맞춰진 것이었기에, Turbopack을 사용하면서 오류가 발생했다고 추정하게 되었습니다.

문제 해결 ✅

이 문제에 대한 해결책을 찾아보던 중, 다행히도 next.js와 turbo의 github에서 동일한 이슈를 겪고 있는 사람들의 글을 발견할 수 있었습니다.

https://github.com/vercel/turbo/issues/4832

[turbopack] SVG via svgr support · Issue #4832 · vercel/turbo

https://github.com/vercel/next.js/issues/48140

App fails to build with Turbopack loader · Issue #48140 · vercel/next.js

위 이슈들을 참조하여 현재 프로젝트의 next.config.js에 아래와 같은 코드를 추가하였습니다.

 

module.exports = {
  // output: 'export',
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
  compiler: {
    // ssr and displayName are configured by default
    styledComponents: true,
  },
  // 추가된 부분
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
};

이렇게 Turbopack을 위한 추가 설정을 해주었습니다.

 

next dev --turbo로 개발 환경을 실행하니 오류가 사라졌습니다.

얻은 점📕

Next.js 13 버전 이후에 발생하는 문제들에 대해 참고 자료가 많지 않아, 주로 Github 이슈나 공식 문서를 참고하게 되었습니다.

이런 습관이 기르게 되는 유익한 경험인 것 같습니다.