Fail to compile and serve when importing helper classes in the component

[RodrigoMattosoSilveira]

I migrated a web component library built using [email protected] to [email protected], and started experiencing problems serving the web component, which were not observed when using [email protected].

I created a very simple version of this library to illustrate the problem, you can find it at nutmeg-web-component-library, with three essential elements:

• hello-world-simple: a vanilla [email protected] web component, with one minor change; the get template method calls a local method, renderWebComponent. It works fine.
• hello-world-complex: a vanilla [email protected] web component, with one minor change; the get template method calls a renderWebComponent method in another class, UtilClass1, located in a separate folder, util-lib/src. This fails to serve, see below for the logs.
• util-lib: a vanilla [email protected] web component, designed to hold the helper classes. Added util-class-1.ts, with the exported UtilClass1 helper class.

The challenge is that the recent nutmeg versions have abstracted so much from the developer, without proving enough documentation for me to hunt for the problem. I’m sure that if I read the source I’ll find the source, but I suspect that you will find the problem in two point four nanoseconds!

PS.: Two notes:

• I read the source, and did not find a simple way to address it, other than writing my own scripts and webpack.config.js, as it was done before. Perhaps you might have a more elegant suggestion.
• Until now I was using another application to visualize the component. I decided I like the simplicity of using the components' own index.html to valdate them before declaring them into an application.

[~/work/nutmeg-web-component-library/hello-world-complex]$ npm run start
11:15:44 - Starting compilation in watch mode...
11:15:45 - Found 0 errors. Watching for file changes.
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/rodrigomattososilveira/work/nutmeg-web-component-library/hello-world-complex
ℹ ｢wdm｣: wait until bundle finished: /
webpack v4.20.2
b4f2f30da6f232089fbd
size name module status
7.96 kB localhost:8080 (webpack)-dev-server/client?http://localhost:8080 built
3.67 kB overlay.js (webpack)-dev-server/client/overlay.js built
1.08 kB socket.js (webpack)-dev-server/client/socket.js built
509 B global.js (webpack)/buildin/global.js built
519 B module.js (webpack)/buildin/module.js built
170 B log$ (webpack)/hot sync nonrecursive ^./log$ built
52 B 0 multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./dist/hello-world-complex.js built ✖
1.64 kB dev-server.js (webpack)/hot/dev-server.js built
77 B emitter.js (webpack)/hot/emitter.js built
1.3 kB log-apply-result.js (webpack)/hot/log-apply-result.js built
1.13 kB log.js (webpack)/hot/log.js built
size name asset status
376 kB hello-world-complex.bundled hello-world-complex.bundled.js emitted
1.15 kB html index.html emitted
11:17:06 - Starting compilation in watch mode...
11:17:07 - Found 0 errors. Watching for file changes.
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/rodrigomattososilveira/work/nutmeg-web-component-library/hello-world-complex
ℹ ｢wdm｣: wait until bundle finished: /
webpack v4.20.2
b4f2f30da6f232089fbd
size name module status
7.96 kB localhost:8080 (webpack)-dev-server/client?http://localhost:8080 built
3.67 kB overlay.js (webpack)-dev-server/client/overlay.js built
1.08 kB socket.js (webpack)-dev-server/client/socket.js built
509 B global.js (webpack)/buildin/global.js built
519 B module.js (webpack)/buildin/module.js built
170 B log$ (webpack)/hot sync nonrecursive ^./log$ built
52 B 0 multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./dist/hello-world-complex.js built ✖
1.64 kB dev-server.js (webpack)/hot/dev-server.js built
77 B emitter.js (webpack)/hot/emitter.js built
1.3 kB log-apply-result.js (webpack)/hot/log-apply-result.js built
1.13 kB log.js (webpack)/hot/log.js built
size name asset status
376 kB hello-world-complex.bundled hello-world-complex.bundled.js emitted
1.15 kB html index.html emitted
Δt 621ms (16 modules hidden)
multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./dist/hello-world-complex.js
0:0 error Module not found: Error: Can't resolve
'/Users/rodrigomattososilveira/work/nutmeg-web-component-library/hello-world-complex/dist/hello-world-complex.js'
in
'/Users/rodrigomattososilveira/work/nutmeg-web-component-library/hello-world-complex'
✖ 1 problem (1 error, 0 warnings)
✖ ｢wdm｣: Hash: b4f2f30da6f232089fbd
Version: webpack 4.20.2
Time: 621ms
Built at: 2018-11-17 11:17:08
Asset Size Chunks Chunk Names
hello-world-complex.bundled.js 367 KiB hello-world-complex.bundled [emitted] hello-world-complex.bundled
index.html 1.13 KiB [emitted]
Entrypoint hello-world-complex.bundled = hello-world-complex.bundled.js
[./node_modules/ansi-html/index.js] 4.16 KiB {hello-world-complex.bundled} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {hello-world-complex.bundled} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {hello-world-complex.bundled} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {hello-world-complex.bundled} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./dist/hello-world-complex.js 52 bytes {hello-world-complex.bundled} [built]
[./node_modules/sockjs-client/dist/sockjs.js] 177 KiB {hello-world-complex.bundled} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {hello-world-complex.bundled} [built]
[./node_modules/url/url.js] 22.8 KiB {hello-world-complex.bundled} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.78 KiB {hello-world-complex.bundled} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {hello-world-complex.bundled} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {hello-world-complex.bundled} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {hello-world-complex.bundled} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {hello-world-complex.bundled} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {hello-world-complex.bundled} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.11 KiB {hello-world-complex.bundled} [built]
+ 12 hidden modules
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./dist/hello-world-complex.js
Module not found: Error: Can't resolve '/Users/rodrigomattososilveira/work/nutmeg-web-component-library/hello-world-complex/dist/hello-world-complex.js' in '/Users/rodrigomattososilveira/work/nutmeg-web-component-library/hello-world-complex'
@ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./dist/hello-world-complex.js hello-world-complex.bundled[2]
Child HtmlWebpackCompiler:
1 asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 1.31 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {HtmlWebpackPlugin_0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Failed to compile.

[RodrigoMattosoSilveira]

I did a few experiments, see the experiment branch, and managed to get the source to transpile as expected, and serve hello-world-complex successfully using the nutmeg-cli. Still, once it is served, if changes are made to the util-lib source files, they are not transpiled; in order to do so, we have to quit the app, run a build, and restart it. Looking at pacjage.json and the serve.ts logic it appears that is watching only at current directory changes.

[abraham]

Thanks for the report I'll try to look into this soon.

[RodrigoMattosoSilveira]

After reading the source code, it is obvious I must learn webpack@4, it is powerful and I should be understand the problem much better afterwards

[RodrigoMattosoSilveira]

Just finishing reading the Webpack docs and going thru the Guides section, one by one. I'm left with the impression that my approach is incorrect. I either must treat util-lib as a separate package, consolidate the util-lib logic in the components where they are used, or a combination of the two. Regardless, my sense is that you would be better served by abandoning the nutmeg-cli, and instead provide dev and prod webpack configuration files , an opinionated set of NPM scripts, and a few thoughts about how to customize them