Electron-renderer does not load webpack bundle from file nor from webpack-dev-server

Question

1. Electron-renderer does not load the html file including the script after I bundled it with webpack (dist folder). Image: nothing loaded I am sure that I load the right file, because it gets loaded if I remove the script tag placed by html-webpack-plugin in the compiled 'index.html'.

I tried the same with the webpack-dev-server and the results are different depending on the setup.

1. I run webpack-dev-server first and after it started I start electron from another bash instance (a new GIT bash window or cmd window). The result is always an empty window like in the previous image nothing loaded.

2. If I run webpack-dev-server and electron from the same bash instance like so:

package.json

{
  "scripts": {
    "start": "./start.sh"
  }
}

start.sh

#!/usr/bin/env bash

trap 'kill $(jobs -p)' EXIT
npm run serve &
npm run start:electron:server &
wait

There are two results (this could be due to the fact I dont add any timeout).

2.1 The DOM is not populated - like in the first image nothing loaded. But the bundled script is loaded script loaded.

2.2 The DOM is populated DOM loaded and the bundled script is laoded script loaded. One can think that it works fine. But electron does reload empty sources if I change code empty html empty js. Electron also does not show properties if I log an object and press the triangle on the left. doesnt update log

For every setup where I use webpack-dev-server (both same bash instance and different instances) I cannot close electron via the red cross on the top right nor via File | Exit after the webpack-dev-server started and electron listens to it. I suspect this is due to an open websocket open websocket

tsconfig.json

{
    "compilerOptions": {
        "outDir": "dist",
        "module": "commonjs",
        "moduleResolution": "node",
        "target": "es2018",
        "noImplicitAny": true,
        "removeComments": true,
        "sourceMap": true,
        "baseUrl": "./",
        "paths": {
            "engine": ["../engine"]
        }
    },
    "exclude": [
            "node_modules",
            "**/*.spec.ts"
    ]
}

webpack.renderer.common.js

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: './index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      engine: path.resolve(__dirname, '..', 'engine')
    }
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2'
  },
  target: 'electron-renderer',
  externals: [nodeExternals()],
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html')
    })
  ]
};

webpack.renderer.dev.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.renderer.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        port: 8000
    }
});

package.json

{
  "main": "main.js",
  "scripts": {
    "start:electron": "cross-env electron .",
    "start": "./start.sh",
    "start:electron:server": "cross-env NODE_ENV=development electron .",
    "serve": "webpack-dev-server --config webpack.renderer.dev.js",
    "build": "webpack --config webpack.renderer.dev.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.1",
    "cross-env": "^5.2.0",
    "electron": "4.1.4",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^5.3.3",
    "typescript": "^3.4.4",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1",
    "webpack-merge": "^4.2.1",
    "webpack-node-externals": "^1.7.2"
  }
}

Electron should load from both the file and the server. It does neither of those and I think that the problem lies at webpack and the configs. I cant tell why electron can load the code either fully (DOM and script) or partially (just the script) on the initial request to the webpack-dev-server and than fails on any subsequent reload.

Answer 1

I've set up my project anew. And it does work now. I still don't know what went wrong, though.