Integrating Stencil components with Angular/Vue/React/Ionic broken?? because breaking changes removed dist/loader

[glennlawyer]

Stencil version:

 @stencil/[email protected]

I'm submitting a:
[X] bug report
[X] 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:
Known breaking changes in Stencil 1.. require changing how Stencil components are used in Angular/Vue/React/Ionic project, with insufficient guidance on how to navigate the change.

Expected behavior:
Modify the "breaking changes" doc to provide a possible way for at least one of these systems.

Steps to reproduce:

-Build a component using Stencil/core^1.0.0
-Publish to NPM
-Include in another project by the method which has been recommended for Stenci/core^0..
typically

import { defineCustomElements } from 'mycomponent/dist/loader'; 
defineCustomElements(window); 

• build fails with a message that dist/loader was not found, or similar.

See for example these bug reports:

-#1351
-#1574
-#1636
-#1662

Related code:

Other information:
The breaking changes doc tells us:

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.

So it looks like the reason /dist/loader is not found is that this file is no longer needed. That's great! However, it isn't clear how to include a stencil component in another framework.

What does one include, if dist/loader no longer exists?
Do we still import defineCustomElements?
Is it still recommended to call defineCustomElements on the window?

What would resolve the issue

2-3 lines which suggest the new way to

import { defineCustomElements } from 'mycomponent/dist/loader'; 
defineCustomElements(window); 

It is fine if the answer is generic; we just need something to point us in the right direction.

[glennlawyer]

Don't know what changed. but suddenly it started working.

[adrynov]

No, it still does not work with Ionic 4 if I use

import { defineCustomElements } from 'mycomponent/dist/loader';

Module not found: Error: Can't resolve '../dist/esm/legacy/loader.mjs' in ..........

if I import it the old way: import { defineCustomElements } from 'my-component/loader'; the error is the following:

Module not found: Error: Can't resolve '../dist/esm/polyfills/index.js'

[dominictobias]

Yep same

…

On Sat, 22 Jun 2019 at 20:37, Andrei Drynov ***@***.***> wrote: No, it still does not work if I use import { defineCustomElements } from 'mycomponent/dist/loader'; *Module not found: Error: Can't resolve '../dist/esm/legacy/loader.mjs' in ..........* — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1649?email_source=notifications&email_token=AAFZT6VGHIXN42J5YCR6BADP3Z5OPA5CNFSM4HYXPUSKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYKQATQ#issuecomment-504692814>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFZT6TYA6AUJSB3GNBSS4DP3Z5OPANCNFSM4HYXPUSA> .

[gs-akhan]

Is there anyway to make this work ? It used to work well with angular 6... Doesn't work with angular 7 :(((

[jthoms1]

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

[zengyuangai]

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

in edge can not work （Listen、Method、component lifecycle connectedCallback does not work ）

[Seanmclem]

Whats the solution?

[justinmeskan]

i am having the same issue with no wrapper around my stencil module. But defineCustomElements(window) method work great for a minute, then it stopped being able to locate the correct loader

[verena-ifx]

is there any update on this?

[fabiofcs]

This issue is old but we are facing this again. I'm using version 4.0.1 (the latest at this moment)

Module build failed: Error: ENOENT: no such file or directory, open '<PATH TO PROJECT>\dist\esm\polyfills\index.js'

There is no content in the polyfills folder: