-
Notifications
You must be signed in to change notification settings - Fork 782
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
Error loading component in ReactJS project #1882
Comments
Can someone please advise on this issue ? |
I'm seeing this issue too. Here are some some more details that might be relevant.
The trace is as follows:
Following the error, this is in the
But that's as far as I've been able to follow it. Any help very much appreciated. |
Also experiencing this with Initialised as follows:
Console output:
|
I get this error everytime I update my component (distributed via npm). I need to clear my cache, then it's working. Doesn't seem normal to me |
Same here, however rebuilding the project removed the error. This is weird because the only thing that was introduced to the system is a new "web" component and included in the main one. |
I am having this exact same issue using Parcel, with just Ionic (no Stencil). Webpack is a no-go for me. :/ I tried the Parcel 2 alpha, but to no avail. Will post any updates if I figure out anything useful. |
@EirikFA me to |
@zalelion I suspect this Parcel issue might have something to do with it - dynamic imports. |
This has been fixed in latest version of stencil. |
So if this is a parcel issue, how could it be fixed by Stencil? I'm using a Stencil component library using a very recent version and it still occurs in my parcel-based project. |
@Robbson Try using the "next" (v1.15.0-2) version of @stencil/core. That works for me in 2 projects. |
@favna Thanks for the suggestion but the issue remains. |
Looks like the same issue we had with Webpack. Essentially it detects the stencil chunks and outputs them to We 'resolved' the issue by disabling chunks in webpack. No chunks = no stencil lazy loading (the components are already loaded and it handles this nicely) plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
], I suspect the custom elements bundle is probably the 'correct' resolution for usage inside a module bundler like Parcel and Webpack - Basically an output without the lazy loading, designed explicitly to allow for tree-shaking |
Just ran into this, was getting ready to demo to a group and I had been running create-react-app in dev mode, everything working. Went to go test it out in prod mode where splits chunks is applied and saw an error about an invalid token. The error was vague but I was able to figure out it was related to chunks and found this post. I went ahead and disabled chunks in create-react-app and then everything worked again when building in prod mode. Edit: I really wanted to avoid disabling the split chunks feature so I went back to the drawing board on this and came up with a solution of replacing the esm version of the loader with a commonJS version of the loader in hopes that would disable webpack from splitting it out into a separate chunk during prod builds. Inside of components.ts, I've updated the following from
to
|
Where exactly do we need to put this webpack config? in Stencil or in React project? |
In the Webpack Plugins of the React project (or whatever project is loading your 'built' stencil components) |
Thank you for your answer. |
Hi, has anyone found a "solution" for this? One of the teams in my organization use parcel, the rest use webpack. Only the parcel team got this error. |
Thanks for the issue! This issue has been labeled as Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed. If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue. For a guide on how to create a good reproduction, see our Contributing Guide. |
Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out. Thank you for using Stencil! |
Stencil version:
I'm submitting a:
[* ] 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:
Expected behavior:
Should be able to load the component in react application.
Steps to reproduce:
Related code:
Other information:
The text was updated successfully, but these errors were encountered: