Getting ERROR in compiler.getInfrastructureLogger is not a function

urig-40seas commented 1 year ago

Current behavior

I have a React application that exists within a monorepo managed by NX. I build the application using the command npx webpack --config webpack.browser.config.js, and I have attached my webpack.browser.config.js file below.

The build process works smoothly, but when I tried to add ForkTsCheckerWebpackPlugin, the build failed with the error message: ERROR in compiler.getInfrastructureLogger is not a function. I searched the web and found that this issue may be related to having multiple webpacks installed, but since webpack is installed by NX and is also needed for other projects, I am not sure how to proceed.

Has anyone else experienced this issue? Do you have any ideas for remediation?

Environment

fork-ts-checker-webpack-plugin: 8.0.0
(btw, seems like I have several more installed) ├─┬ @nrwl/cypress@14.5.10 │ └── fork-ts-checker-webpack-plugin@7.2.13 ├─┬ @nrwl/node@14.4.3 │ └── fork-ts-checker-webpack-plugin@6.2.10 ├─┬ @nrwl/web@14.5.10 │ └── fork-ts-checker-webpack-plugin@7.2.13 └── fork-ts-checker-webpack-plugin@8.0.0
typescript: 4.7.4
os: Mac Os Ventura 13.2.1
- webpack: 5.74.0
- webpack-cli: 4.10.0
- webpack-dev-server 4.15.0

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
        },
    };
};

Lyoko-Jeremie commented 1 year ago

same issue, the mini re-product is :

node -v v18.15.0 yarn -v 3.6.1

{
  "name": "AAAAA",
  "private": true,
  "scripts": {
    "build:watch": "tsc --watch",
    "webpack:watch": "webpack --watch"
  },
  "packageManager": "yarn@3.6.1",
  "dependencies": {
    "fork-ts-checker-webpack-plugin": "^8.0.0",
    "ts-loader": "^9.4.4",
    "tsconfig-paths-webpack-plugin": "^4.1.0",
    "typescript": "^5.1.6",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: {
    server: './src/server/0.ts',
    web: './src/web/1.ts',
  },
  output: {
    filename: './dist/[name]/[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".tsx", ".js"],
    plugins: [
      // new TsconfigPathsPlugin({configFile: "./tsconfig.json"}),
      new ForkTsCheckerWebpackPlugin(),
    ],
  },
  module: {
    rules: [
      // all files with a `.ts`, `.cts`, `.mts` or `.tsx` extension will be handled by `ts-loader`
      {
        test: /\.([cm]?ts|tsx)$/, loader: "ts-loader" ,
        // use: [
        //   {
        //     loader: 'ts-loader',
        //     options: {
        //       transpileOnly: true
        //     }
        //   }
        // ]
      }
    ]
  },
  // watchOptions: {
  //   // for some systems, watching many files can result in a lot of CPU or memory usage
  //   // https://webpack.js.org/configuration/watch/#watchoptionsignored
  //   // don't use this pattern, if you have a monorepo with linked packages
  //   ignored: /node_modules/,
  // },
};

AlesioSinopoli commented 9 months ago

You are including ForkTsCheckerWebpackPlugin in the wrong place. It needs to be outside the "resolve" property, as seen in the docs examples: https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/main/examples/babel-loader/webpack.config.js

WRONG:

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".tsx", ".js"],
    plugins: [
      new ForkTsCheckerWebpackPlugin(),
    ],
  },
};

GOOD:

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".tsx", ".js"],
    plugins: [],
  },
  plugins: [
      new ForkTsCheckerWebpackPlugin(),
    ]
};

piotr-oles commented 3 months ago

Thanks @AlesioSinopoli for the answer :+1:

TypeStrong / fork-ts-checker-webpack-plugin