adobe / adobe/aem-project-archetype
ui.frontend + "npm run watch" not working on Windows 11 (fix/workaround inside)
- Dominant language
- JavaScript
- Stars
- 596
- Forks
- 431
- Avg merge
- 10d 6h
- Merged PRs (30d)
- 1
Description
2 issues
1. npm-run-all command is used BUT it's not part of dev dependencies. I have to manually install it.
2. more importantly, I cannot get "npm run watch" to work at all
this is what I see in terminal AFTER changing some values in my SCSS file (like changing the text color to red)
> [webpack-dev-middleware] wait until bundle finished: /
assets by status 56.4 KiB [cached] 6 assets
assets by path . 244 KiB
asset clientlib-site/site.css 20.1 KiB [emitted] (name: site)
asset clientlib-site/site.js 224 KiB [emitted] (name: site)
Entrypoint site 244 KiB = clientlib-site/site.css 20.1 KiB clientlib-site/site.js 224 KiB
2024-05-21 18:39:39: webpack 5.91.0 compiled successfully in 402 ms
**After refreshing my browser tab, the text color has not changed.**
this is the original NPM script => "chokidar": "chokidar -c \"clientlib\" ./dist". I've noticed that changing the SCSS file does nothing to my "dist" folder. **it remained empty.**
After looking at the chokidar-cli README and this is what I've done to get it to work => **"chokidar": "chokidar ./src -c \"webpack --config ./webpack.prod.js && clientlib --verbose\"",**
With my changes...
- I am now watching for changes in the src folder
- chokidar-cli will now run the whole NPM "prod" script instead of just the aem-clientlib-generator script
EDIT/UPDATE:
- I just tried the original "npm run watch" in ubuntu 24.04 and it's still not working.
- I changed the "chokidar" script to the one I mentioned above and it's working now.
Contributor guide
Research direction
Start with the npm scripts, the chokidar command, webpack.prod.js, and the src/dist paths described in the issue. Verify the watch flow on Windows 11 and Ubuntu after an SCSS change; done means npm run watch rebuilds the assets, populates dist, and the browser reflects the change, with npm-run-all available from the declared development dependencies.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, scss, webpack
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100