fix(tasks): update styles watcher to support chokidar v4 by Hugoer · Pull Request #141 · Netcentric/fe-build

Hugoer · 2026-03-11T11:25:16Z

This PR fixes an issue with SCSS file watchers caused by Chokidar version > 3. In versions 4+, Chokidar no longer supports glob patterns directly.

Description

Chokidar v4 removed support for glob patterns in watch().
This PR updates the styles watcher to handle that breaking change by pre-resolving SCSS files via fast-glob before passing them to chokidar.

Related Issue

Fixes #138

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My code follows the code style of this project.
I have read the CONTRIBUTING document.
All new and existing tests passed.

… version 4.0.3

easingthemes · 2026-03-27T11:18:40Z

Issues Found

Missing glob import (Blocker)
The diff adds await glob(pattern, ...) but there’s no visible require('fast-glob') or const { glob } = require('fast-glob') import at the top of tasks/styles.js. The existing file only imports path, log, generateEntries, and renderStyles. This will throw a ReferenceError: glob is not defined at runtime.
Fix needed: Add const { glob } = require('fast-glob'); (or const glob = require('fast-glob');) at the top of the file.
async Promise constructor anti-pattern (Minor)
The promise callback is changed to new Promise(async (resolve) => { ... }). This is a well-known anti-pattern because:
∙ Exceptions thrown inside an async executor are not caught by the Promise — they become unhandled rejections instead of rejecting the returned promise
∙ The existing try/catch mitigates this partially, but any error from await glob(...) that escapes the catch block will be silently swallowed
Suggested improvement: Either:
∙ Move the async logic before the Promise constructor, or
∙ Use async/await throughout and remove the new Promise wrapper entirely (preferred — the function could just be module.exports = async (config) => { ... })
Watcher won’t detect new SCSS files (Design consideration)
Since fast-glob resolves files once at startup, newly created SCSS files won’t be watched. The old glob-based approach (when it worked) would have picked up new files. This may be acceptable given the EMFILE constraints mentioned in Update chokidar usage to support v4 (glob patterns removal) #138, but it’s worth documenting as a known limitation.
Downgrade vs. upgrade reasoning (Minor)
The PR description says “downgraded chokidar from v5 to v4” but the title of Update chokidar usage to support v4 (glob patterns removal) #138 says “support v4.” The commit message says “update chokidar to version 4.0.3.” Since v5 existed before, this is technically a downgrade. Worth clarifying in the PR description whether v5 introduced other issues (the EMFILE problems mentioned in the issue?).
Verdict
Changes requested — The missing glob import (Rename template vars with fe-build one #1) is a runtime blocker that must be fixed before merge. The async Promise anti-pattern (Add package code #2) is worth addressing. Items Order imports alphabetically #3 and stylelint.config.js #4 are informational.

Hugoer · 2026-04-15T10:43:47Z

Thanks for reviewing!

changes made:

Removed new Promise(async ...) anti-pattern — the exported function is now async directly, so errors from await glob(...) and other async ops are properly propagated.
Replaced Promise.allSettled(...).then(...) with await in the non-watch branch — consistent async/await throughout.
Added a comment documenting the SCSS watcher limitation (new files not detected at runtime) as Dragan suggested.

The glob import was already present on line 2, so nothing to add there.

infloent · 2026-05-15T10:30:56Z

+        absolute: true
      });
+
+      const watcher = chokidar.watch(files, {


Instead of creating a huge static list of paths with glob why not use something like this which translates to the previous behavior?

chokidar.watch(config.general.sourcesPath, { ignored: (filePath, stats) => stats?.isFile() && !filePath.endsWith(`.${config.general.sourceKey}.scss`), ignoreInitial: true });

I saw the issue description after I left my comment. The why of the solution I think should be clearly stated also in the PR description in addition to the link to the issue.

The current proposal could seem to be the only alternative with chokidar.

infloent · 2026-05-17T18:51:15Z

+      // Note: fast-glob resolves files once at startup, so newly created SCSS files
+      // won't be picked up by the watcher without a restart. This is an accepted
+      // tradeoff to avoid EMFILE errors with recursive directory watching.
+      const files = await glob(pattern, {


For consistency and testing please try to reuse the generateEntries() util also for the watcher part.

The bellow example seem to work as intended:

const entries = generateEntries(config, 'scss'); // Build reverse map: absolute src path -> dest key const srcToDest = Object.fromEntries( Object.entries(entries).map(([dest, src]) => [src, dest]) ); const watcher = chokidar.watch(Object.values(entries), { ignoreInitial: true }); watcher.on('all', (event, file) => { const destFile = srcToDest[file]; if (!destFile) return; config.stylelint.failOnError = false; renderStyles(file, destFile, config); });

easingthemes

Approving — the async/await refactor is a real improvement and the fast-glob → array approach is the right shape for chokidar's post-v3 contract. Reuse of fast-glob (already used in utils/generateEntries.js) keeps the codebase consistent, and the inline comment about the new-file watcher limitation is the right call.

Left a few inline questions/suggestions — only the chokidar v5→v4 rationale (in package.json) is something I'd like clarified before merge; the rest are nice-to-haves or follow-ups.

easingthemes · 2026-05-21T12:00:48Z

    "autoprefixer": "^10.4.20",
    "babel-loader": "9.1.2",
-    "chokidar": "^5.0.0",
+    "chokidar": "^4.0.3",


Why downgrade to v4 specifically rather than staying on ^5.0.0?

main is on chokidar ^5.0.0. Both v4 and v5 dropped glob support in watch(), so the file-array fix in this PR works equally well on either. The PR title says "support chokidar v4" but this is technically a downgrade from what's currently on main.

Given the previous attempt was reverted (f5df235), reviewers will want the rationale spelled out — Node engine constraint? Aligning with the sass transitive? Something v5 broke? Or alternatively, keep ^5.0.0 since the new code is forward-compatible.

This is the one item I'd like resolved before merge.

easingthemes · 2026-05-21T12:00:48Z

+      const files = await glob(pattern, {
+        cwd: config.general.sourcesPath,
+        absolute: true
      });


Empty-array edge case. If glob(...) returns [] (e.g., a fresh project with no .source.scss files yet), chokidar.watch([]) is called and silently does nothing — while the log on line 11 still says "Watcher Sass / autoprefixer running...". A one-liner would help DX:

if (!files.length) { log(__filename, 'No SCSS sources found to watch', '', 'warn'); }

easingthemes · 2026-05-21T12:00:48Z

+        renderStyles(file, destFile, config);
+      });
+
+    } catch (e) {


Misleading catch message now that the try is wider. 'Something is missing, you need install dev dependencies for this.' made sense when require('chokidar') was the only failure mode. Now this also catches errors from await glob(...) (bad cwd, permissions, etc.).

Either narrow the try to just the require('chokidar'), or generalize the message — something like 'Failed to start SCSS watcher' would survive future refactors.

easingthemes · 2026-05-21T12:00:48Z

+          .basename(file)
+          .replace(config.general.sourceKey, config.general.bundleKey);
+
+        const destFile = path.join(relativePath, fileName);


Pre-existing, out of scope but trivial while you're here: config.stylelint.failOnError = false is set inside the 'all' event handler, so it re-mutates config on every file-change event. It should be set once before watcher.on(...) is registered. Not introduced by this PR — just noticed it while reviewing. Up to you whether to roll it in or leave for a follow-up.

easingthemes · 2026-05-21T12:00:48Z

-      Promise.allSettled(promises).then((results) => {
-        log(__filename, 'Styles done', '', 'info');
-        resolve();
+module.exports = async (config) => {


Regression test? This is the second attempt at this fix after f5df235 was reverted. A small jest test that mocks fast-glob + chokidar and asserts chokidar.watch is called with an array (not a glob string) would lock in the behavior and prevent a third revert cycle. Happy to leave this as a follow-up issue if you'd prefer to keep this PR tight.

fix(tasks): adjust styles watcher implementation & update chokidar to…

b6f9e27

… version 4.0.3

Hugoer assigned easingthemes Mar 11, 2026

Hugoer changed the title ~~fix(tasks): adjust styles watcher implementation~~ fix(tasks): update styles watcher to support chokidar v4 Apr 15, 2026

fix(utils): refactor watcher implementation and update chokidar usage

2feb61f

infloent reviewed May 15, 2026

View reviewed changes

infloent reviewed May 17, 2026

View reviewed changes

easingthemes approved these changes May 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tasks): update styles watcher to support chokidar v4#141

fix(tasks): update styles watcher to support chokidar v4#141
Hugoer wants to merge 2 commits into
Netcentric:mainfrom
Hugoer:Update-chokidar-usage-to-support-v4

Hugoer commented Mar 11, 2026 •

edited

Loading

Uh oh!

easingthemes commented Mar 27, 2026

Uh oh!

Hugoer commented Apr 15, 2026 •

edited

Loading

Uh oh!

infloent May 15, 2026

Uh oh!

infloent May 15, 2026

Uh oh!

infloent May 17, 2026

Uh oh!

easingthemes left a comment

Uh oh!

easingthemes May 21, 2026

Uh oh!

easingthemes May 21, 2026

Uh oh!

easingthemes May 21, 2026

Uh oh!

easingthemes May 21, 2026

Uh oh!

easingthemes May 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Hugoer commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Types of changes

Checklist:

Uh oh!

easingthemes commented Mar 27, 2026

Uh oh!

Hugoer commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

easingthemes left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Hugoer commented Mar 11, 2026 •

edited

Loading

Hugoer commented Apr 15, 2026 •

edited

Loading