hidden pollen
I'm using Electron with Typescript and Webpack according to an example project I found and my problem is that it's not packing anything but my main typescript file. All other files including the css and fonts etc aren't being found by the electron window. The typescript files cause the error in the title and the other files cause javascript console missing errors. The main.ts file is the only file of mine in the contents of my .webpack/renderer/main_window/index.js.
Plz help?
nova gazelle
what command do you use to pack?
hidden pollen
Npm run start
nova gazelle
I am not sure this solves your problem but first thing I noticed is you are using electron forge
(your package.json scipts section has this for the npm run start - "start": "electron-forge start")
So I started to look at your forge config files and saw you do not reference your preload.ts but rather a preload.js*
can you try changing that and run npm start again and see what happens?
hidden pollen
Ah good eye. Why doesn’t that error
nova gazelle
also, for reference, when you want to actually package your application you need to run a different command to npm start
I think this should work for windows (its what I am using so far):
npm run make -- --arch="x64"
hidden pollen
Give me a few hours I have to wait until I get home. But I agree it probably doesn’t solve the problem.
Yes I know
nova gazelle
Okay, give it a try when you are home and check that it still fails. At least we can check that off and move on to looking for the next problem if it doesnt resolve the issue!
hidden pollen
ok it now says .ts, but as we expected the problem persists
nova gazelle
so I noticed more issues with your forge.config.ts
your index.htm should be index.html
and
I think underneath that you should have renderer.ts not main.ts
you can just try to replace your forge.config.ts with this one and let me know if you get same error
hidden pollen
Hi, thank you for continuing to help.
It’s htm and not html because the file is an htm file not an html file. Is that a problem?
pallid crypt
No stacktrace?
hidden pollen
No. Just module not found
hidden pollen
no, i'm using npm run start in this case. the npm run build use case is working fine
one moment, getting you a screenshot
hidden pollen
Yes I am, but I have been unable to understand the difference between the template and my configuration
hidden pollen
That is quite a bit of work for a project my size sir, I was hoping that someone with knowledge of electron forge webpack plugin can help me understand how it works.
pallid crypt
We can't fix it without source code of your project
If you import forge into existed project be ready to fix errors
Even for code refactor
hidden pollen
Yes sir that is what I would like to do, fix this error. It appears that webpack is simply not including any files past my main.TS into its pack. I would like to figure out which section of the confit controls that
I am somewhat confused because I though webpack was supposed to automatically detect and pack all dependencies
nova gazelle
your index.htm should be index.html
and
I think underneath that you should have ...
I already pointed out in this msg that you should have renderer here rather than main.
Did you try using the forge config file I supplied are running the command again?
(note that you will need to adjust html filename to htm if thats what you are using)
hidden pollen
main.ts is my file, it is not an electron main file it is my app. It loads all of the other files in my app which render the page
hidden pollen
And again, my index file is named index.htm not html, I changed that entry to say htm to fix a “index.html not found” error
Sure
and here's my index.htm file 🙂
pallid crypt
Show your project structure
hidden pollen
pallid crypt
Why your main.ts file import js files?
nova gazelle
in his screenshot
pallid crypt
There is nothing about preload
hidden pollen
yes. unfortunately, whether i put preload.js or preload.ts these issues still occur
nova gazelle
hidden pollen
oh yes, making it preload.js removes the error that refers to preload.ts. so looks like it should be preload.js
hidden pollen
nova gazelle
import gameState.ts
hidden pollen
typescript makes you import .js files, if you import .ts files then typescript can't find them
pallid crypt
You don't have js files
hidden pollen
but check this out
hidden pollen
hidden pollen
yes exactly
hidden pollen
nova gazelle
you need to import GamesStateSaved from './gameState'
try it like that
the curly braces notation should be fine for multiple imports but just try the one for now and see if it clear the error / change the rror
hidden pollen
ok yes! that allows it to work for both. we are getting somewhere
nova gazelle
so you need to fix all the imports
hidden pollen
omitting the .js
yup. that is excellent thank you. but we still have the javascript console errors in red i think
nova gazelle
I think they might be stacked import errors
the way that I prefer to work is fix this error then see what errors remain afterwards
or we may try to solve something that is a chain reaction / side effect
hidden pollen
ok. one moment please
Nice! One gigantic find/replace later
this explains why webpack wasn't packing up my other source files. it was looking for .js files but they are .ts files
i believe the "refused to apply because of mime type" error means that the file is not found and it is confusing that with it having a text/html mime type
along with that it has not packed the jquery and for some reason can't find main.js
nova gazelle
the path to style.css does not appear to be a relative path
I think you would need something more like
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
but pointing to whereever you style.css file is
I could not see that in the directory structure you screen clipped earlier in the chat
hidden pollen
it's in src
hidden pollen
no luck there. i also tried src/style.css since that's where the file is. in the template they do in javascript "import './index.css';" but that has not worked either
nova gazelle
you tried "import './index.css';" or "import './style.css';"?
hidden pollen
yes, that. of course
nova gazelle
okay just checking
hidden pollen
it's likely that this is a similar problem where webpack can't find the file being referred to by the index file and so is not packing it
nova gazelle
it does seems like the inline reference should work in your case though
add a type to your inline style
type="text/css"
<link rel="stylesheet" type="text/css" href="./style.css">
and lets see if it still complains about the MIME type
hidden pollen
no 😦 yea i believe the problem isn't the wrong mime type but rather the file isn't being packed
nova gazelle
yeah I think so too but wanted to check
I had a similar issue to this and @pallid crypt helped me
I have been reading about webpack to understand better but you will probably need his help to resolve this one since my understanding is not complete.
My best guess for what you have to do next is to move style imports into your main.ts file (which we convetionallty called renderer.ts) and then it SHOULD be getting packaged...
My understanding of the way it works is more less as such;
Webpack will transpile all these files into few js files and a single index.html in your dist folder (but I cannot find MY index.html file & cannot install html-webpack-plugin in electron forge config...)
Then the styling should be included in a style block in the index.html file in the dist folder
but I am stuck around a similar point, which is that I do not see the index.html file generated in my dist folder & I believe the HtmlWebpackPlugin is not used with electron and so I am struggling to debug my navigation
pallid crypt
its cant not be
forge with webpack template already have needed dependencies
its just hard to make multi page application with forge
and electron
nova gazelle
well for my question, I should move it into my own thread - sorry about that but thanks for answering
what I do wonder, in the webpack docs it says there should be an index.html file in my dist folder
but I dont get that generated & dont see like index.js created the html either
hidden pollen
actually get this, my webpack does contain a style.css
i have a single page application
nova gazelle
that screenshot is the file from your dist folder?
pallid crypt
remove styles and scritps from html file
all of them
dist files from forge and webpack are in .webpack folder
hidden pollen
yes it is
if i remove styles and scripts from html then how do i use them in non-electron builds? web builds
nova gazelle
@pallid crypt , it does say in the webpack documentation that it can transpile inlinestyle i think, i dont question that Jorge should move his styling to the ts file but what I dont understand is why is does not work from inline style within electron
hidden pollen
oh hmm. i'm trying to avoid that since debugging transpiled files is somewhat harder
pallid crypt
becase webpack in electron configured for file protocol
nova gazelle
okay! good to know
pallid crypt
to split it to separate css files you need other modules
nova gazelle
so he just needs to add css loader
and it should work with inline styles?
I think css-loader does take inline styles from reading the docs
I think @hidden pollen if you add this to your webpack.rules.ts and
npm i --save-dev css-loader and style-loader it should actually take the inline styles BUT you should also remove inline styles etc and move them to the .ts files as Timosh requested to follow best practises
{
test: /.css$/,
use: [
"style-loader",
"css-loader"
]
},
Timosh has not confirmed but I get the sense that is because he is trying to force you into best practices! A sign of a good teacher for sure
hidden pollen
haha best practices are good
i already don't have any inline css so that's good
my webpack.renderer.config.ts already has this
rules.push({
test: /.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});
looks like the same thing?
it's definitely doing something because if i remove it i get
pallid crypt
possible
but pointless
i am not using webpack and typescript
thats why i am not helping with it
only electron related questions
hidden pollen
ah. i may be in the wrong place. i posted here because i am using the electron forge webpack plugin, which my understanding is created by the electron forge team
hidden pollen
i see. it's because of webpack?
hidden pollen
Nice! One gigantic find/replace later
these issues. looks like anything referenced from the index html file is not found by electron
pallid crypt
no
issue is you dont know how webpack work
you used configured template for webpack
without knowledge how it is working
for example usage of dev server
you dont have files on that paths
thats why you getting 400 error
hidden pollen
what do you mean, usage of dev server
pallid crypt
no
hidden pollen
i figured electron opened its own port and served content to its embedded browser that way
pallid crypt
its webpack
hidden pollen
i see
