'Race condition causing assets to load from wrong location in Electron when launched with Playwright
I have an electron app I am trying to add playwright tests to, and when I launch it using the playwright _electron.launch(), I have some SVG files that are used in my CSS trying to load from the node_modules/electron/dist/resources/electron.asar file, instead of from the Webpack /build directory. Launching it manually from the command line works fine, without rebuilding or anything.
Any ideas what could cause this?
When I inspect the icon-load element in devtools element tab, the URL shows up like so:
.icon-load {
background: url(file:///F:/Programming/REDACTED/node_modules/electron/dist/resources/electron.asar/renderer/287f560038de84fa9ced.svg);
}
So far I have tried verifying body.baseURI as well as a few different options on _electron.launch().
Devtools console session:
window.$("body").baseURI
"file:///F:/Programming/REDACTED/build/"
launch-electron.js:
// Launch Electron app.
const electronApp = await electron.launch({
args: ["."],
//cwd: "F:\\Programming\\REDACTED", // no change
//bypassCSP: true, // no change
});
Update 2: Refreshing the page causes the SVG files to load from the correct location!! We appear to have a race condition with some kind of context switching in the electron launch. I'll add a snippet of my Webpack config again:
module.exports = {
context: __dirname + "/renderer",
entry: "./App.js",
output: {
path: __dirname + "/build",
filename: "bundle.[fullhash].js",
},
stats: {
errorDetails: true,
children: true,
},
module: {
rules: [
{
test: /App\.js$/i,
loader: "expose-loader",
options: {
exposes: {
globalName: "FF",
},
},
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"], // disabling URL loading in CSS loader makes app load but without CSS images
},
{
test: /\.(jpg|png|ico|svg)$/i,
type: "asset/resource",
},
],
},
};
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

