Stencil: Angular 7 integration with StencilJS problem - Cannot find module 'test-components/dist/loader'

[pmandayam]

Stencil version:

@stencil/[email protected]

I'm submitting a:

[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Angular and Node version:

Angular CLI: 7.1.4 Node: 8.9.4

I am trying to integrate my Angular 7 project with StencilJS so I can use custom web components/elements, and I'm following the integration guide on the StencilJS website here: https://stenciljs.com/docs/angular#calling-definecustomelements

I'm on the instructions that say:

A component collection built with Stencil includes a main function that is used to load the components in the collection. That function is called defineCustomElements() and it needs to be called once during the bootstrapping of your application. One convenient place to do this is in main.ts as such:

I tried importing defineCustomElements() in my main.ts file just as the instructions say, and I'm getting this error:

[ts] Cannot find module 'test-components/dist/loader'

Expected behavior:

After I import defineCustomElements(), and call the function in the main.ts file, I should be able to import components in my code and start using them.

Steps to reproduce:

Simply follow the instructions in the Angular-StencilJS integration guide: https://stenciljs.com/docs/angular/

[peterpeterparker]

If doesn't work with defineCustomElements, try to import it like describe in one of my component for Ionic v4: https://github.com/fluster/web-social-share#installation-in-a-ionic-v4-project

[apillard]

defineCustomElements is exported by your stencil project. I don't know what your stencil project is called, but whatever it is you need to change 'test-components/dist/loader' to 'your-project-name/dist/loader'

[elgervb]

I'm experiencing the same problem. When doing a local build, the /dist/loader dir is present.
I've published my library to npm. When I install it, using npm i @elgervb/stencil-components, the /dist/loader dir is not there.

My package: https://www.npmjs.com/package/@elgervb/stencil-components
Example on RunKit: https://npm.runkit.com/@elgervb/stencil-components
Checkout Browse Files1 and see that/dist/loaderis not there... Alsodist/esm/index.js` is empty.

Here's my app that consumes the @elgervb/stencil-components library, which has the problem in /src/main.ts

src/main.ts(5,38): error TS2307: Cannot find module '@elgervb/stencil-components/dist/loader'.

defineCustomElements is nowhere to be found in the repro...

[nereolopez]

Hi,

I am facing the same. Whenever I publish the package, the .../dist/loader is not there. Were you able to find any solution?

Thanks

[Sanderand]

Please make sure that you do a production build. I guess the dev build does not generate the loader you're looking for. This had fixed the problem for me a while ago.

[nereolopez]

Thanks @Sanderand. In the documentation says npm run build before publishing, but with your comment I realized that it in fact uses the --dev flag. I run a production build and it is now generating the loader folder.

Thanks!

[glennlawyer]

See also this thread:
https://github.com/ionic-team/stencil/issues/1574

which has a solution/workaround, assuming that the issue might be the placement of the loader directory as specified in stencil.config.js

[glennlawyer]

Now I'm not so sure. about the workaround I linked to last Friday. As far as I can tell, Stencil 1.0 has now removed the loader.:

See this from Breaking Changes

 index.html's <script>s updated to use type="module"
Stencil used to generate a loader .js file that automatically decided which entry-point to load based
 in the browser's capabilities. In Stencil 1.0 we have decided to completely remove the overhead of
 this loader by directly loading the core using the web-standard type="module" script attribute. 
Less runtime and preferring native browser features. Win Win. For more for info, please see Using 
JavaScript modules on the web.

Unfortunately, the linked Using Javascript modules on the web doesn't say how to integrate with Angular ):

[jthoms1]

I have updated the docs to ensure they link to the correct location for the loader. https://stenciljs.com/docs/angular. Also be sure that you are using the latest release of Stencil at this time. v1.1.6

[pankajparkar]

@Sanderand / @nereolopez
I'm facing similar issue. This might sounds silly, but may I know how should I generate a production build?

I tried stencil build --prod

[nereolopez]

It's been a while since I left the project aside for a bit, but I would say it is as you said. You can try changing the --dev flag in the build script inside the package json.

Hope you can solve it :)

[elgervb]

I've fixed it for my project: https://github.com/elgervb/stencil-components

When you take a look at package.json, then you'll see the scripts.prepare:

"prepare": "npm run build --prod",

This will make a production build right before publishing the package, resulting in the loader directory being present.

I've included the stencil-components library in https://github.com/elgervb/imgman.
In https://github.com/elgervb/imgman/blob/master/src/main.ts, I include the library and use the defineCustomElements. When running the app, it's ready to use the stencil components.

Hope this helps.. Please checkout my projects. If it does not work for you, please let me know here.

[yinonov]

why should the local version import of 'loader' be broken from the first place?

[johnsonsamuel]

I am getting the following error

'Error: Cannot find module './my-component.cjs.entry.js'

Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined at initializeComponent

Any thoughts ?? Thanks in advance.