electron, webpack, typescript: electron-webpack dev findet Module nicht

Ich habe ein (künstliche reduziertes) Repro hier in GitHub abgelegt. Erst einmal handelt es sich um ein relativ normales electron-webpack-ts Projekt, allerdings mit einer Besonderheit: in einem Unterverzeichnis lib (im realen Szenario ein ganzes Repository als GIT submodule) ist eine Art Bibliothek eingebunden.

In dieser Bibliothek sind (aus historischen Gründen) die Typescript Deklarationen (typings) von den eigentlichen Quellen (src) getrennt. Eine tsconfig.json stellt sicher, dass die Bibliothek auch als eigenständiges Repository gebaut und insbesondere getestet werden kann – nicht im Repro Szenario, da fehlt alles außer dieser einen Konfigurationsdatei und selbst die habe ich auf das unmittelbar Notwendige reduziert. Auf die Struktur der Bibliothek habe ich keinen Einfluss, da diese in vielen anderen Projekten so wie sie ist erwartet wird.

Im eigentlichen Code (renderer) wird eine Methode aus der Bibliothek verwendet.

import * as React from "react"
import { render } from "react-dom"
import { createTest } from "lib"

render(
    <div>[HELLO WORLD]</div>,
    document.querySelector('body > div#app')
)

export const test2 = createTest()

Damit das Modul lib gefunden wird, werden die Typdeklarationen über die tsconfig.json eingebunden, nichts Besonderes soweit.

{
    "extends": "./node_modules/electron-webpack/tsconfig-base.json",
    "compilerOptions": {
        "jsx": "react"
    },
    "include": [
        "lib/typings/**/*.d.ts",
        "src/**/*.ts",
        "src/**/*.tsx"
    ]
}

Durch die Trennung von Code und Deklaration in der Bibliothek reicht das für webpack natürlich nicht für das Bundling, und wir müssen in der package.json eine Anpassung der webpack Konfiguration aktivieren.

    "electronWebpack": {
        "renderer": {
            "webpackConfig": "webpack.override.js"
        }
    },

In der webpack.override.js wird ein Alias für lib definiert.

    config.resolve = { ...config.resolve }

    config.resolve.alias = {
        ...config.resolve.alias,
        'lib': resolve(__dirname, 'lib/src'),
    }

Damit sollten wir eigentlich fertig sein und auch die exotische Struktur der Bibliothek nutzen können. In der Tat läuft auch electron-webpack sauber durch. Beim Starten der Entwicklungsumgebung mit electron-webpack dev gibt es aber leider eine böse Überraschung:

  ERROR in ./lib/src/createTest.ts
  Module not found: Error: Can't resolve 'api' in '.../electron-tsloader-watch-problem/lib/src'
   @ ./lib/src/createTest.ts 1:0-29 2:34-40
   @ ./lib/src/index.ts
   @ ./src/renderer/index.tsx
   @ multi css-hot-loader/hotModuleReplacement ./src/renderer/index.tsx

Warum gibt es plötzlich das Modul nicht mehr? Die Ursache ist wohl, dass zum schnelleren Start bei dev der ts-loader mit transpileOnly true verwendet wird. Meine Vermutung ist, dass hier die Modulreferenzen nicht vollständig aufgelöst werden und der folgende Übersetzungsvorgang (babel denke ich) im hot-reloader diese dann nicht mehr findet.

import { helper, ISomeTest } from "api"

export function createTest(data = helper.one): ISomeTest {
    return { data }
}

Interessant ist, dass der Effekt nicht auftritt, wenn nur Interfaces (hier ISomeTest) referenziert werden, nicht aber zum Beispiel eine enum (hier helper).

Den einfachsten Fix den ich gefunden habe, ist transpileOnly false zu erzwingen – was allerdings den Startvorgang in der Entwicklungsumgebung merklich verzögert. Die Implementierung dazu findet sich wieder in der webpack.override.js.

    const ts = config.module.rules
        .map((r) => r.use)
        .map((u) => Array.isArray(u) && u[0])
        .filter((p) => p && p.loader === 'ts-loader')
        .map((l) => l.options)[0]

    if (ts && ts.transpileOnly && process.env.APPLYWORKAROUND) {
        ts.transpileOnly = false
    }

Setzt man vor dem Aufruf von electron-webpack dev die Umgebungsvariable APPLYWORKAROUND auf irgendwas (e.g. yes) dann läuft dieser wie gewünscht durch.

Der Work-Around ist aber mehr als hässlich und stark von der konkreten Implementierung im electron-webpack abhängig. Eine richtige Lösung etwa in Form einer Konfiguration in der package.json wäre sicher schöner, aber immerhin hilft es in diesem besonderen Fall auch mit dieser Legacy Bibliothek arbeiten zu können.

Vielleicht erspart der Tipp dem einen oder anderen eine längere Suche – ich fand das nicht wirklich einfach zu lokalisieren und zu verstehen. Ich kann mir vorstellen, dass ähnliche Effekte vielleicht auch in weniger exotischen Anwendungen auftreten.

So long

Jochen