Infinite reload with CopyWebpackPlugin #4232

PierBJX · 2022-01-29T22:55:49Z

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

The text was updated successfully, but these errors were encountered:

alexander-akait · 2022-01-30T12:01:40Z

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

PierBJX · 2022-01-30T17:32:15Z

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

alexander-akait · 2022-01-30T17:35:29Z

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

PierBJX · 2022-02-02T16:10:22Z

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 · 2022-02-02T16:19:23Z

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

PierBJX · 2022-02-02T16:39:37Z

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 · 2022-02-02T16:42:54Z

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

PierBJX · 2022-02-02T16:44:09Z

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

alexander-akait · 2022-02-02T16:55:24Z

I think no, problems somewhere else

gebeer · 2022-08-01T04:19:49Z

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 · 2022-08-01T13:32:23Z

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

PierBJX · 2022-08-01T13:33:02Z

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

alexander-akait · 2022-08-10T13:09:41Z

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

PierBJX · 2022-08-11T11:52:07Z

@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 · 2022-08-12T11:51:30Z

@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 · 2022-08-12T13:37:50Z

@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 · 2022-08-15T00:54:52Z

@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 · 2022-08-15T09:38:40Z

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 · 2022-08-29T14:18:38Z

@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 · 2022-09-05T12:31:04Z

@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 · 2022-09-05T17:10:07Z

@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 · 2022-10-07T17:16:22Z

@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 · 2022-10-07T17:53:12Z

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 · 2022-10-07T17:54:05Z

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

PierBJX · 2022-10-10T08:40:10Z

@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 · 2022-10-10T19:00:16Z

@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 · 2022-10-13T17:37:27Z

@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 · 2022-10-14T16:35:43Z

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

PierBJX · 2022-10-15T16:55:15Z

@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 · 2023-06-06T01:57:54Z

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 · 2023-06-13T04:24:33Z

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",

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Infinite reload with CopyWebpackPlugin #4232

Infinite reload with CopyWebpackPlugin #4232

PierBJX commented Jan 29, 2022 •

edited

Loading

alexander-akait commented Jan 30, 2022

PierBJX commented Jan 30, 2022 •

edited

Loading

alexander-akait commented Jan 30, 2022

PierBJX commented Feb 2, 2022

alexander-akait commented Feb 2, 2022

PierBJX commented Feb 2, 2022

alexander-akait commented Feb 2, 2022 •

edited

Loading

PierBJX commented Feb 2, 2022 •

edited

Loading

alexander-akait commented Feb 2, 2022 •

edited

Loading

gebeer commented Aug 1, 2022 •

edited

Loading

PierBJX commented Aug 1, 2022

PierBJX commented Aug 1, 2022

alexander-akait commented Aug 10, 2022

PierBJX commented Aug 11, 2022 •

edited

Loading

alexander-akait commented Aug 12, 2022

PierBJX commented Aug 12, 2022

gebeer commented Aug 15, 2022

PierBJX commented Aug 15, 2022

alexander-akait commented Aug 29, 2022

PierBJX commented Sep 5, 2022

alexander-akait commented Sep 5, 2022

PierBJX commented Oct 7, 2022

alexander-akait commented Oct 7, 2022

alexander-akait commented Oct 7, 2022

PierBJX commented Oct 10, 2022

alexander-akait commented Oct 10, 2022

PierBJX commented Oct 13, 2022 •

edited

Loading

alexander-akait commented Oct 14, 2022

PierBJX commented Oct 15, 2022 •

edited

Loading

aualdrich commented Jun 6, 2023 •

edited

Loading

ToastyMallows commented Jun 13, 2023

Infinite reload with CopyWebpackPlugin #4232

Infinite reload with CopyWebpackPlugin #4232

Comments

PierBJX commented Jan 29, 2022 • edited Loading

Bug report

Actual Behavior

Expected Behavior

How Do We Reproduce?

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

alexander-akait commented Jan 30, 2022

PierBJX commented Jan 30, 2022 • edited Loading

alexander-akait commented Jan 30, 2022

PierBJX commented Feb 2, 2022

alexander-akait commented Feb 2, 2022

PierBJX commented Feb 2, 2022

alexander-akait commented Feb 2, 2022 • edited Loading

PierBJX commented Feb 2, 2022 • edited Loading

alexander-akait commented Feb 2, 2022 • edited Loading

gebeer commented Aug 1, 2022 • edited Loading

PierBJX commented Aug 1, 2022

PierBJX commented Aug 1, 2022

alexander-akait commented Aug 10, 2022

PierBJX commented Aug 11, 2022 • edited Loading

alexander-akait commented Aug 12, 2022

PierBJX commented Aug 12, 2022

gebeer commented Aug 15, 2022

PierBJX commented Aug 15, 2022

alexander-akait commented Aug 29, 2022

PierBJX commented Sep 5, 2022

alexander-akait commented Sep 5, 2022

PierBJX commented Oct 7, 2022

alexander-akait commented Oct 7, 2022

alexander-akait commented Oct 7, 2022

PierBJX commented Oct 10, 2022

alexander-akait commented Oct 10, 2022

PierBJX commented Oct 13, 2022 • edited Loading

alexander-akait commented Oct 14, 2022

PierBJX commented Oct 15, 2022 • edited Loading

aualdrich commented Jun 6, 2023 • edited Loading

ToastyMallows commented Jun 13, 2023

PierBJX commented Jan 29, 2022 •

edited

Loading

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

PierBJX commented Jan 30, 2022 •

edited

Loading

alexander-akait commented Feb 2, 2022 •

edited

Loading

PierBJX commented Feb 2, 2022 •

edited

Loading

alexander-akait commented Feb 2, 2022 •

edited

Loading

gebeer commented Aug 1, 2022 •

edited

Loading

PierBJX commented Aug 11, 2022 •

edited

Loading

PierBJX commented Oct 13, 2022 •

edited

Loading

PierBJX commented Oct 15, 2022 •

edited

Loading

aualdrich commented Jun 6, 2023 •

edited

Loading