Infinite reload with CopyWebpackPlugin

[PierBJX]

Bug report

Webpack dev server reloads infinitely after changes in the src code when I use CopyWebpackPlugin with requirejs such like that:

    new CopyPlugin({
      patterns: [
        {
          from: 'requirejs/**/*',
          to: '3rdparty',
          context: '../../node_modules',
        },
      ],
    }),

Here are the versions I have:

    "copy-webpack-plugin": "^10.2.0",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2"

Actual Behavior

When I run the command: webpack serve and I modify the code.
Webpack recompiles but after it is written compiled successfully, it recompiles again and again...

Expected Behavior

I should recompile only once after change done in the src code.

How Do We Reproduce?

You can find here a repo to reproduce it.

• Run webpack serve
• Change the src code (example.js) and save
• You have to try several times in a row to change the code, generally it does not happen the first time but after several changes (last time I had to change 10 times the src code to reproduce the infinite reload)

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 12.98 GB / 31.73 GB
  Binaries:
    Node: 14.17.5 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.2.0 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Chrome: 97.0.4692.99
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.76)
    Internet Explorer: 11.0.19041.1202
  Packages:
    copy-webpack-plugin: ^7.0.0 => 7.0.0
    fork-ts-checker-webpack-plugin: ^6.5.0 => 6.5.0
    html-webpack-plugin: ^5.5.0 => 5.5.0
    raw-loader: ^4.0.2 => 4.0.2
    ts-loader: ^9.2.6 => 9.2.6
    webpack: ^5.64.4 => 5.64.4
    webpack-cli: ^4.9.1 => 4.9.1
    webpack-dev-server: ^4.7.2 => 4.7.3

[alexander-akait]

Can you provide npx webpack-cli info? Do you use macos? I can't reproduce locally, tried a lot of time

[PierBJX]

I updated the description. What do you mean by macos ?

[alexander-akait]

Can you reproduce the problem using given example of repo? I can't, maybe you can record video/screenshots?

[PierBJX]

That's weird, I reproduced the problem with the repo I gave you. I recorded my screen to show you (sorry I had to split if not the file was too big):

webpack_1.mp4

webpack_2.mp4

webpack_3.mp4

webpack_4.mp4

[alexander-akait]

Can you try to reproduce it without VS code (using any editor)?

[PierBJX]

I tried with powershell to run the command and Notepad++ to edit the file and at the end I had the same infinite reload.

[alexander-akait]

hm, sorry, I can't help, I don't even reproduce try try to debug and look that is file raise change event

[PierBJX]

Yes sure no problem ;)
Do you think it could be linked to this?

[alexander-akait]

I think no, problems somewhere else

[gebeer]

I am experiencing same issue. Only for me dev server goes into infinite compile loop right after starting it up. When I disable CopyWebpackPlugin, there is no infinite loop.

Environment:
OS: Arch Linux
node v16.13.1 (npm v8.15.1)

Installed packages:

  "devDependencies": {
    "@babel/core": "^7.18.9",
    "@babel/preset-env": "^7.18.9",
    "autoprefixer": "^10.4.7",
    "babel-loader": "^8.2.5",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.1",
    "cssnano": "^5.1.12",
    "mini-css-extract-plugin": "^2.6.1",
    "postcss": "^8.4.14",
    "postcss-import": "^14.1.0",
    "postcss-loader": "^7.0.1",
    "postcss-preset-env": "^7.7.2",
    "tailwindcss": "^3.1.6",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3",
    "webpack-manifest-plugin": "^5.0.0"
  }

devServer config:

  devServer: {
    host: "localhost",
    port: 8082,
    https: false,
    hot: false,
    liveReload: true,
    open: true,
    proxy: {
      "*": {
        target: "http://mydomain.localhost/",
        changeOrigin: true,
      },
    },
    watchFiles: {
      paths: ["site/templates/**/*.php"],
      options: {
        // ignored: ['node_modules'],
        // usePolling: true,
        // ignorePermissionErrors: true,
      },
    },
  },

I can provide a testing repo if you can fire up an external server in your environment providing the PHP app at mydomain.localhost. Please let me know.

UPDATE
After adding

    devMiddleware: {
      writeToDisk: true,
    },

to the devServer config, no more infinite loop.
Shouldn't this be default behaviour when liveReload: true and hot: false?

[PierBJX]

In my case, adding this property does not fix it :/

[PierBJX]

@alexander-akait. Is there a way to know which file makes the reload ?

[alexander-akait]

@PierBJX hm, you should see this in console https://github.com/webpack/webpack-dev-server/blob/master/client-src/index.js#L225

[PierBJX]

@alexander-akait
This is what I have in the console:

 [webpack-dev-server] "C:\Users\212747277\Documents\Code\Edison\Workspace Application\src\session\session-activity-decorator.ts" from static directory was changed. Reloading...
 [webpack-dev-server] "C:\Users\212747277\Documents\Code\Edison\Workspace Application\src\session\session-activity-decorator.ts" from static directory was changed. Reloading...
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] App updated. Recompiling...
 Navigated to http://localhost:9000/workspace-application/?host=10.135.253.14:32222
 [webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
 [HMR] Waiting for update signal from WDS...
 [webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
 [HMR] Waiting for update signal from WDS...
 [webpack-dev-server] "C:\Users\212747277\Documents\Code\Edison\Workspace Application\src\session\session-activity-decorator.ts" from static directory was changed. Reloading...
 [webpack-dev-server] "C:\Users\212747277\Documents\Code\Edison\Workspace Application\src\session\session-activity-decorator.ts" from static directory was changed. Reloading...
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] App updated. Recompiling...
 Navigated to http://localhost:9000/workspace-application/?host=10.135.253.14:32222[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
 [HMR] Waiting for update signal from WDS...
 [webpack-dev-server] Nothing changed.
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] Nothing changed.
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] Nothing changed.
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] Nothing changed.
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] Nothing changed.
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] Nothing changed.
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] Nothing changed.
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
 [HMR] Waiting for update signal from WDS...
 [webpack-dev-server] Nothing changed.
 [webpack-dev-server] App updated. Recompiling...
 [webpack-dev-server] Nothing changed.
 [webpack-dev-server] Nothing changed.

What is weird is that it goes to App updated. Recompiling.... Looking at the file you share, it is in the method invalid(). Is there a way to know what called this method? And why?

[alexander-akait]

@gebeer Do you have copy plugin? And how you use session-activity-decorator.ts? You can create a private repo and invite me and I will try to help you