I am trying to learn something new here. I am working on client app which uses Electron + react.
I used this github repo to start my project https://github.com/electron-vite/electron-vite-react
And since i am not ready yet to learn typescript, I added //@ts-nocheck to most of my .tsx files in order to avoid ts warnings/errors till i become ready to learn TS.
My problem that I can not bundle my app to share with others.
in package.json :-
"scripts": {
"dev": "vite",
"build": "tsc && vite build && electron-builder",
"preview": "vite preview",
"pree2e": "vite build --mode=test",
"e2e": "playwright test"
},
in my first landing electron window = electron/windows/win_landing.ts
I am loading the index.html
mainWindow.loadURL(indexHtml, { hash: arg })
Then i run npm run build
whenever i try to launch the bundeled app which generated under dist/, i get
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
index.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<title>Orion</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/main.tsx" ></script>
</body>
</html>
This error never show up when i use mainWindow.loadURL('http://localhost:5173/app/landing') in my win_landing.
I tried to change <script type="module" src="./src/main.tsx" ></script> in my index.html file to main.js, I receive this error
caught TypeError: Failed to resolve module specifier "react/jsx-runtime". Relative references must start with either "/", "./", or "../".
I tried to change the name of my main react js script to index.js instead of index.tsx, also tried to change to .mjs.
Also tried to add mimeTypes: { 'ts': 'application/javascript', 'tsx': 'application/javascript', }
to vite.config.ts
If you could help me to figure out what i am missing to build my app correctly i will be grateful.
Here is my github repo if you want to give a deeper look
