문제 상황을 알려주세요!

문제가 된 코드

// src/vite-config.ts
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{js,css,html,png,svg,ico,json}'],
        cleanupOutdatedCaches: true,
      },
      filename: 'service-worker.js', // public/service-worker.js를 등록
    }),
  ],
});

에러 상황

• service-worker 파일을 public에 넣었을 때: ESM 문법 오류 발생

Uncaught SyntaxError: Cannot use import statement outside a module (at service-worker.js:1:1)

• service-worker.js를 src에 넣었을 때: public에서 service-worker를 찾으려고 해서 빌드 오류 발생

error during build:
Could not resolve entry module "public/service-worker.js".
at getRollupError (file:///Users/son-youngjin/Development/softeer/Team6-DuBu/frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
at error (file:///Users/son-youngjin/Development/softeer/Team6-DuBu/frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:392:42)
at ModuleLoader.loadEntryModule (file:///Users/son-youngjin/Development/softeer/Team6-DuBu/frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:20237:20)
at async Promise.all (index 0)
 ELIFECYCLE  Command failed with exit code 1.

문제 원인이 무엇인가요?

Vite에서 vite-plugin-pwa를 사용할 경우, 서비스 워커 파일을 public이 아니라 src에 둬야 합니다.

🚨 이유 1: public 폴더의 파일은 번들링되지 않음

• Vite는 public 폴더의 파일을 그대로 dist로 복사하지만, ESM(ES Module) 문법이 적용되지 않음.
• 따라서 public/service-worker.js에서 import를 사용하면 Uncaught SyntaxError: Cannot use import statement outside a module 오류 발생.

🚨 이유 2: vite-plugin-pwa는 srcDir 을 설정하지 않으면 해당 파일을 public 내에서 찾음

• vite-plugin-pwa는 기본적으로 public/${filename} 을 감지하고, 빌드시 자동으로 dist/${filename}로 번들링하여 배포함.
• 즉 서비스 워커를 src 에 뒀다면, srcDir을 명시적으로 설정해줘야함.

해결