`electron-forge Start` Does Not Support `extends` In `tsconfig.json`

Introduction

Electron Forge is a popular tool for building cross-platform desktop applications using Electron. It provides a simple and efficient way to create, build, and package Electron applications. However, when using Electron Forge with TypeScript, you may encounter issues with the extends property in the tsconfig.json file. In this article, we will explore the issue and provide a solution.

Pre-flight Checklist

Before we dive into the issue, let's make sure we have completed the necessary steps to ensure that our issue is valid and that we are not duplicating an existing issue.

1. Read the Contribution Documentation

Before contributing to the Electron Forge project, it is essential to read the contribution documentation. This documentation provides valuable information on how to contribute to the project, including guidelines for submitting issues and pull requests.

• Contribution Documentation

2. Agree to the Code of Conduct

Electron Forge follows a code of conduct that outlines the expected behavior for contributors. It is essential to agree to this code of conduct before contributing to the project.

• Code of Conduct

3. Search the Issue Tracker

Before submitting a new issue, it is essential to search the issue tracker to ensure that the issue is not already reported. This helps prevent duplicate issues and ensures that the issue tracker remains organized.

• Issue Tracker

Forge Version and Electron Version

To provide a clear understanding of the issue, it is essential to specify the version of Electron Forge and Electron being used.

Forge Version

The version of Electron Forge being used is 7.7.0.

Electron Version

The version of Electron being used is 35.0.0.

Operating System

The operating system being used is PopOS! 22.04 LTS.

Expected Behavior

The expected behavior is that the electron-forge start command should successfully start the Electron application.

Actual Behavior

However, when running the electron-forge start command, the following error is encountered:

✔ Checking your system
✔ Locating application
✖ Loading configuration
  › Unable to use specified module loaders for ".ts".
◼ Preparing native dependencies
◼ Running generateAssets hook
◼ Running preStart hook
An unhandled rejection has occurred inside Forge:
Error: Unable to use specified module loaders for ".ts".
at exports.prepare (/home/hab25/my/work/vite-electron-forge-template/my-new-app/node_modules/rechoir/index.js:58:11)
    at exports.default (/home/hab25/my/work/vite-electron-forge-template/my-new-app/node_modules/@electron-forge/core/dist/util/forge-config.js:141:25)
    at async /home/hab25/my/work/vite-electron-forge-template/my-new-app/node_modules/@electron-forge/core/dist/api/start.js:44:35
    at async _Task.taskFn (/home/hab25/my/work/vite-electron-forge-template/my-new-app/node_modules/@electron-forge/tracer/dist/index.js:58:20)
    at async _Task.run (/home/hab25/my/work/vite-electron-forge-template/my-new-app/node_modules/listr2/dist/index.cjs:2063:11)

Steps to Reproduce

To reproduce the issue, follow these steps:

npx create-electron-app@latest my-new-app --template=vite-typescript
cd my-new-app
mv tsconfig.json tsconfig.base.json
echo '{"extends": ["./tsconfig.base.json"]}' > tsconfig.json
npx electron-forge start

Solution

The issue is caused by the extends property in the tsconfig.json file. Electron Forge does not support the extends property, and it is causing the error.

To resolve the issue, remove the extends property from the tsconfig.json file. Instead, use the tsconfig.base.json file as the base configuration.

Here is an example of how to modify the tsconfig.json file:

{
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "allowSyntheticDefaultImports": true
  }
}

By removing the extends property and using the tsconfig.base.json file as the base configuration, the issue should be resolved, and the electron-forge start command should successfully start the Electron application.

Conclusion

Q: What is the issue with electron-forge start and extends in tsconfig.json?

A: The issue is that Electron Forge does not support the extends property in the tsconfig.json file. This property is used to extend the configuration from another file, but Electron Forge does not recognize it, causing an error when running the electron-forge start command.

Q: Why is extends not supported in tsconfig.json by Electron Forge?

A: The reason for this limitation is not explicitly stated in the Electron Forge documentation. However, it is likely due to the way Electron Forge processes the tsconfig.json file. Electron Forge uses the rechoir package to load the configuration, and this package may not support the extends property.

Q: How can I resolve the issue with electron-forge start and extends in tsconfig.json?

A: To resolve the issue, you can remove the extends property from the tsconfig.json file and use the tsconfig.base.json file as the base configuration. This will allow Electron Forge to process the configuration correctly and start the Electron application successfully.

Q: What is the difference between tsconfig.json and tsconfig.base.json?

A: tsconfig.json is the main configuration file for the TypeScript compiler, while tsconfig.base.json is a base configuration file that can be extended by other configuration files. In the context of Electron Forge, tsconfig.base.json is used as the base configuration file, and tsconfig.json is used to extend it.

Q: How do I modify the tsconfig.json file to remove the extends property?

A: To modify the tsconfig.json file, you can remove the extends property and add the necessary configuration options directly to the file. Here is an example of how to modify the tsconfig.json file:

{
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "allowSyntheticDefaultImports": true
  }
}

Q: Can I use a different configuration file instead of tsconfig.base.json?

A: Yes, you can use a different configuration file instead of tsconfig.base.json. However, you will need to modify the electron-forge configuration to point to the new configuration file.

Q: How do I modify the electron-forge configuration to point to a different configuration file?

A: To modify the electron-forge configuration, you can add a tsconfig property to the electron-forge configuration file. Here is an example of how to modify the electron-forge configuration:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My Electron application",
  "main": "index.js",
  "scripts": {
    "start": "electron-forge start"
  },
  "electronForge": {
    "tsconfig": "path/to/my/tsconfig.json"
  }
}

Q: Can I use a different TypeScript compiler instead of the default one?

A: Yes, you can use a different TypeScript compiler instead of the default one. However, you will need to modify the electron-forge configuration to point to the new compiler.

Q: How do I modify the electron-forge configuration to point to a different TypeScript compiler?

A: To modify the electron-forge configuration, you can add a typescript property to the electron-forge configuration file. Here is an example of how to modify the electron-forge configuration:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My Electron application",
  "main": "index.js",
  "scripts": {
    "start": "electron-forge start"
  },
  "electronForge": {
    "typescript": "path/to/my/typescript/compiler"
  }
}

Conclusion

In conclusion, the issue with electron-forge start not supporting extends in tsconfig.json is caused by the extends property in the tsconfig.json file. To resolve the issue, you can remove the extends property and use the tsconfig.base.json file as the base configuration. By following the steps outlined in this article, you should be able to resolve the issue and successfully start the Electron application using the electron-forge start command.