[React+TypeScript+VITE] npm run build 에러 (maximumFileSizeToCacheInBytes)

kakao.map에서 사용하는 폴리콘 동코드 JSON 파일의 용량이 7MB였다.
그 후 빌드하는 중에 뜨는 에러 (젠킨스에서도 발견)

Configure "workbox.maximumFileSizeToCacheInBytes" to change the limit: the default value is 2 MiB.
#8 39.44   Check https://vite-pwa-org.netlify.app/guide/faq.html#missing-assets-from-sw-precache-manifest for more information.
#8 39.44   Assets exceeding the limit:
#8 39.44   - assets/index-DS9iX2Vl.js is 6.95 MB, and won't be precached.
#8 39.44 
#8 39.44     at logWorkboxResult (file:///app/node_modules/vite-plugin-pwa/dist/chunk-5JSAQONO.js:44:13)
#8 39.44     at generateServiceWorker (file:///app/node_modules/vite-plugin-pwa/dist/index.js:353:3)
#8 39.44     at async _generateSW (file:///app/node_modules/vite-plugin-pwa/dist/index.js:486:5)
#8 39.44     at async Object.handler (file:///app/node_modules/vite-plugin-pwa/dist/index.js:644:13)
#8 39.44     at async PluginDriver.hookParallel (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:19858:17)
#8 39.44     at async Object.close (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:20792:13)
#8 39.44     at async build (file:///app/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:65409:17)
#8 39.44     at async CAC.<anonymous> (file:///app/node_modules/vite/dist/node/cli.js:828:5)
#8 ERROR: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

2MiB보다 용량이 더 커서 안 된다는 에러이다.

이를 해결하기 위해서 Vite.config 파일에서 파일 용량을 늘려주어야 한다. 왜냐하면 디폴트 용량으로 2MiB가 걸려있기 때문이다.

import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      workbox: {
        maximumFileSizeToCacheInBytes: 7000000, // 7MB로 설정 (필요한 크기에 맞게 조절)
      },
    }),
  ],
});

로컬에서 빌드 에러 확인 시 발생한 문제

npm run build할 때마다 나는 에러가 있어서 build가 잘 되는지를 확인할 수가 없었다. 해당 에러가 떠도 자동배포 시에는 잘 빌드가 되어서 상관 없다고 생각하고 넘겼었는데, 자꾸 확인을 안 해보니까 push하고 확인하는 과정이 너무 번거롭게 느껴져서 알아보게 되었다.

타입스크립트 설정 확인

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "dist"]
}

tsconfig.ts에서 include와 exclude 설정을 확인하여 ts와 tsx 설정이 잘 되어있는지, node_modules, dist 파일이 잘 되어있는지 확인한다. (dist는 build할 때 생성되는 폴더이다.)

타입 에러가 무시되어야 하는 상황이라면?

// @ts-ignore

무시되어야 하는 파일에 annotation을 추가하여 무시시켜준다.

라이브러리에서 types 설정에서 충돌

라이브러리에서 type 정의 파일이 제대로 설치되지 않아서 발생하는 문제일 수도 있다. 그러면 node_modules에 있는 라이브러리의 types 폴더를 재설치하는 방법이 있다.

npm install --save-dev @types/react @types/react-dom

그러나 이거말고, 더 확실하게 하기 위해서 node_modules 폴더를 없애고 다시 npm install를 하고 npm run build를 하니 빌드 에러가 뜨지 않았다!