jade token
I've got a project that is using ElectronForge v6.0.3 with TypeScript and WebPack, I'm loading a native npm, module leveldb-zlib I've got it to work when running electron-forge start but when I run electron-forge make it throws the following error on windows 10 x64 any help would be amazing!
frail lodge
I've got a project that is using ElectronForge `v6.0.3` with TypeScript and WebP...
Probably the node modules are not getting installed after package. I had to manually write some stuff to do this but im still testing/learning forge so im probably doing it wrong
jade token
@frail lodge take at look in the electron-forge channel, that is how i got it to work, I'm curious if you did the same as me? 🙂
frail lodge
<@456226577798135808> take at look in the electron-forge channel, that is how i ...
Yeah thats essentially what i found on a github comment somewhere lol. Thanks for sharing
jade token
@frail lodge how slow is your builds? mine are taking a long ass time lol
frail lodge
<@456226577798135808> how slow is your builds? mine are taking a long ass time l...
Yeah dont think were supposed to install of the node modules only the native ones and currently it installs everything from package json with that code
jade token
hmm i guess we could have a whitelist?
maybe read the webpack config for externals
then add those only
I'll make that change and report back xD
acoustic blaze
<@456226577798135808> how slow is your builds? mine are taking a long ass time l...
try npm install --production
acoustic blaze
disclaimer: I'm not sure if the workaround you found is the right way to solve your problem, but assuming it is, installing dependencies in production mode is the way to go
jade token
yeah I'm very new to electron so any advice is much appreciated
acoustic blaze
also, try adding asar: true to the packageConfig object in your forge.config, it should speed things up a bit more
acoustic blaze
what about (assuming the module is installed in node_modules/leveldb-zlib):
packagerConfig: {
asar: {
unpackDir: 'node_modules/leveldb-zlib/**/*',
},
},
that did make it work again!
I don't really understand what exactly that is doing
acoustic blaze
I don't really understand what exactly that is doing
the asar option packs your files/dependencies into a single .asar file, which is a format Electron can read. asar: true packs everything, including native modules, while asar: { unpackDir: 'node_modules/leveldb-zlib/**/*' } skips that folder you specified.
if you look at the folder structure in your packaged app, you'll see an app.asar file and a app.asar.unpacked folder inside the resources folder. when you import leveldb-zlib, it will be read from app.asar.unpacked folder, while any other dependencies/project files will be read from the app.asar file
jade token
ah alright!
I'm just trying to get this to work for my actual app lol it works just fine for the demo app, but the actual compiles but wont load, does not error or anything but it just does not open the program
acoustic blaze
I'm just trying to get this to work for my actual app lol it works just fine for...
have you tried running the app from powershell? if there are any errors, they should show up there
jade token
yeah
running it from PS
I'm surprised it is quite a process to get stuff like this working
acoustic blaze
running it from PS
not the installer, the actual exe in out/you-app-name-win32-x64/your-app-name.exe LOL
jade token
o sec
acoustic blaze
I'm surprised it is quite a process to get stuff like this working
I guess it depends on how the native module is built
acoustic blaze
yeah, it's usually stuff like that or a missing comma
jade token
yeah I'm going to blame it on no sleep, I work at a hospital over night and wrote code by day lol
const tray = new Tray("images/cole_favicon.ico");
this would be the cause I imagine
works for dev tho lol
acoustic blaze
works for dev tho lol
webpack is a strange beast haha
acoustic blaze
const tray = new Tray("images/cole_favicon.ico");
maybe const tray = new Tray(path.join(__dirname, "images/cole_favicon.ico")) ?
jade token
I'll try that
if you ever need kubernetes help i'm your guy 😅
just got it built, didn't seem to work
hmm
acoustic blaze
how did you fix the icon?
jade token
I didn't yet haha still working on that but what i thought was going to fix it at least let it load
const iconPath = path.join(__dirname, 'build/images/cole-favicon.ico');
const tray = new Tray(nativeImage.createFromPath(iconPath));
const tray = new Tray(app.isPackaged ? path.join(__dirname, '../images/cole_favicon.ico') : 'images/cole_favicon.ico')
then install https://www.npmjs.com/package/copy-webpack-plugin and add this to your webpack.main.config.ts:
plugins: [
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, 'images'),
to: path.join(__dirname, '/.webpack/images'),
}
],
}),
]
jade token
@acoustic blaze I got the icon working!
webpack.plugins.ts
import type IForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
// eslint-disable-next-line import/default
import CopyPlugin from "copy-webpack-plugin";
import * as path from "path";
// eslint-disable-next-line @typescript-eslint/no-var-requires
const ForkTsCheckerWebpackPlugin: typeof IForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
export const plugins = [
new ForkTsCheckerWebpackPlugin({
logger: 'webpack-infrastructure',
}),
new CopyPlugin({
patterns: [
{
from: path.join(__dirname, "images"),
to: path.resolve(__dirname, ".webpack", "main/images")
}
]
})
];
const iconPath = path.join(__dirname, 'images/cole_favicon.ico');
const tray = new Tray(iconPath);
time to figure out why tailwind styles are not being applied haha
acoustic blaze
good luck with that, tailwind is not my thing
jade token
all good, i really appreciate your help and explanations!
acoustic blaze
glad to help 😀
jade token
im thinking my styles.css is not being packaged
I don't see any css files in the .webpack folder
jade token
nevermind, it is working correctly the css just looks different in prod? strange
acoustic blaze
are you using something called postcss-flexbugs-fixes by any chance?
I worked on a tailwind project a while ago and this guy ruined my styles in production as well
jade token
it's all working now 🙂 i just needed to hard reset the css rules
