[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. 에러 해결 방법

 

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.

 

vite에서 배포하고 /details/1, /edit/1 이런 :id를 받는 곳에서 새로고침을 하거나 새 탭으로 접속할 때 흰 화면이 나오면서 해당 에러가 나왔었다.

 

그래서 vercel 배포 문제인줄 알고 netlify로 바꾸기도 했었지만 그대로이길래 구글링을 통해서 해결방법을 찾았어요.

 

 

기존에는 base가 '.' 으로 되어있었는데 '/'으로 고치고 난 뒤 접속이 잘 되었습니다. 기본 값이 '/'라고 하니 오히려 아무것도 설정하지 않았으면 문제를 겪지 않았을텐데 아쉽네요 ㅎㅎ

 

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

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    base: "/",
    define: {
      "process.env.VITE_DB_URL": JSON.stringify(env.VITE_DB_URL),
    },
    plugins: [react()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
  };
});