I’m trying to deploy a website I made (React app created with Vite, Typescript) using Netlify CLI but after it deploys and I check the URL the app doesn’t load and it just says Module from ‘…main.tsx’ was blocked because of a disallowed MIME type (“application/octet-stream”).
What should the type of this script tag in the html page be then?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href=".">
<link rel="shortcut icon" href="#">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Anta&family=Assistant:wght@400;600&family=BIZ+UDPMincho&family=Black+Han+Sans&family=Dela+Gothic+One&family=East+Sea+Dokdo&family=Hina+Mincho&family=Jua&family=Klee+One&family=Luckiest+Guy&family=Nanum+Brush+Script&family=Nanum+Gothic&family=Nanum+Gothic+Coding:wght@400;700&family=Qwigley&family=Rammetto+One&family=Reggae+One&family=Roboto:wght@300&family=RocknRoll+One&family=Rowdies&family=Rubik+Glitch&family=Rubik+Marker+Hatch&family=Source+Code+Pro:wght@200;400;600;900&family=Squada+One&family=Teko:[email protected]&display=swap"
rel="stylesheet">
<title>Manga Shop</title>
</head>
<body>
<div id="root"></div>
<script type="module" src='/src/main.tsx'></script>
</body>
</html>
I tried changing the type to ‘text/javascript’ and it didn’t work either. I tried to delete the type altogether and still didn’t work.
The issue arises because you’re trying to load a .tsx file using type=”module”. However, browsers only understand JavaScript, not TypeScript, so you need to compile the TypeScript file into JavaScript before serving it.
Since your React app was created with Vite, make sure to build the project before deploying.
To build the app, run:
npm run build
# or
yarn build
Vite will generate an index.html file in the dist folder, with the appropriate script tags pointing to the compiled JavaScript files.
The script tag will look something like this:
<script type="module" src="/assets/main.[hash].js"></script>
0