'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.

showing all files loading properly on the left, and on the right side SVG files try to load from electron.asar inside node_modules folder

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