Infinite reload with CopyWebpackPlugin

PierBJX commented 2 years ago

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 commented 2 years ago

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

PierBJX commented 2 years ago

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

alexander-akait commented 2 years ago

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

PierBJX commented 2 years ago

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 commented 2 years ago

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

PierBJX commented 2 years ago

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 commented 2 years ago

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

PierBJX commented 2 years ago

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

alexander-akait commented 2 years ago

I think no, problems somewhere else

gebeer commented 2 years ago

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 commented 2 years ago

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

PierBJX commented 2 years ago

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

alexander-akait commented 2 years ago

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

PierBJX commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

PierBJX commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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

PierBJX commented 1 year ago

@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 commented 1 year ago

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.

ToastyMallows commented 1 year ago

For what it's worth, I'm NOT using the CopyWebpackPlugin and I ran into this infinite reload issue. The fix was not loading from localhost:8080, and instead from my local IP, reported in the webpack-dev-server output: On Your Network (IPv4).

I feel like that points to this not being an issue with CopyWebpackPlugin.

My issue was it was only happening when launching from VSCode:

{
  "version": "0.2.0",
  "configurations": [
  {
    "type": "chrome",
    "request": "launch",
    "name": "Debug",
    "url": "http://localhost:8080",  // switch to IPv4 address instead of localhost
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true
  }
 ]
}

When I brought up the localhost URL in my normal Chrome browsing window it was no problem.

Hopefully this helps someone.

VSCode Version: 1.79.0 (system setup)
Commit: b380da4ef1ee00e224a15c1d4d9793e27c2b6302
Date: 2023-06-07T14:26:35.552Z
Electron: 22.5.5
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.19045

"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^4.15.0",
"webpack-merge": "^5.8.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.1",
"css-loader": "^5.2.6",
"style-loader": "^2.0.0",
"ts-loader": "^9.4.2",
"typescript": "^4.9.5",

webpack / webpack-dev-server