forge: webpack: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY is not defined

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.

It only says that I should use the variable MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY but says nothing where it comes from and what should I do to initialize it.

Also it’d be very helpful to explain the magic behind the naming.

Hey Guys, it really IS described in the docs, but very hidden. https://www.electronforge.io/config/plugins/webpack#project-setup

1. In your package.json under config->plugins->renderer->entrypoints-Array, you need to add to the objects the property “preload”:{“js”:./src/preload.ts"} ( if your preload file is located at src/preload.ts). the entrypoints-array-objects have a name-propertygiven - in the default-template it has the name:“main_window”

if you DON’T define the preload-script in the package.json then you only have by default only one variable autogenerated - MAIN_WINDOW_WEBPACK_ENTRY.

if you DO define the preload-script in the package.json, there will be 2 variables autogenerated for you now ( as described in the docs): MAIN_WINDOW_WEBPACK_ENTRY and MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY - prefixed with MAIN_WINDOW because you defined the entrypoint-name as “main_window” in your package.json.

in order to use these variable now in your index.ts / main-process-script they have to be declared upfront: <<(index.ts)>>

declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
...
const mainWindow= new BrowserWindow({
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,

}});
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
...

<<(package.json)>>

"config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "my_new_app"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ],
      "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"
                  }
                }
              ]
            }
          }
        ]
      ]
    }
  },

Fun detail to add: if you change the entry point name, the name of this variable also changes. So with:

entryPoints: [{
   name: "app",

The variables would be called:

declare const APP_PRELOAD_WEBPACK_ENTRY: string
declare const APP_WEBPACK_ENTRY: string

To be honest, I do not understand why this is not pre-generated. At least, it would be nice to have something like that in the generated index.ts:

// This allows TypeScript to pick up the magic constant that's auto-generated by Forge's Webpack
// plugin that tells the Electron app where to look for the Webpack-bundled preload code (depending on
// whether you're running in development or production).
//
// This constant is only defined if a bundle for preload has been generated. In order to get it generated,
// preload needs to be defined as entry point. E.g. add 
// "preload": { "js": "./src/preload.ts" }
// to the "entryPoints" in your package.json.
// declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;

@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!

That is inaccurate, it’s part of https://www.electronforge.io/config/plugins/webpack#project-setup

@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