Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
RodrigoMattosoSilveira opened this issue Nov 17, 2018 · 4 comments
Labels

Comments

@RodrigoMattosoSilveira
Copy link

RodrigoMattosoSilveira commented Nov 17, 2018

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
Copy link
Author

RodrigoMattosoSilveira commented Nov 18, 2018

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 abraham added the bug label Nov 19, 2018
@abraham
Copy link
Owner

abraham commented Nov 19, 2018

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

@RodrigoMattosoSilveira
Copy link
Author

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants