[Bug]: Babel watch is broken for multiple subdirectories on 7.17.X

[faow]

💻

• Would you like to work on a fix?

How are you using Babel?

@babel/cli

Input code

https://github.com/faow/babel_test

Configuration file name

No response

Configuration

{
    "ignore": [
        "**/*.d.ts",
        "**/node_modules/**"
    ],
    "presets": [
        "@babel/preset-typescript"
    ]
}

Current and expected behavior

Current Behaviour:

If you add --watch to the compiler and have multiple subdirectories, the watcher compiles every edited file to the input and output directory.

It seems like multiple watchers are spawned. For every subdirectory the same file gets compiled again.

Babel without watch

 > npx babel "*/src" --out-dir ../webapp --source-maps true --extensions ".ts" --copy-files --include-dotfiles --relative --verbose

subFolder1\src\test1.ts -> subFolder1\webapp\test1.js
subFolder2\src\test2.ts -> subFolder2\webapp\test2.js
Successfully compiled 2 files with Babel (444ms).

Babel with watch initial compilation (working)

 > npx babel "*/src" --out-dir ../webapp --source-maps true --extensions ".ts" --copy-files --include-dotfiles --relative --watch --verbose

subFolder1\src\test1.ts -> subFolder1\webapp\test1.js
subFolder2\src\test2.ts -> subFolder2\webapp\test2.js
Successfully compiled 2 files with Babel (576ms).

Babel with watch: compilation after editing a file (not working)

subFolder1\src\test1.ts -> subFolder1\webapp\test1.js
subFolder1\src\test1.ts -> subFolder1\src\test1.js

The second compilation should not happen.

Babel with watch and 3 subfolders: Initial and editing a file

For this case simple add another subfolder to the github sample project.

> npx babel "*/src" --out-dir ../webapp --source-maps true --extensions ".ts" --copy-files --include-dotfiles --relative --watch --verbose

subFolder1\src\test1.ts -> subFolder1\webapp\test1.js
subFolder2\src\test2.ts -> subFolder2\webapp\test2.js
subFolder3\src\test3.ts -> subFolder3\webapp\test3.js
Successfully compiled 3 files with Babel (420ms).
subFolder3\src\test3.ts -> subFolder3\src\test3.js
subFolder3\src\test3.ts -> subFolder3\src\test3.js
subFolder3\src\test3.ts -> subFolder3\webapp\test3.js

The first and second compilation should not happen.

Expected behaviour:
With

• "@babel/cli": "7.16.8"
• "@babel/core": "7.16.12"

it is working as expected. Just install the mentioned versions to the github sample project.

> npx babel "*/src" --out-dir ../webapp --source-maps true --extensions ".ts" --copy-files --include-dotfiles --relative --watch --verbose

subFolder1\src\test1.ts -> subFolder1\webapp\test1.js
subFolder2\src\test2.ts -> subFolder2\webapp\test2.js
subFolder3\src\test3.ts -> subFolder3\webapp\test3.js
Successfully compiled 3 files with Babel (423ms).
subFolder2\src\test2.ts -> subFolder2\webapp\test2.js
Successfully compiled 1 file with Babel (109ms).

Environment

System:

• OS: Windows 10 10.0.19043

Binaries:

• Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
• npm: 8.3.2 - C:\Program Files\nodejs\npm.CMD

npmPackages:

• @babel/cli: 7.17.0 => 7.17.0
• @babel/core: 7.17.2 => 7.17.2
• @babel/preset-typescript: 7.16.7 => 7.16.7

Possible solution

No response

Additional context

No response

[babel-bot]

Hey @faow! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[JLHwung]

This is a regression introduced in #14065, where we merged multiple separate watcher into one (to share the external deps map) but the merged watcher has registered multiple listeners.

[nicolo-ribaudo]

Fixes in v7.17.6

[faow]

Working on our side. Thank you!