ERROR in compiler.getInfrastructureLogger is not a function when adding ForkTsCheckerWebpackPlugin

Question

I have a React application that is housed in a monorepo managed by NX. To build the application, I run the following command: npx webpack --config webpack.browser.config.js.

I build my app using esbuild-loader and it works great. However, as the esbuilder only transpile the code and does not check types, I have tried to add ForkTsCheckerWebpackPlugin for type checking.

When I attempted to include ForkTsCheckerWebpackPlugin, the build failed, and the following error message occurred: "ERROR in compiler.getInfrastructureLogger is not a function."

Upon researching it online, I discovered that this problem could be related to having multiple webpacks installed, but I am unsure about the appropriate course of action since webpack is installed by NX and is also necessary for other projects.

I opened an issue at the Plugin's repo but I'm not sure the repo is currently maintained.

I would greatly appreciate any suggestions or ideas for debugging this error, or if you have any recommended alternatives to ForkTsCheckerWebpackPlugin.

My webpack config:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { StatsWriterPlugin } = require('webpack-stats-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const { HotModuleReplacementPlugin } = require('webpack');

module.exports = (env) => {
    const isOffline = env?.production ? env?.production === false : true;

    return {
        entry: {
            main: path.join(__dirname, 'src/browser/index.tsx'),
        },
        target: 'web',
        mode: isOffline ? 'development' : 'production',
        node: {
            __dirname: true,
            __filename: true,
        },
        devServer: {
            port: 5050,
            hot: true,
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
                'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
            },
            watchFiles: {
                paths: ['**/*'],
                options: {
                    ignored: ['**/node_modules', '**/dist', '**/.webpack', '**/.serverless'],
                },
            },
            devMiddleware: {
                writeToDisk: (filePath) => {
                    // Always write the stats.json to disk, so we can load it in code
                    return /\bstats\.json$/.test(filePath);
                },
            },
        },
        performance: {
            // Turn off size warnings for entry points
            hints: false,
        },
        optimization: {
            runtimeChunk: 'single',
            splitChunks: {
                cacheGroups: {
                    // TODO: Customize code splitting to your needs
                    vendor: {
                        name: 'vendor',
                        test: /[\\/]node_modules[\\/]/,
                        chunks: 'all',
                    },
                    components: {
                        name: 'components',
                        test: /[\\/]src[\\/]components[\\/]/,
                        chunks: 'all',
                        minSize: 0,
                    },
                },
            },
        },
        // React recommends `cheap-module-source-map` for development
        devtool: isOffline ? 'cheap-module-source-map' : 'nosources-source-map',
        plugins: [
            new CleanWebpackPlugin(),
            new CopyWebpackPlugin({
                patterns: [
                    {
                        // Copy content from `./public/` folder to our output directory
                        context: './public/',
                        from: '**/*',
                    },
                ],
            }),
            new MiniCssExtractPlugin({
                filename: isOffline ? '[name].css' : '[name].[contenthash:8].css',
            }),
            new StatsWriterPlugin({
                filename: 'stats.json',
                transform(data, _opts) {
                    const assets = data.assetsByChunkName;
                    const stats = JSON.stringify(
                        {
                            scripts: Object.entries(assets).flatMap(([_asset, files]) => {
                                return files.filter((filename) => filename.endsWith('.js') && !/\.hot-update\./.test(filename));
                            }),
                            styles: Object.entries(assets).flatMap(([_asset, files]) => {
                                return files.filter((filename) => filename.endsWith('.css') && !/\.hot-update\./.test(filename));
                            }),
                        },
                        null,
                        2,
                    );
                    return stats;
                },
            }),
            isOffline && new HotModuleReplacementPlugin(),
        ].filter(Boolean),
        module: {
            rules: [
                {
                    test: /\.(ts|js)x?$/,
                    loader: 'esbuild-loader',
                    options: {
                        target: 'es2015', // Syntax to compile to (see options below for possible values)
                    },
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader'],
                },
                {
                    test: /\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: { limit: 8192 },
                        },
                    ],
                },
            ],
        },
        resolve: {
            // TsconfigPathsPlugin applies the path aliases defined in `.tsconfig.json`
             //  with new ForkTsCheckerWebpackPlugin() we fail with 'ERROR in compiler.getInfrastructureLogger is not a function'
             //  when removing it the build works
            plugins: [new TsconfigPathsPlugin(), new ForkTsCheckerWebpackPlugin()],
            extensions: ['.browser.tsx', '.browser.ts', '.browser.jsx', '.browser.js', '.tsx', '.ts', '.jsx', '.js'],
        },
        output: {
            path: path.join(__dirname, 'dist'),
            filename: isOffline ? '[name].js' : '[name].[contenthash:8].js',
            crossOriginLoading: 'anonymous', // enable cross-origin loading of chunks
        },
    };
};