Subject: Help with MIME Type Error During Port Forwarding in Vite React TypeScript Project | Vite Land | Page 1

Hey everyone,
I'm running into an issue with my React TypeScript project using Vite. The project works fine locally, but when I attempt to set up port forwarding, I get the following error:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.
My main file is a .tsx located in the src directory. I've double-checked the file paths and MIME types, but I'm still having trouble. If anyone has experienced this issue or has any tips on how to resolve it, I'd really appreciate your help!
Thanks!

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/assets/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

server.js

const express = require("express");
const path = require("path");
const bodyParser = require("body-parser");
const cors = require("cors");
const shapefilesRouter = require("./routes/shapefiles");
const app = express();
const PORT = process.env.PORT || 3000;
const HOST = process.env.HOST || "0.0.0.0";
app.use(
  cors({
    origin: "*", // 모든 출처 허용 (안전성 고려 필요)
  })
);
app.use(express.static(path.join(__dirname, "../../TASK_1")));
app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "../../TASK_1/index.html"));
});
app.get("/Hellotest", (req, res) => {
  res.send("Hello World!");
});
app.use(bodyParser.json());
app.use("/api/shapefiles", shapefilesRouter);
app.listen(PORT, "0.0.0.0", () => {
  console.log(`Server running at http://${HOST}:${PORT}`);
});

#Subject: Help with MIME Type Error During Port Forwarding in Vite React TypeScript Project