chunk load error 해결하기..! - 트러블 슈팅

오늘은 최근에 프로젝트를 진행하면서 마주쳤던 chunk load error를 해결한 과정을 설명해보려고 한다

chunk

chunk란 코드 스플릿팅을 해서 나뉘어진 js 파일 조각? 이라고 생각하면 된다

내가 진행하고 있는 프로젝트는 nextjs를 사용하고 있는데 nextjs는 기본적으로 코드 스플릿팅을 제공한다

chunk load error

chunk load error는 말 그대로 chunk라는것을 load 하다가 생긴 error이다

다양한 이유로 chunk를 load하다가 error가 발생하겠지만

한개의 케이스만 말해보자면 코드 스플릿팅시 따로 설정을 안해주면 chunk 파일 이름은 계속 달라진다

그리고 chunk를 불러올때 캐싱된 chunk 파일 이름으로 불러온다면 없거나 이상한 파일이 가져와져서 

chunk load error가 발생한다

resolve

나는 여러가지 방법을 찾던도중 잘모르겠어서 chatGPT한테 물어봤다 chatGPT의 답변은 webpack에서 빌드할때 파일 이름에  hash 값을 넣어 캐싱되지 않도록 하는것이였다 

아래는 해당 내용의 코드이다

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // Client-side specific settings
    if (!isServer) {
      config.output.filename = '[name].[contenthash].js';
      config.output.chunkFilename = '[name].[contenthash].js';

      config.optimization.splitChunks = {
        chunks: 'all',
        cacheGroups: {
          default: false,
          vendors: false,
          common: {
            name: 'common',
            chunks: 'all',
            minChunks: 2,
            reuseExistingChunk: true,
            enforce: true,
          },
        },
      };
    }
    return config;
  },
};

module.exports = nextConfig;

 

마무리

이번 에러는 다양한 해결 방법이 있어서 해결하기 수월했던것 같고 webpack과 code spliting에 대해 자세히 공부해야 할것 같다고 생각한다