Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

WKND client side libraries npm run watch issues


Level 1

Hello, I'm trying to follow the WKND tutorial however I am having issues with the client side libraries section. When I use npm run watch I get the following output and my changes aren't reflected in AEM:

\Documents\aem-sdk\code\aem-guides-wknd\ui.frontend>npm run watch

> aem-wknd-theme@1.0.0 watch
> webpack-dev-server --config ./ --env writeToDisk & chokidar -c "clientlib" ./dist & aemsync -w ../ui.apps/src/main/content

Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly:
<i> [webpack-dev-server] [HPM] Proxy created: /content,/etc.clientlibs,/libs  -> http://localhost:4502
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4):
<i> [webpack-dev-server] Content not from webpack is served from '\aem-sdk\code\aem-guides-wknd\ui.frontend\public' directory
assets by path clientlib-site/images/ 364 KiB
  assets by path clientlib-site/images/country-flags/*.svg 336 KiB 7 assets
  assets by path clientlib-site/images/favicons/*.png 26.6 KiB 7 assets
  asset clientlib-site/images/loading-icon.svg 659 bytes [emitted] [from: src/main/webpack/resources/images/loading-icon.svg] [copied]
assets by path clientlib-site/fonts/ 22.5 KiB
  asset clientlib-site/fonts/wknd-icon-font.svg 12.6 KiB [emitted] [from: src/main/webpack/resources/fonts/wknd-icon-font.svg] [copied]
  asset clientlib-site/fonts/wknd-icon-font.ttf 4.88 KiB [emitted] [from: src/main/webpack/resources/fonts/wknd-icon-font.ttf] [copied]
  asset clientlib-site/fonts/wknd-icon-font.woff 4.95 KiB [emitted] [from: src/main/webpack/resources/fonts/wknd-icon-font.woff] [copied]
assets by path clientlib-site/js/*.js 570 KiB
  asset clientlib-site/js/site.bundle.js 54.4 KiB [emitted] (name: site)
  asset clientlib-site/js/vendors-node_modules_jquery_dist_jquery_js-node_modules_webpack-dev-server_client_index_js_pr-fcbd70.bundle.js 516 KiB [emitted] (id hint: vendors)
asset clientlib-site/manifest.json 1.48 KiB [emitted] [from: src/main/webpack/resources/manifest.json] [copied]
asset clientlib-site/site.css 362 KiB [emitted] (name: site)
asset index.html 72.2 KiB [emitted]
Entrypoint site 933 KiB = clientlib-site/js/vendors-node_modules_jquery_dist_jquery_js-node_modules_webpack-dev-server_client_index_js_pr-fcbd70.bundle.js 516 KiB clientlib-site/site.css 362 KiB clientlib-site/js/site.bundle.js 54.4 KiB

LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./node_modules/glob-import-loader/index.js??ruleSet[1].rules[1].use[4]!./src/main/webpack/site/main.scss
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w> Recommendation: math.div($gutter-padding, 2) or calc($gutter-padding / 2)
<w> More info and automated migrator:
<w> src\main\webpack\components\title\scss\styles\_label.scss 4:23  @Import
<w> src\main\webpack\site\main.scss 12:11931                        root stylesheet

2022-09-26 15:29:43: webpack 5.68.0 compiled successfully in 6979 ms
1 Reply