Open amaury1093 opened 5 years ago
ERROR in Entry module not found: Error: Can't resolve '@/preload.ts'
When I needed a preload script, I also ran into various issues. In the end I was happy with the workaround of treating the preload script as a static asset instead of as source code. I used the static folder and a .js file and that worked. Once I even had a tsc watching and generating the js.
How about this issue's progress
I'm having the same issue that preload.js
file is not included in the distribution built app while in develop it runs ok. How can we bundle and include in build version of the application?
@raviSussol Have you added preload.js in extraEntries ?
@shahkeyur Yes I have:
electron-webpack.json
{
"title": true,
"commonSourceDirectory": "src/common",
"staticSourceDirectory": "src/static",
"main": {
"extraEntries": ["@/preload.js"],
"sourceDirectory": "src/main"
},
"renderer": {
"sourceDirectory": "src/renderer",
"template": "src/index.html"
}
}
src/main/index.js
// Create the browser window.
const window = new BrowserWindow({
width: 800,
height: 600,
show: false,
webPreferences: {
nodeIntegration: true,
preload: resolve(__dirname, 'preload.js')
}
});
src/main/preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector);
if (element) element.innerText = text;
};
for (const type of ['chrome', 'node', 'electron']) {;
replaceText(`${type}-version`, process.versions[type]);
}
})
Output In develop
In prod
Even my index.html
is not included in the built version of the app. I tried with placing it inside/outside of the renderer
folder with the mentioned path settings in the electron-webpack.json
but no luck. 😞 I'm not sure what I'm missing...
Hmm have you tried without the magic @ in the path?
@raviSussol Probably to debug you should try opening the devtools in prod mode, and see if you're getting any error. I have been using the preload for a while and I haven't had any issues. I suspect it is some misconfiguration.
@loopmode,
Hmm have you tried without the magic @ in the path?
Tried with removing @
and with full path src/main/preload.js
- didn't work
@shahkeyur,
@raviSussol Probably to debug you should try opening the devtools in prod mode, and see if you're getting any error. I have been using the preload for a while and I haven't had any issues. I suspect it is some misconfiguration.
OK I tried to look at all relative/absolute paths configuration in the app and I found a mistake in the index.html
path given to the window.loadURL
. Could be to do with that wrong config that my index.html
wasn't loading in the prod app at first. Fixed it with path.resolve(__dirname, 'index.html')
and now its working in the built version as well. However, when I replaced window.loadURL
with window.loadFile
it again fails to load the html file in the production. Not allowed to load local resource
error I'm getting when I see in the dev tool in the prod app. Tried to give absolute path as well but couldn't success.
I want to use window.loadFile
as this is a recommended way to load resource in the latest electron app. window.loadURL
has now become older and not preferred to be use (or a bit slower than window.loadFile
) in terms of performance.
Ignore my above comments. Got fixed by removing file://
from the window.loadFile
path. I realized that load file api just uses file path directly rather converting it to a url (with file://
). Now its working but Im getting another issue that if I add npm module in the preload.js
file then get unable to load preload script
:
I was using custom title bar electron:
src/main/preload.js
:
const customTitlebar = require('custom-electron-titlebar');
window.addEventListener('DOMContentLoaded', () => {
new customTitlebar.Titlebar({
backgroundColor: customTitlebar.Color.fromHex('#2f3241')
})
})
Here's my preload.js:
And I load it like this:
with the following electron-webpack config:
With
electron-webpack dev
Everything works.
With
electron-webpack build && electron dist/main.js
The error I get in the BrowserWindow console is:
If interested, here's the compiled
dist/preload.js
:Also, if I copy my original preload.js, and paste it into
dist/preload.js
, and just runelectron dist/main
, everything works again.My guess (not 100% sure): the webpack target for everything inside
extraEntries
iselectron
, sopreload.js
is bundled with that target (hence the module.exports stuff), but it should be bundled with targetweb
orelectron-renderer
.