WKND tutorial issue: no files generated in clientlibs when I execute npm run watch in ui.frontend folder

[James_shan]

I am new to AEM, and try to use official tutorial WKND for learning, in component basic page I get a blocker in "Client-Side Libraries" section, link below FYI

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-devel...

when I do some changes per as tutorial asked in ui.frontend folder and execute "npm run watch", the log in my terminal is different from tutorial, there is not any files generated in "ui.frontend/dist" folder or "ui.apps/.../clientlibs/clientlib-site/", so what steps am I missing?

james ui.frontend % npm run watch                 

> aem-maven-archetype@1.0.0 watch /Users/james/htdocs/aem-code/forest-wknd/ui.frontend
> npm-run-all --parallel start chokidar aemsyncro

> aem-maven-archetype@1.0.0 start /Users/james/htdocs/aem-code/forest-wknd/ui.frontend
> webpack-dev-server --open --config ./webpack.dev.js

> aem-maven-archetype@1.0.0 aemsyncro /Users/james/htdocs/aem-code/forest-wknd/ui.frontend
> aemsync -w ../ui.apps/src/main/content

> aem-maven-archetype@1.0.0 chokidar /Users/james/htdocs/aem-code/forest-wknd/ui.frontend
> chokidar -c "clientlib" ./dist

aemsync version 4.0.3

    Watch over: /Users/james/htdocs/aem-code/forest-wknd/ui.apps/src/main/content
       Targets: http://admin:admin@localhost:4502
       Exclude: **/jcr_root/*
                **/@(.git|.svn|.hg|target)
                **/@(.git|.svn|.hg|target)/**
      Interval: 300
  
Watching "./dist" ..
<i> [webpack-dev-server] [HPM] Proxy created: /content,/etc.clientlibs  -> http://localhost:4502
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8081/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.2.16:8081/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8081/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/public' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
assets by chunk 235 KiB (name: site)
  asset clientlib-site/site.css 8.45 KiB [emitted] (name: site)
  asset clientlib-site/site.js 226 KiB [emitted] (name: site)
asset clientlib-site/fonts/.gitkeep 1 bytes [emitted] [from: src/main/webpack/resources/fonts/.gitkeep] [copied]
asset clientlib-site/images/.gitkeep 1 bytes [emitted] [from: src/main/webpack/resources/images/.gitkeep] [copied]
asset index.html 8.52 KiB [emitted]
Entrypoint site 235 KiB = clientlib-site/site.css 8.45 KiB clientlib-site/site.js 226 KiB

WARNING in ./src/main/webpack/site/main.ts
Module Warning (from ./node_modules/glob-import-loader/index.js):
(Emitted value instead of an instance of Error) Could not find any files that matched the wildcard path.
NonErrorEmittedError: (Emitted value instead of an instance of Error) Could not find any files that matched the wildcard path.
    at Object.emitWarning (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/webpack/lib/NormalModule.js:601:16)
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/glob-import-loader/index.js:60:24
    at finishWithoutResolve (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/Resolver.js:372:11)
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/Resolver.js:461:15
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/Resolver.js:519:5
    at eval (eval at create (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/Resolver.js:519:5
    at eval (eval at create (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:89:43
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/Resolver.js:519:5

WARNING in ./src/main/webpack/site/main.ts
Module Warning (from ./node_modules/glob-import-loader/index.js):
(Emitted value instead of an instance of Error) Could not find any files that matched the wildcard path.
NonErrorEmittedError: (Emitted value instead of an instance of Error) Could not find any files that matched the wildcard path.
    at Object.emitWarning (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/webpack/lib/NormalModule.js:601:16)
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/glob-import-loader/index.js:60:24
    at finishWithoutResolve (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/Resolver.js:372:11)
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/Resolver.js:461:15
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/Resolver.js:519:5
    at eval (eval at create (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/Resolver.js:519:5
    at eval (eval at create (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:89:43
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/enhanced-resolve/lib/Resolver.js:519:5

WARNING in ./src/main/webpack/site/main.ts
Module Warning (from ./node_modules/glob-import-loader/index.js):
(Emitted value instead of an instance of Error) Empty results for "import "./**/*.js""
NonErrorEmittedError: (Emitted value instead of an instance of Error) Empty results for "import "./**/*.js""
    at Object.emitWarning (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/webpack/lib/NormalModule.js:601:16)
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/glob-import-loader/index.js:119:16
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Promise.all (index 1)
    at async Object.module.exports (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/glob-import-loader/index.js:80:25)

WARNING in ./src/main/webpack/site/main.ts
Module Warning (from ./node_modules/glob-import-loader/index.js):
(Emitted value instead of an instance of Error) Empty results for "import "./**/*.ts""
NonErrorEmittedError: (Emitted value instead of an instance of Error) Empty results for "import "./**/*.ts""
    at Object.emitWarning (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/webpack/lib/NormalModule.js:601:16)
    at /Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/glob-import-loader/index.js:119:16
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Promise.all (index 2)
    at async Object.module.exports (/Users/james/htdocs/aem-code/forest-wknd/ui.frontend/node_modules/glob-import-loader/index.js:80:25)

2023-06-21 21:30:30: webpack 5.86.0 compiled with 4 warnings in 7803 ms

[krishna_sai · Accepted solution]

Hi @James_shan , Can you try to comment or remove those imports from 2 imports from main.ts file and try to build again 
aem-guides-wknd\ui.frontend\src\main\webpack\site\main.ts

1. import "./**/*.js";
2. import "./**/*.ts";
   

Generally npm run watch will automatically compile when it detects changes but if it doesn't work you can use npm run dev which needs to be run when ever you make changes manually unlike watch command.

Hope this helps,

Krishna

[James_shan]

this doesn't resolve my issue, I am considering if it caused by the AEM version or npm-run-all version?

[sukghosa]

I am facing the exact same problem, commenting the below imports didn't work for me. 

1. import "./**/*.js";
2. import "./**/*.ts";

Any solution on this ?

[mbaleksandrov]

Hi @sukghosa ,

I had a similar issue with another project. I changed the watch script in the package.json as follows:

"watch": "webpack-dev-server --config ./webpack.dev.js --env writeToDisk & chokidar -c \"clientlib\" ./dist & aemsync -w ../ui.apps/src/main/content"

I hope this was helpful to you! 

cc @James_shan 

Best,
Milen

[ArthurLee]

This worked for me

[kautuk_sahni]

@ArthurLee We hope you found the AEM community valuable. We anticipate your return as either a learner or a contributor. The community benefits from SMEs like you. Please ask your AEM peers to join and contribute. Happy AEM learning!