next13으로 개발하면서 마주친 트러블 슈팅 모음

개요

현재 Next13으로 개발중이다. 개발하면서 생겼던 문제들에 대해 간단히 작성할 예정이다.

(생길때마다 계속 추가될 예정)

svg import시 컴파일 에러

기존 next.config.js 에는 아래와 같이 작성해둔 상황이였다.

/** @type {import('next').NextConfig} */

const withPWA = require('next-pwa')({
  customWorkerDir: 'src/worker',
  dest: 'public',
});

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack(config) {
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.('.svg'),
    );

    config.module.rules.push(
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/,
      },
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        resourceQuery: { not: /url/ },
        use: ['@svgr/webpack'],
      },
    );
    fileLoaderRule.exclude = /\.svg$/i;
    return config;
  },
  compiler: {
    removeConsole: process.env.NODE_ENV !== 'development',
  },
};

module.exports = withPWA(nextConfig);

컴포넌트에서 import하는 *.svg에 대해 convert해주는 코드이다. 현재 관련 공식문서에도 위와 같은 예시 코드가 있는 상황이다. 하지만 아래와 같은 컴파일 에러가 발생했다.

관련 이슈를 찾던 중 이 글을 참고하여 nextConfig쪽 부분을 아래와 같이 수정하여 해결하였다.

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack(config) {
    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'],
      },
    );

    fileLoaderRule.exclude = /\.svg$/i;
    return config;
  },
  compiler: {
    removeConsole: process.env.NODE_ENV !== 'development',
  },
};