[Error] (react-vite) failed to load module script: expected a javascript module script but the server responded with a mime type of "text/html". strict mime type checking is enforced for module scripts per html spec.

ec2에서 react-vite 프로젝트 git pull 을 받고 빌드하여 실행 시켰는데

 

흰 화면에 아래와 같은 에러가 발생!

 

 

 

빌드 후 실행 시, 에러

 

stackoverflow 에서 찾아봐도 vite.config.ts 에서는 죄다 base 수정하라 이런 얘기 뿐이었다.

 

 

vite.config.ts 에서도 확인 했다.

• base: “/”
• build 에서 outDir: “dist”

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  base: "/",

  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@public": path.resolve(__dirname, "./public"),
    },
  },
  build: {
    chunkSizeWarningLimit: 3000, // 임계값을 3000kB로 증가
    outDir: "dist", // 빌드 디렉토리
  },
});

 

 

 

 

하지만 계속 같은 에러가 생겨서,

ec2의 nginx.conf 파일에 문제가 있다고 판단 했다.

 

 

 

결국은 nginx.conf 파일에서

→ try_files $uri /index.html;  이 부분이 문제였다.

location / {

            proxy_pass <http://127.0.0.1:4173>; # Vite preview 포트
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;

            try_files $uri /index.html; # << 삭제
            }

 

 

location / {

            proxy_pass <http://127.0.0.1:4173>; # Vite preview 포트
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
            }

 

 

 

 

지금 하는 방식은 ec2 로컬에서 preview 로 react-vite 프로젝트를 실행시켜 nginx로 proxy 요청을 설정하는 것인데

 

 

`nohup npm run preview > preview.log 2>&1 &disown` 로 실행시킨 게 적용이 안된 것 같다.

 

nginx.conf 파일에선

index.html 으로 처리하는거 같아서 생긴 문제인 것 같다.

 

 

 

 

🛠해결🛠

 

vite.config.ts 에서도 혹시 모르니 잘 살펴보자!!