fork-ts-checker-webpack-plugin: this.compiler.applyPluginsAsync( is not a function

After upgrading to the following setup:

"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"

fork-ts-checker-webpack-plugin fails at line 354 in index.ts TypeError: _this.compiler.applyPluginsAsync is not a function

It seems that the compiler object passed to the constructor has a different format. Also, I previously have disabled fork-ts-checker-notifier-webpack-plugin because of an unrecognized hook. Namely:

Error: Plugin could not be registered at 'fork-ts-checker-receive'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'.

I can create a separate issue in that plugins page if you find that best.

Below adding my webpack.development


const path = require("path");
const webpack = require("webpack");
// const ForkTsCheckerNotifierWebpackPlugin = require("fork-ts-checker-notifier-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');


const shared = require("./shared");
const main = [
    "react-hot-loader/patch",
    "webpack-dev-server/client?http://localhost:8080",
    "webpack/hot/only-dev-server",
    "core-js",
    "whatwg-fetch",
    "./src/index.tsx"
];
const vendor = shared.makeVendorEntry({ mainModules: main, modulesToExclude: ["semantic-ui-css"] })

module.exports = {
    context: process.cwd(), // to automatically find tsconfig.json
    devtool: "inline-source-map",
    entry: {
        main: main,
        vendor: vendor
    },
    mode: "development",
    output: {
        path: path.resolve(__dirname, "dist"),
        devtoolLineToLine: true,
        filename: "bundle.js",
        sourceMapFilename: "bundle.js.map",
        publicPath: "/",
        chunkFilename: '[name].chunk.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // new ForkTsCheckerNotifierWebpackPlugin({ title: "TypeScript", excludeWarnings: false }),
        new ForkTsCheckerWebpackPlugin({
            tslint: true,
            checkSyntacticErrors: true,
            watch: ["./src"] // optional but improves performance (fewer stat calls)
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new HtmlWebpackPlugin({
            inject: true,
            template: "public/index.html",
            favicon: 'public/favicon.ico'
        }),
        new CleanWebpackPlugin(['dist']),
        new ExtractTextPlugin({ filename: "[name].[contenthash].css", allChunks: true }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
        }),
    ],
    module: {
        rules: [
            {
                test: /.tsx?$/,
                use: [
                    { loader: "ts-loader", options: { happyPackMode: true } }
                ],
                exclude: path.resolve(process.cwd(), "node_modules"),
                include: path.resolve(process.cwd(), "src"),
            },
            {
                test: /\.(s?)css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader",
                            query: {
                                modules: true,
                                localIdentName: "[name]__[local]___[hash:base64:5]",
                                minimize: true,
                            },
                        },
                        {
                            loader: "resolve-url-loader" // resolves url for sass-loader
                        },
                        {
                            loader: "sass-loader" // compiles Sass to CSS
                        },
                    ]
                })
            },
            {
                test: /\.(png|jp(e*)g|svg)$/,  
                use: [{
                    loader: "url-loader",
                    options: { 
                        limit: 8000, // Convert images < 8kb to base64 strings
                        name: "images/[hash]-[name].[ext]"
                    }
                }]
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
        plugins: [
            new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })
        ]
    },
    devServer: {
        hot: true,
        historyApiFallback: true,
        stats: "errors-only"
    }
};

UPDATE After upgrading both:

"fork-ts-checker-notifier-webpack-plugin": "^0.4.0",
"fork-ts-checker-webpack-plugin": "^0.4.9",

I get

compiler.hooks.forkTsCheckerReceive.tap(
   'fork-ts-checker-notifier-webpack-plugin',
    this.compilationDone.bind(this)
);

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 21 (9 by maintainers)

Most upvoted comments

PR accepted. Closing issue

Also, now I noticed the comment about the order, however, I’d still prefer it to be more explicit. People (like me) tend to overlook stuff that isn’t highlighted 🙂

Sure. I’ll do it tomorrow, if that’s ok with you