"Compiling Preload Scripts" stuck for typescript-webpack template

[gmreburn]

Pre-flight checklist

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project uses.
• I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

6.0.0-beta.66

Electron version

v20.1.3

Operating system

Windows 10

Last known working Electron Forge version

No response

Expected behavior

Electron window should open.

Actual behavior

Stuck at "Compiling Preload Scripts".. Waiting 5-10m but still does not open electron window.

Steps to reproduce

1. npx create-electron-app my-new-app --template=typescript-webpack
   Source: https://www.electronforge.io/templates/typescript-+-webpack-template

2. Update ./src/package.json to include preload script reference

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

3. npm start

Additional information

No response

[gmreburn]

I think this was due to my local repo being in a bad state from #2931. I reinstalled @electron-forge in node_modules (because I made changes to it locally), deleted the preload.js from the project and set ./src/preload.ts as the preload entry point in the package.json and I am able to compile preload script without hanging now.

[NuriYuri]

On my side I still have this compiling issue getting stuck for no reason.
I would say npm start actually start the app 1 time out of 20 attempts :/

One additional details to OP, the project is stored in a SSD.
Here's the important files:
preload.ts

// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
import { contextBridge, ipcRenderer } from 'electron';
import { defineBackendTask } from './back-end/backendTask';
import type { ChooseFileInputPayload } from './back-end/chooseFile';
import { BackendTaskWithGenericErrorAndNoProgress } from './back-end/types';

contextBridge.exposeInMainWorld('api', {
  static: true,
  chooseFile: defineBackendTask(ipcRenderer, 'chooseFile'),
});

declare global {
  interface Window {
    api: {
      static: boolean;
      chooseFile: BackendTaskWithGenericErrorAndNoProgress<ChooseFileInputPayload, { paths: string[] }>;
    };
  }
}

preload.js: deleted
index.ts

import { app, BrowserWindow, ipcMain } from 'electron';
import { registerChooseFile } from './back-end/chooseFile';
// This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
// plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
// whether you're running in development or production).
declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
  // eslint-disable-line global-require
  app.quit();
}

const createWindow = (): void => {
  console.log('---t', MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY);
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
  });

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.
registerChooseFile(ipcMain);

renderer.ts

import './App';

App.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
import { Home } from './front-end/Home';
import { Test } from './front-end/Test';

const render = () => {
  const rootDiv = document.getElementById('root') || document.body;
  const root = ReactDOM.createRoot(rootDiv);
  root.render(
    <MemoryRouter>
      <Routes>
        <Route path="test" element={<Test />} />
        <Route element={<Home />} index />
      </Routes>
    </MemoryRouter>
  );
};

render();

webpack.main.config.js

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: './src/index.ts',
  // Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
  },
};

webpack.plugins.js

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = [new ForkTsCheckerWebpackPlugin()];

webpack.renderer.config.js

const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');

// rules.push({
//   test: /\.css$/,
//   use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
// });

module.exports = {
  module: {
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx'],
  },
};

webpack.rules.js

module.exports = [
  // Add support for native node modules
  {
    // We're specifying native_modules in the test because the asset relocator loader generates a
    // "fake" .node file which is really a cjs file.
    test: /native_modules\/.+\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
      },
    },
  },
];

package.json

{
  "name": "my-new-app",
  "productName": "my-new-app",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": ".webpack/main",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint --ext .ts,.tsx ."
  },
  "keywords": [],
  "author": {
    "name": "Nuri Yuri",
    "email": "qsdf@mlkjh.com"
  },
  "license": "MIT",
  "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"
                  }
                }
              ]
            }
          }
        ]
      ]
    }
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.66",
    "@electron-forge/maker-deb": "^6.0.0-beta.66",
    "@electron-forge/maker-rpm": "^6.0.0-beta.66",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.66",
    "@electron-forge/maker-zip": "^6.0.0-beta.66",
    "@electron-forge/plugin-webpack": "6.0.0-beta.66",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "@vercel/webpack-asset-relocator-loader": "1.7.3",
    "css-loader": "^6.0.0",
    "electron": "21.0.1",
    "eslint": "^8.0.1",
    "eslint-plugin-import": "^2.25.0",
    "fork-ts-checker-webpack-plugin": "^7.2.1",
    "node-loader": "^2.0.0",
    "style-loader": "^3.0.0",
    "ts-loader": "^9.2.2",
    "typescript": "~4.5.4"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.1"
  }
}

[erickzhao]

@NuriYuri do you have a reproduction repo you could potentially share? I'm interested in attempting to debug this.

[NuriYuri]

@erickzhao Hi, here's the repo: https://github.com/NuriYuri/data-handler

I'm using npm commands (I see that a yarn file was generated from template).

[erickzhao]

@NuriYuri was unable to repro on my end :(

[NuriYuri]

Sad :(

It looks like a Windows issue, I'll wait until the beta is done and if it still doesn't work I'll probably work all of this on Linux.
In any case, I can do pair programming if that's necessary since it happens on my machine ^^

[VerteDinde]

Sorry @NuriYuri, I also tried to repro using the data-handler repo you provided, and I also couldn't reproduce the compiling issue on Windows 10 (see screenshot below):

I did get an anti-virus warning when I hit "Compiling Preload Scripts" though! If you have anti-virus on your machine, could you maybe try toggling it on/off to see if the compiling step is affected?

[NuriYuri]

Toggling off windows defender did not work.

Regardless I did reinstall node (16.15 -> 16.17) and now it works without getting stuck at compiling. Thanks a lot for the help :D

[carlos-labrador]

@gmreburn , sorry this issue still occurs when using vscode debugger.

[NuriYuri]

You can try reinstalling nodeJS and also VSCode. That's what ultimately helped me (don't forget to enable yarn again).

[carlos-labrador]

@NuriYuri thank you so much for your response, I just wonder , do you use vs code debugger with preload.ts ?

I have these keys:

      {
        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'
              }
            }
          ]
        }
      }

but if I use preload.js works properly the debbuger, so I wonder why this happen.
Thank once again

[NuriYuri]

No sorry I don't use it for the preload file since mine is just a definition file, it doesn't make sense to debug it.
For the rest, I make sure I use electron-log with proper messages to make sure everything goes right. With typescript, most of the issue are caught on compilation so the worst thing that can happen to you is fs not able to read 'mpa.json' because you misspelt map (if you don't have the cSpell extension).