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):

https://user-images.githubusercontent.com/22519163/152191726-0e5a38e4-379c-41cd-8cc2-18439e624816.mp4

https://user-images.githubusercontent.com/22519163/152191753-cc685c06-a4f9-46fd-bbb1-22714a54e10e.mp4

https://user-images.githubusercontent.com/22519163/152191760-b79caf97-ba19-4fa4-b32d-2c6c550e5156.mp4

https://user-images.githubusercontent.com/22519163/152191808-d71c442d-eaaf-45db-b7a8-ac94b1aac110.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

[PierBJX]

@alexander-akait , gebeer succeeded to fix it by adding writeToDisk: true. Unfortunately, it is a project with my company so I can not shared with someone the project. However, maybe we could have a team call or something similar, it will be easier to show you?

[gebeer]

@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

Thanks for the offer. I solved it, like @PierBJX wrote. Yes, I am using copy plugin.

But, when I use my machines IP instead of 'localhost' to make the app available in local network, then the reload loop is back again. So it might be something related to the http-proxy-middleware package. This is just a guess. Didn't find the time to look deeper into it.

[PierBJX]

But, when I use my machines IP instead of 'localhost' to make the app available in local network, then the reload loop is back again. So it might be something related to the http-proxy-middleware package.

It sounds weird if it is related to localhost. Indeed, even when I do not open the page in the browser, I can have the reload in the command line. Like in the video.

[alexander-akait]

@PierBJX Sorry for delay (I got Covid), if you disable copy plugin do you have infinity reload? Copy plugin get base from glob (i.e. dir/dir/**/* - dir/dir and watch it, so if someone writes to this directory you can faced with infinity reload)

[PierBJX]

@alexander-akait No problem :) If I disable copy plugin I do not have infinite reload anymore. And an additional interesting thing is when I run with WSL2 my project, I do not have infinite reload anymore. It seems related to windows.

[alexander-akait]

@PierBJX Yeah, WSL2 has some bugs with fs... Anyway if you provide example of the problem I will investigate it and report to Node.js or WSL developers (other issues have already been reported)

[PierBJX]

@alexander-akait In fact, it is the contrary. Using, WSL2 I do not have the issue. However, on Windows I do have the problem.

[alexander-akait]

hm, sounds like it can be bug in WSL2, need debug, I already reported a lot of bugs in WSL (and they were fixed), but debugging them is not easy

[alexander-akait]

Minimum - can you debug file which cause reload? Just put console.log inside hooks

[PierBJX]

@alexander-akait In fact, I do NOT have bug in WSL 2. If nodejs is installed on WSL2 and I use it => no issue. But if I use nodejs from windows I have the infinite reload. You can see previous comments with video I attached

[alexander-akait]

@PierBJX hm, very strange, maybe you can try to create reproducible test repo, I really want to investigate it, you can write me in twitter/telegram directly and do not publish it here, I can sign NDA if you need it

[PierBJX]

@alexander-akait I already provide a reproductible test repo in the description of the issue. But if you want to investigate a bit deeper, we can talk on twitter ;)

[alexander-akait]

@PierBJX as I can see it happens not on first change, after multiple, right?

[PierBJX]

@alexander-akait In the reproductible repo yes. But with my private project it occurs at the first or second times most of the time (the project is bigger).

[aualdrich]

Not sure if it helps anyone else, but I had a similar issue where webpack was endlessly recompiling in dev. Finding this ticket clued me into the issue:

new CopyWebpackPlugin({
        patterns: [
          {
            from: "manifest*.xml",
            to: "[name]" + "[ext]",
            transform(content) {
              if (dev) {
                return content;
              } else {
                return content.toString().replace(new RegExp(urlDev, "g"), url);
              }
            },
          },
        ]

In my case, the rule wasn't needed anyway. Taking it out fixed my endless loop. This was a Microsoft Word Task Pane React add-in that was generated using yeoman. I think the issue had something to do with trying to run webpack watch while also running a node server on localhost:3000 but I never did figure it out.