How i can use awesome-typescript-loader with electron-webpack?

[ChugunovRoman]

Hello. I'm trying bundling the my electron app through electron-webpack. But electron-webpack is require ts-loader, because I use awesome-typescript-loader instead ts-loader:

    ERROR in Entry module not found: Error: Can't resolve 'ts-loader' in '/media/ruut/MyDisk/Soft/Programming/ladProjects/ai/packages/app/desktop'

    ERROR in multi ./src/main/index.ts
    Module not found: Error: Can't resolve 'ts-loader' in '/media/ruut/MyDisk/Soft/Programming/ladProjects/ai/packages/app/desktop'
     @ multi ./src/main/index.ts

My custom webpack config:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const { CheckerPlugin } = require('awesome-typescript-loader');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

const rootFolder = process.cwd();

module.exports = {
    mode: 'development',
    context: `${rootFolder}`,

    entry: {
        index: path.join(rootFolder, '/src/main/index.ts'),
        vendors: ["react", "react-dom"]
    },
    output: {
        path: __dirname + "/build/app/main",
        filename: "[name].js"
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        modules: ["node_modules"],
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    target: 'electron-main',

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: {
                            configFileName: `${rootFolder}/config/tsconfig.json5`,
                            forceIsolatedModules: true,
                            useTranspileModule: true,
                        }
                    }
                ]
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(['build']),

        new HtmlWebpackPlugin({
            filename: path.resolve(rootFolder, 'build/app/index.html'),
            template: path.resolve(rootFolder, 'src', 'index.html')
        }),

        new CheckerPlugin(),

        new ForkTsCheckerWebpackPlugin()
    ]
};

electron-webpack config in package.json

"electronWebpack": {
    "commonSourceDirectory": "src",
    "title": true,
    "main": {
      "sourceDirectory": "src/main",
      "webpackConfig": "config/webpack.config.main.js"
    },
    "renderer": {
      "sourceDirectory": "src/renderer",
      "webpackConfig": "config/webpack.config.renderer.js"
    }
  },

How I can use the awesome-typescript-loader with the electron-webpack?

[JM-Mendez]

Are you installing electron-webpack-ts? If you are, that could be what's preventing you from switching. All that package really does is install ts-loader and fork-ts-checker-webpack-plugin. So technically you could do it yourself and it should work.

[JM-Mendez]

Nevermind my last comment. I ended up making a pull request to allow this since it would default to ts-loader if fork-ts-checker-webpack-plugin is installed.

The only thing is that you can either choose the default two plugins, or your own custom ones.

If you'd like to check out the branch to test it, you'll have to compile the branch locally and install it from that directory.

Here are the steps.

// install lerna globally if you don't have it
yarn global add lerna

// then
git clone https://github.com/JM-Mendez/electron-webpack
cd electron-webpack
git checkout feat/custom-typescript-loaders
lerna bootstrap
BABEL_ENV=production yarn run compile

Then to install

yarn install path-to-electron-webpack/packages/electron-webpack

But hopefully this pr gets accepted.