[electron] electron-webpack-ts is not supported and .ts files for the main process are ignored

[simulieren]

Description

I'm trying to get TypeScript working for the main process of Electron. I've tried the addon electron-webpack-ts from electron-webpack and it isn't working properly. The webpack configuration ignores it and chooses the default template.

Expected Behavior

The webpack configuration should recognize .ts files in ./electron/main/ and create a build into the ./dist/main folder.

Observed Behavior

As soon as I convert the files in ./electron/main/ to .ts the webpack configuration defaults back to the template files in @expo/electron-adapter/template/electron/main.js.

No error messages.

This is the webpack log with the wrong entry point:

┏ Main -----------------------

  Hash: 2c85428047d3ac2278dc
  Version: webpack 4.39.0
  Time: 76ms
  Built at: 11/02/2020 14:04:23
    Asset      Size  Chunks             Chunk Names
  main.js  41.3 KiB    main  [emitted]  main
  Entrypoint main = main.js
  [0] multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./node_modules/@expo/electron-adapter/template/electron/main/index.js 40 bytes {main} [built]
  [./node_modules/@expo/electron-adapter/template/electron/main/index.js] 1.55 KiB {main} [built]
  [./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js] 582 bytes {main} [built]
  [electron] external "electron" 42 bytes {main} [built]
  [electron-webpack/out/electron-main-hmr/HmrClient] external "electron-webpack/out/electron-main-hmr/HmrClient" 42 bytes {main} [built]
  [path] external "path" 42 bytes {main} [built]
  [source-map-support/source-map-support.js] external "source-map-support/source-map-support.js" 42 bytes {main} [built]
  [url] external "url" 42 bytes {main} [built]

┗ ----------------------------

Environment

Expo CLI 3.11.7 environment info:
    System:
      OS: macOS 10.15.3
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 13.3.0 - /usr/local/bin/node
      Yarn: 1.21.0 - /usr/local/bin/yarn
      npm: 6.13.7 - /usr/local/bin/npm
    IDEs:
      Xcode: /undefined - /usr/bin/xcodebuild
    npmPackages:
      @types/react: ^16.9.0 => 16.9.19 
      @types/react-native: ^0.60.15 => 0.60.31 
      expo: ^36.0.0 => 36.0.2 
      react: ^16.12.0 => 16.12.0 
      react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4 
    npmGlobalPackages:
      expo-cli: 3.11.7

Reproducible Demo

Repo with the setup: https://github.com/simulieren/expo-electron-ts-issue

[simulieren]

Edit: This comment was a mistake on my side. Webpack was using an old .js file in dist.

Well, I've just accidentally found a fix ...

Having ./electron/main/index.js next to the ./electron/main/index.ts file makes it somehow work. The index.js can be completely empty and the code in the .ts file will run. But the type checking seems to be off and I get this error:

Module parse failed: The keyword 'interface' is reserved (98:0)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I don't think this is the expected behavior but it solved my issue. Hope this helps to get to the real solution.

[simulieren]

Okay, I've found a workaround for TS support. I'm running tsc -w in another folder during my development.

The electron folder now has this folder structure:

├── main
│   └── index.js
├── src
│   ├── index.ts
│   └── tsconfig.json

My tsconfig.json looks like this:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "jsx": "react-native",
        "moduleResolution": "node",
        "target": "ESNext",
        "noEmit": false,
        "skipLibCheck": true,
        "listEmittedFiles": true,
        "outDir": "../main",
        "rootDir": "."
    },
    "files": [
        "index.ts"
    ],
    "exclude": [
        "*.tsx",
        "../src/**/*",
    ]
}

[VityaSchel]

Okay, I've found a workaround for TS support. I'm running tsc -w in another folder during my development.

The electron folder now has this folder structure:

├── main
│   └── index.js
├── src
│   ├── index.ts
│   └── tsconfig.json

My tsconfig.json looks like this:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "jsx": "react-native",
        "moduleResolution": "node",
        "target": "ESNext",
        "noEmit": false,
        "skipLibCheck": true,
        "listEmittedFiles": true,
        "outDir": "../main",
        "rootDir": "."
    },
    "files": [
        "index.ts"
    ],
    "exclude": [
        "*.tsx",
        "../src/**/*",
    ]
}

This is an obvious way to compile typescript, but can it be done with webpack during runtime? I tried pushing ts-loader into webpack config rules, but it tries to compile .tsx files from app itself, not electron backend:

ERROR in ./App.tsx
  Module build failed (from ./node_modules/ts-loader/index.js):
  Error: TypeScript emitted no output for /App.tsx