[solved]problem build electron with Vite , react | electronjs.org | Page 1

cosmic island Dec 12, 2022, 6:02 AM

#

Hello guys, I have a question about electron build.
I'm using Vite + react + electron now. but in local condition, everything is working well.
But after build, There is an Error that Fail to load resouce (I think this is the reason, and the extension is main.jsx not main.js)
Could anyone help this problem??Hello guys, I have a question about electron build.
I'm using Vite + react + electron now. but in local condition, everything is working well.
But after build, There is an Error that Fail to load resouce (I think this is the reason, and the extension is main.jsx not main.js)
Could anyone help this problem??

fringe beacon Dec 12, 2022, 6:02 AM

#

what does ur dist look like?

cosmic island Dec 12, 2022, 6:03 AM

#

My dist is like that

slate pendant Dec 12, 2022, 6:03 AM

#

And what is the resource that fail to load?

cosmic island Dec 12, 2022, 6:04 AM

#

Main.jsx is the problem i think..

fringe beacon Dec 12, 2022, 6:04 AM

#

it looks like your app code is trying to load a main.jsx

#

where is that declared?

cosmic island Dec 12, 2022, 6:05 AM

#

I didn't touch other config

slate pendant Dec 12, 2022, 6:05 AM

#

try to add extends: null to your build config

#

It prevents electron-builder from using CRA config but I'm not sure you're using CRA here

cosmic island Dec 12, 2022, 6:07 AM

#

thanks for applying!! I'm trying to build now

#

It's same.. fail to load main.jsx

#

why the file extion is jsx? not js

slate pendant Dec 12, 2022, 6:09 AM

#

Good question

fringe beacon Dec 12, 2022, 6:09 AM

#

that sounds like something with your app code

#

do you have a main.jsx file?

cosmic island Dec 12, 2022, 6:10 AM

#

yes

#

but i compile all files using vite

#

So it should be js file right?

slate pendant Dec 12, 2022, 6:11 AM

#

It's a .js in dist

cosmic island Dec 12, 2022, 6:12 AM

#

Yes, but Why they use jsx..

alpine trail Dec 12, 2022, 6:12 AM

#

how your index.html looks like?

cosmic island Dec 12, 2022, 6:12 AM

#

in dist?

alpine trail Dec 12, 2022, 6:13 AM

#

you have index.html in dist?

cosmic island Dec 12, 2022, 6:13 AM

#

yes i have

alpine trail Dec 12, 2022, 6:13 AM

#

and exe files in dist?

cosmic island Dec 12, 2022, 6:14 AM

#

#

yes i have both

#

and all js, css files in assets folder

slate pendant Dec 12, 2022, 6:15 AM

#

Could you try with this in your build conf and see if it works?

extraMetadata: {
  main: "public/main.js"
},

cosmic island Dec 12, 2022, 6:16 AM

#

okay I'm trying now

#

It's same fail..

slate pendant Dec 12, 2022, 6:19 AM

#

hu... weird

#

Oh wait

#

one of your path is wrong

cosmic island Dec 12, 2022, 6:21 AM

#

I have a question, Should i add git repository?

#

where?!!

slate pendant Dec 12, 2022, 6:22 AM

#

when you load the window url

#

in prod

#

the index is in the same folder as main

#

so you should remove ../

cosmic island Dec 12, 2022, 6:22 AM

#

jus 'index.html' right:?

slate pendant Dec 12, 2022, 6:23 AM

#

I think so

#

but I don't know if it will solve the problem

cosmic island Dec 12, 2022, 6:23 AM

#

okay another trying!!

#

not allowed to load local resource

#

maybe path is wrong

slate pendant Dec 12, 2022, 6:27 AM

#

okay... I guess you had the right path

#

but I don't understand

#

oh okay

#

do you bundle your files?

#

with webpack?

cosmic island Dec 12, 2022, 6:30 AM

#

No. I use Vite instead of webpack

slate pendant Dec 12, 2022, 6:31 AM

#

Oops sorry, I didn't realize Vite could replace webpack

cosmic island Dec 12, 2022, 6:32 AM

#

I also not sure.. but they are same purpose I think..

slate pendant Dec 12, 2022, 6:33 AM

#

Okay, but do you have a build folder with vite?

cosmic island Dec 12, 2022, 6:33 AM

#

No just use dist folder

slate pendant Dec 12, 2022, 6:34 AM

#

What does vite build do?

#

hehe

#

it builds in a folder named dist

#

just like electron-builder

#

let's try to change this

cosmic island Dec 12, 2022, 6:36 AM

#

you mean change folder name to build?

slate pendant Dec 12, 2022, 6:36 AM

#

yes

#

and then only pack the build folder with electron-builder using the config:
files: ["./build/**/*"],

#

You will also have to set :

extraMetadata: {
  main: "build/main.js"
},

So your main entry point is the file in the build folder and not in public

#

And you will need to check the path to load your window in prod is correct according to the build folder too

cosmic island Dec 12, 2022, 6:42 AM

#

wait for a minutes.. build error hehe

#

It's not working..

slate pendant Dec 12, 2022, 6:46 AM

#

what error do you have?

cosmic island Dec 12, 2022, 6:47 AM

#

app\build\main.js does not exist

slate pendant Dec 12, 2022, 6:47 AM

#

okay

#

how is your build folder?

cosmic island Dec 12, 2022, 6:48 AM

#

The result of vite build is in build but electron-builder couldn't know..

slate pendant Dec 12, 2022, 6:49 AM

#

electron-builder knows with the config I sent you

cosmic island Dec 12, 2022, 6:49 AM

#

The contents are same with dist folder

slate pendant Dec 12, 2022, 6:49 AM

#

not possible

#

build is for vite

#

dist for electron-builder

#

you should only have your compiled source file in the build folder

cosmic island Dec 12, 2022, 6:50 AM

#

So seperate folder between vite and electron?

slate pendant Dec 12, 2022, 6:51 AM

#

yes of course, if you compile everything in a single folder you will have conflicts

#

that's why you need to change the output folder of vite since it sports the same name as electron-builder's

#

or change electron-builder's output folder name if you prefer

cosmic island Dec 12, 2022, 6:52 AM

#

i did like this, Is it wrong?

slate pendant Dec 12, 2022, 6:53 AM

#

Where do you compile for Vite?

#

remove

"directories": {
  "output": "build"
}

#

if Vite compiles in build then electron-builder should pack in another folder

cosmic island Dec 12, 2022, 6:55 AM

#

default compile option for vite is dist

slate pendant Dec 12, 2022, 6:55 AM

#

Yes

#

so you either need to change Vite's or electron-builder's output folder

cosmic island Dec 12, 2022, 6:55 AM

#

So if i add directories option like that they are using each folder, isn't it??

slate pendant Dec 12, 2022, 6:56 AM

#

err...

cosmic island Dec 12, 2022, 6:57 AM

#

Sorry I didn't know well..

slate pendant Dec 12, 2022, 6:57 AM

#

It's okay

#

Let's try again

#

Vite default build folder is named dist

#

electron-builder default build folder is also named dist

cosmic island Dec 12, 2022, 6:58 AM

#

yes at first

slate pendant Dec 12, 2022, 6:59 AM

#

when you run npm/yarn build, you call both vite build and electron-builder

#

which mean that everything is merged to the dist folder

#

which is bad, because you might get conflicts

cosmic island Dec 12, 2022, 7:00 AM

#

okay i understand

slate pendant Dec 12, 2022, 7:00 AM

#

so, you need to change either the config of Vite OR the config of electron-builder so one of them use another folder than dist

#

once it's done, you want to tell electron-builder to use the file bundled with Vite

#

for that, you will give it the path to main in the output folder of Vite with the option extraMetadata

#

if you don't do that, electron-builder will use the main option of your package.json

#

but the path is public/main.js which is a non-bundled file so you don't want to use that

#

and finally, since Vite does all the nice job to bundle your files, you want electron-builder to only pack these files and not your source files (which are not bundled). So you can use the option files to tell it what folder you want to pack (= the output folder of Vite)

#

Do you understand?

cosmic island Dec 12, 2022, 7:09 AM

#

okay i understand!

#

So i change vite build folder to build, and tell the electron-builder files are build and extraMetadata is build/main.js

slate pendant Dec 12, 2022, 7:11 AM

#

yes

cosmic island Dec 12, 2022, 7:13 AM

#

So should i also add the asset folder to electron-builder option?

#

like this?
"extraMetadata": {
"main": "build/main.js",
"assets": "build/assets"
}

slate pendant Dec 12, 2022, 7:14 AM

#

no

cosmic island Dec 12, 2022, 7:14 AM

#

because there is another error they couldn't load file index.js and index.css

slate pendant Dec 12, 2022, 7:15 AM

#

extraMetadata is an option to override package.json

#

how are your build and dist folders now?

cosmic island Dec 12, 2022, 7:17 AM

#

in the build file there is index.html , main.js, assets folder

slate pendant Dec 12, 2022, 7:18 AM

#

and what path do you use the load index.html in your window?

cosmic island Dec 12, 2022, 7:18 AM

#

file://${path.join(__dirname, '../build/index.html')}

#

I use this one

slate pendant Dec 12, 2022, 7:18 AM

#

wrong path

#

You said main.js is in the same folder as index.html

#

try with file://${path.join(__dirname, 'index.html')}

cosmic island Dec 12, 2022, 7:20 AM

#

okay try again now

#

it's same they couldn't find css and js file

slate pendant Dec 12, 2022, 7:24 AM

#

Can you show the error please?

cosmic island Dec 12, 2022, 7:24 AM

#

folder is this

slate pendant Dec 12, 2022, 7:26 AM

#

Okay, can you check in the network tab what is the path for these files?

cosmic island Dec 12, 2022, 7:28 AM

#

#

Only path is wrong now!

#

should i change ' file://' to ' app://' ?

slate pendant Dec 12, 2022, 7:32 AM

#

what's are the paths in index.html in build?

cosmic island Dec 12, 2022, 7:33 AM

#

don't know.. just use __dirname

slate pendant Dec 12, 2022, 7:34 AM

#

open the file and look

#

in your editor

cosmic island Dec 12, 2022, 7:35 AM

#

what file? index.html??

slate pendant Dec 12, 2022, 7:35 AM

#

yes

cosmic island Dec 12, 2022, 7:35 AM

#

I certain use __dirname why the path is like that?

slate pendant Dec 12, 2022, 7:36 AM

#

These paths are managed by Vite

#

I don't know if it will works but try to add "homepage": "./" in your package json

cosmic island Dec 12, 2022, 7:37 AM

#

I already add that option

slate pendant Dec 12, 2022, 7:38 AM

#

okay

cosmic island Dec 12, 2022, 7:39 AM

#

how about change path to ./index.html ?

#

for relative path

slate pendant Dec 12, 2022, 7:40 AM

#

I guess you can try

#

these script and link tags in the html are added by Vite, right? Not by you?

cosmic island Dec 12, 2022, 7:41 AM

#

yse by VIte

#

ahh same result..

slate pendant Dec 12, 2022, 7:43 AM

#

I feel like we're missing something

#

At least the main and index.html are correctly loaded now

cosmic island Dec 12, 2022, 7:44 AM

#

yes, you are right!

slate pendant Dec 12, 2022, 7:44 AM

#

and you do have the assets folder in dist?

cosmic island Dec 12, 2022, 7:44 AM

#

no i don't have

slate pendant Dec 12, 2022, 7:44 AM

#

Ohhh

#

ah ah

#

But it should be here, since it's in build

#

What do you have in dist?

cosmic island Dec 12, 2022, 7:47 AM

#

in dist i have exe file, win-unpacked folder and two Yaml files

#

in win-unpacked folder there are two folder and some files. in the resource folder i have app folder

#

inside of app there is build folder and that folder is our destination

#

index.html , main.js and assets folder that includes css and js files

slate pendant Dec 12, 2022, 7:50 AM

#

Okay, so the assets folder is here

cosmic island Dec 12, 2022, 7:56 AM

#

I'm trying to set the assetsDirectory in vite option

slate pendant Dec 12, 2022, 7:57 AM

#

I was looking at the base option

#

But I'm really not familiar with vite

#

base: "./"

#

https://vitejs.dev/config/shared-options.html#base

Vite

Next Generation Frontend Tooling

#

https://vitejs.dev/guide/build.html#public-base-path

Vite

Next Generation Frontend Tooling

cosmic island Dec 12, 2022, 8:01 AM

#

My try is wrong.. your solution trying now

#

shit!!!!!!!!! It work!!!!!!!!!!

slate pendant Dec 12, 2022, 8:03 AM

#

Finally!

cosmic island Dec 12, 2022, 8:04 AM

#

Thanks!! my master!!!!!!!

slate pendant Dec 12, 2022, 8:04 AM

#

lol

cosmic island Dec 12, 2022, 8:04 AM

#

Really Thanks!!! without you i couldn't do that!!!

slate pendant Dec 12, 2022, 8:05 AM

#

don't forget to set back homepage to ./ if you changed it because it's used for routing

#

I'm glad I could help

cosmic island Dec 12, 2022, 8:05 AM

#

yes My load!!

slate pendant Dec 12, 2022, 8:05 AM

#

I never checked Vite before so it was interesting

cosmic island Dec 12, 2022, 8:06 AM

#

I don't know who you are, I'll pray for you are always be happy and be nice!!

slate pendant Dec 12, 2022, 8:06 AM

#

Ah ah thank you

cosmic island Dec 12, 2022, 8:07 AM

#

👍

cosmic island Dec 12, 2022, 9:02 AM

#

[solved]problem build electron with Vite , react

fringe beacon Dec 12, 2022, 6:04 PM

#

@cosmic island once you've solved your issue, you can "Close Post" in the discord forum menu

#[solved]problem build electron with Vite , react