electron-webpack-ts

4.0.1 verified Sat Apr 25 auth: no javascript maintenance

TypeScript add-on for electron-webpack that enables TypeScript compilation in Electron projects. Current version 4.0.1 requires TypeScript ^3.8.3 as a peer dependency. It integrates with electron-webpack's build pipeline, supporting features like JSX, Vue, and CSS Modules. This package is tied to the electron-webpack ecosystem, which has seen maintenance releases but no recent major updates. Compared to standalone Webpack TypeScript setups, it simplifies configuration by leveraging electron-webpack's convention-based approach.

Common errors

error Cannot find name 'React' ↓

cause TypeScript cannot resolve React types when JSX is enabled but React is not imported.

fix

Add 'import React from 'react' in your JSX files or set 'jsx: 'react-jsx' in tsconfig.json.

error ERROR in ./src/index.tsx Module parse failed: Unexpected token (1:8) You may need an appropriate loader to handle this file type. ↓

cause TypeScript files are not being processed because the add-on is not properly configured.

fix

Ensure electron-webpack-ts is added as a plugin in your electron-webpack.config.js.

error Cannot find module 'electron-webpack-ts' ↓

cause The package is not installed or is in a wrong location.

fix

Run 'npm install --save-dev electron-webpack-ts' and ensure it's in your package.json devDependencies.

error Property 'createConfig' does not exist on type 'typeof import(...)'. ↓

cause The import or require statement for electron-webpack is incorrect.

fix

Use: const { createConfig } = require('electron-webpack');

Warnings

gotcha You must have a valid tsconfig.json file in your project root for the add-on to work. ↓

fix Ensure tsconfig.json exists with appropriate compiler options.

breaking Version 3.0.0 dropped support for TypeScript < 3.8.3 and changed the default export signature. ↓

fix Update your code to call the exported function instead of using it as a plugin directly.

deprecated electron-webpack is in maintenance mode; consider migrating to a more modern Electron build setup. ↓

fix Evaluate alternatives like electron-forge with Vite or esbuild.

gotcha If using Vue, the TypeScript type checker may cause issues; ensure vue-class-component is compatible. ↓

fix Install compatible versions of vue and vue-class-component, and adjust tsconfig.json.

breaking Upgrading from electron-webpack v2 to v3 (if using this addon) requires configuration changes. ↓

fix Consult the electron-webpack migration guide for breaking changes in its core API.

Install

npm install electron-webpack-ts

yarn add electron-webpack-ts

pnpm add electron-webpack-ts

Imports

default

wrong

import * as electronWebpackTs from 'electron-webpack-ts'

correct

import electronWebpackTs from 'electron-webpack-ts'

Default export is the configuration function.

Configuration

wrong

import { Config } from 'electron-webpack-ts'

correct

import { Configuration } from 'electron-webpack-ts'

Named export for TypeScript configuration type.

require('electron-webpack-ts')

wrong

const { default } = require('electron-webpack-ts')

correct

const electronWebpackTs = require('electron-webpack-ts')

CJS require returns the default export.

Quickstart

Shows how to integrate electron-webpack-ts with electron-webpack in a configuration file and the required tsconfig.json setup.

// Install prerequisites first:
// npm install --save-dev electron-webpack electron-webpack-ts typescript

// In electron-webpack.config.js:
const { createConfig } = require('electron-webpack');
const tsConfig = require('electron-webpack-ts');

module.exports = function(env) {
  const config = createConfig(env);
  config.plugins.push(tsConfig());
  return config;
};

// tsconfig.json (required):
{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}