Webpack 5 Watch Only Rebuilds Once, Never Again

[DaleyKD]

Bug report

What is the current behavior?
When running webpack --mode development --watch --progress in Webpack 5, it builds everything fine, then goes into watch mode. Upon the first change of my .tsx, it then successfully rebuilds it again. However, after I change that same .tsx a second time, webpack notices the change, but does not rebuild.

PLEASE NOTE: I rolled back to Webpack 4.44.2, and it is working perfectly.

If the current behavior is a bug, please provide the steps to reproduce.

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");

module.exports = (env = {}, argv = {}) => {
    console.log(`Environment: ${argv.mode}`);

    const libPath = path.resolve(__dirname, "../wwwroot/lib");
    const distPath = path.resolve(__dirname, "../wwwroot/dist");
    const isProd = argv.mode === "production";

    return {
        watch: !isProd,
        watchOptions: {
            ignored: /node_modules/
        },
        mode: argv.mode || "development",
        entry: {
            main: ["./src/index.tsx"],
            batches: ["./src/batches.tsx"]
        },
        devtool: isProd ? false : "inline-source-map",
        plugins: [
            new CopyPlugin({
                patterns: [
                    { from: `./node_modules/react/umd/react.${isProd ? "production.min" : "development"}.js`, to: libPath + "/react.js" },
                    { from: `./node_modules/react-dom/umd/react-dom.${isProd ? "production.min" : "development"}.js`, to: libPath + "/react-dom.js" }
                ]
            })
        ],
        output: {
            filename: "[name].js",
            path: distPath
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        "style-loader",
                        "css-loader"
                    ]
                },
                {
                    test: /\.(ts|js)x?$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-env",
                                "@babel/preset-react",
                                "@babel/preset-typescript"
                            ]
                        }
                    }
                }
            ]
        },
        resolve: {
            extensions: [".tsx", ".ts", ".js"]
        },
        externals: {
            "react": "React",
            "react-dom": "ReactDOM"
        }
    };
};

{
    "name": "my-web",
    "version": "0.0.1",
    "scripts": {
        "build": "webpack --mode development --watch --progress"
    },
    "private": true,
    "dependencies": {
        "@fluentui/react-icons-northstar": "^0.51.2",
        "@fluentui/react-northstar": "^0.51.2",
        "@microsoft/teams-js": "^1.8.0",
        "@progress/kendo-data-query": "^1.5.4",
        "@progress/kendo-drawing": "^1.9.3",
        "@progress/kendo-licensing": "^1.0.2",
        "@progress/kendo-react-animation": "^4.0.0",
        "@progress/kendo-react-data-tools": "^4.0.0",
        "@progress/kendo-react-dateinputs": "^4.0.0",
        "@progress/kendo-react-dropdowns": "^4.0.0",
        "@progress/kendo-react-grid": "^4.0.0",
        "@progress/kendo-react-inputs": "^4.0.0",
        "@progress/kendo-react-intl": "^4.0.0",
        "@progress/kendo-theme-bootstrap": "^4.23.0",
        "bootstrap": "^4.5.3",
        "dropzone": "^5.7.2",
        "jquery": "^3.5.1",
        "jquery-ajax-unobtrusive": "^3.2.6",
        "jquery-validation": "^1.19.2",
        "jquery-validation-unobtrusive": "^3.2.11",
        "msteams-react-base-component": "^2.2.0",
        "popper.js": "^1.16.1",
        "react": "^16.14.0",
        "react-dom": "^16.14.0"
    },
    "devDependencies": {
        "@babel/core": "^7.12.3",
        "@babel/plugin-transform-runtime": "^7.12.1",
        "@babel/preset-env": "^7.12.1",
        "@babel/preset-react": "^7.12.1",
        "@babel/preset-typescript": "^7.12.1",
        "@babel/runtime": "^7.12.1",
        "@types/jquery": "^3.5.4",
        "@types/prop-types": "^15.7.3",
        "@types/react": "^16.9.55",
        "@types/react-dom": "^16.9.9",
        "@typescript-eslint/eslint-plugin": "^4.6.0",
        "@typescript-eslint/parser": "^4.6.0",
        "babel-loader": "^8.1.0",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "copy-webpack-plugin": "^6.2.1",
        "css-loader": "^5.0.0",
        "eslint": "^7.12.1",
        "eslint-plugin-react": "^7.21.5",
        "eslint-plugin-react-hooks": "^4.2.0",
        "node-sass": "^4.14.1",
        "rimraf": "^3.0.2",
        "style-loader": "^2.0.0",
        "typescript": "^4.0.5",
        "webpack": "^4.44.2",
        "webpack-cli": "^4.1.0"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ]
}

What is the expected behavior?
Every time I change my .tsx file, Webpack 5 should detect the change, and initiate the rebuild process.

Other relevant information:
webpack version: 5.3.2
Node.js version: 12.18.4
npm version: 6.14.8
Operating System: Windows 10 Enterprise 20H2
Additional tools:

[webpack-bot]

For maintainers only:

• webpack-4
• webpack-5
• bug
• critical-bug
• enhancement
• documentation
• performance
• dependencies
• question

[alexander-akait]

Please create reproducible test repo, all works fine locally

[Knagis]

i have observed something like this a few times. the watch build triggered but the build output said that everything is unchanged/emitted from cache.
usually went away after restarting webpack process.

[DaleyKD]

@evilebottnawi - I will try, but it's going to be a while when I can find some time to do so.
@Knagis - Yeah. I cancel the watch (Ctrl+C), do a build again (I'm using npm run build), and it works great the first time, then the first watch time, then I have to Ctrl+C again and rinse/repeat. Been using 4.44.2 all day now without issue.

[alexander-akait]

@DaleyKD

@evilebottnawi - I will try, but it's going to be a while when I can find some time to do so.

Unfortunately, then we have to close the problem, we cannot fix something somewhere, yes, it is likely that there is a bug somewhere, but without reproduce it will be keeping here forever

[alexander-akait]

@DaleyKD Can you try webpack/watchpack#179?

[DaleyKD]

@evilebottnawi - I was just now able to get back around to this. I wasn't sure how to specifically try the PR you linked, but I did update to webpack 5.4 today, and it seems better. I'll close this for now. If I see anything start to happen again, I'll find time to get you a repo.

Thanks for your hard work! It's greatly appreciated.

[alexander-akait]

@DaleyKD Yes, feel free to open new issue(s) if you faced with problems

[Serivy]

Just to add to this issue incase someone comes across this like I did, I upgraded to webpack 5 and had this exact same problem.
It turned out to be a ts-loader option: experimentalWatchApi being set to true.
{ test: /\.tsx?$/, loader: "ts-loader", options: { transpileOnly : false, experimentalWatchApi: true } },
This flag did work in webpack 4, but likely it's a loader issue. Undecided if i will raise an issue over at ts-loader as there are a few issues which seem to imply that experimentalWatchApi is pointless with webpack.

Before i realized this, I did make a small repo which reproduced it if anyone's interested:
https://github.com/Serivy/webpack5tswatchonceissue

[sokra]

Just to add to this issue incase someone comes across this like I did, I upgraded to webpack 5 and had this exact same problem.
It turned out to be a ts-loader option: experimentalWatchApi being set to true.
{ test: /\.tsx?$/, loader: "ts-loader", options: { transpileOnly : false, experimentalWatchApi: true } },
This flag did work in webpack 4, but likely it's a loader issue. Undecided if i will raise an issue over at ts-loader as there are a few issues which seem to imply that experimentalWatchApi is pointless with webpack.

Before i realized this, I did make a small repo which reproduced it if anyone's interested:
https://github.com/Serivy/webpack5tswatchonceissue

@johnnyreilly

[johnnyreilly]

I'd avoid using experimentalWatchApi: true at present - it doesn't perform in the way hoped. There's a discussion here:

TypeStrong/ts-loader#1159 (comment)

cc @appzuka @sheetalkamat