Electron-forge: webpack: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY is not defined

[G-Rath]

• [x] I have read the contribution documentation for this project.
• [x] I agree to follow the code of conduct that this project follows, as appropriate.
• [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Please describe your issue:

I'm using the repo provided by @tgds found here. While it is in typescript rather than JS, it works no problem using the MAIN_WINDOW_WEBPACK_ENTRY variable.

The documentation for the webpack plugin says

For an entry point with the name main_window two variables will be defined MAIN_WINDOW_WEBPACK_ENTRY and MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY

with this example:

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
  }
});

mainWindow.loadUrl(MAIN_WINDOW_WEBPACK_ENTRY);

However, if I modify the code in the repo provided to match, I get an error:

[MarshallOfSound]

@G-Rath MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY will only be defined if a preload is defined in your @electron-forge/plugin-webpack config.

Their is no preload configured here --> https://github.com/tgds/electrong-forge-webpack-typescript/blob/master/package.json#L42-L46 so that variable is not set. I'll update the docs now

[G-Rath]

@MarshallOfSound awesome, thanks for such a quick response!

It wasn't blocking me from development, but since I wasn't preloading, the script would get loaded over localhost, and electron would give me a couple of security warnings about loading remote content.

Thanks again!

[G-Rath]

@MarshallOfSound would you mind weighting in on a problem I'm having relating to this?

I've got the preload setup & working like so:

"preload": {
  "js": "./src/renderer/index.ts"
}

However, that results in the code being run twice, as it's also injected into my html file via a script tag:

<script type="text/javascript" src="../main_window/index.js"></script>

I'm confused over what's actually meant to be happening - I can't find anything in the docs about @electron-forge/plugin-webpack injecting a link to the js, but it seemed to be how the whole setup worked.

If I remove the "js": "./src/renderer/index.ts", entry point, webpack throws an error, and if I don't use preload, I get warnings from electron about having requesting a remote resource with nodeIntegration: true 😕

I feel like I'm missing a single piece in the puzzle, and would be really grateful if you could point me in the right direction on how to handle this behaviour :)

[MarshallOfSound]

@G-Rath Two things.

1. During development it will complain about a "remote" server because it loads your app from localhost via http. This is OK, it doesn't complain once packaged as it doesn't use localhost in prod

2. If you want to use a preload it should be a different file, E>g. src/renderer/preload.ts.

[G-Rath]

@MarshallOfSound Oh ok; I guess I'll just get use to the warning.

I do find that a little odd, as I thought that was one of the reasons of using preload, and the security page that the warning links to seems to indicate using preload in this situation. Nor can I find any information about what preloaded scripts can't do that non-preloaded ones can.

It seems doubly weird when considering that electron 5 will apparently make the default values for contextIsolation & nodeIntegration true & false respectively, meaning that require (& other node apis) will only work in preloaded scripts.

It could be that I've just misunderstood something; either way, thanks again for the speedy reply and answer - and for that fix!

I've just about finished making a nice project starter of all this that works out of the box - feel free to link to it wherever. I imagine it might be useful for reference with other typescript related questions & issues.

[karlitos]

What worked for me was:

"entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.tsx",
                  "name": "main_window",
                  "preload": {
                    "js": "./src/preload.ts"
                  }
                }
              ]

I found it by looking at the repository related to another reported bug. It would be truly appreciated if you could update the documentation a little bit - I was searching for hours to find a way how tu use typescript in the preload script.

[MR250655]

@MarshallOfSound is it possible to use another webpack config for the preload file?

My use case is I'm using the polllyfills in the renderer that I don't want in preload. Bc I'm using the node webpack attribute there's no option for excluding a file. Thank you!

[DaniloSouza19]

@karlitos That was works for me to in "dev" electron-forge start script. But when I build distribution using @electron-forge/maker-squirrel electron-forge make do not loaded the preload.ts, it does not appear on .webpack folder.

My package.json:

/* other things*/

"plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.ts",
                  "name": "main_window",
                  "preload": {
                    "js": "./src/preload.ts"
                  }
                }
              ]
            }
          }
        ]
      ]
    }

My index.ts

/* other things */
const createWindow = (): void => {
  const mainWindow = new BrowserWindow({
    height: 700,
    width: 720,
    minWidth: 560,
    minHeight: 560,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY, /* it Works on start, but in production does not */
    },
    backgroundColor: '#eee',
    title: `Fechamento | Abertura de Bonus | Dev Danilo Souza | Versão ${app.getVersion()}`,
    icon: path.join(__dirname, 'assets', 'logo.ico')
  });

  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
};
/* other things */

Can anybody help me?
@MarshallOfSound @karlitos

For now, thanks!