Error loading component in ReactJS project

[johnsonsamuel]

Stencil version:

 @stencil/core@1.4.0

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:

Error: Cannot find module './component-name.cjs.entry.js'
Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined
    at initializeComponent

Expected behavior:

Should be able to load the component in react application.

Steps to reproduce:

Related code:

I am importing the defineCustomElements in the index.js file in React

import {defineCustomElements} from 'my-modal/loader';

defineCustomElements(window);

Other information:

[johnsonsamuel]

Can someone please advise on this issue ?

[johnmccollum]

I'm seeing this issue too. Here are some some more details that might be relevant.

• The exported component works when I use create-react-app, but not Parcel
• I'm setting up as follows:

import {
  applyPolyfills,
  defineCustomElements
} from 'my-web-components/dist/loader'

applyPolyfills().then(() => {
  defineCustomElements(window)
})

The trace is as follows:

core-b273a53b.js:1061 Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined

Following the error, this is in the initializeComponent function; the variable Cstr is undefined. Looking further down the codebase, I can see that initializeComponent is called without this variable being passed:

nextTick(function () { return initializeComponent(elm, hostRef_2, cmpMeta); });

But that's as far as I've been able to follow it. Any help very much appreciated.

[mtford90]

Also experiencing this with "@stencil/core": "^1.7.3"

Initialised as follows:

import {defineCustomElements, applyPolyfills} from 'components/loader'

(function (_window) {
    console.log('init stencil')
    applyPolyfills().then(function () {
        console.log("Successfully applied polyfills")
        defineCustomElements(_window).then(function () {
            console.log("Successfully defined custom elements")
        }).catch(function (err) {
            console.error("Error defining custom elements")
        })
    }).catch(function (err) {
        console.error("Error applying stencil polyfills", err)
    })
})(window)

Console output:

init stencil
app.js:27 Successfully applied polyfills
app.js:29 Successfully defined custom elements
core-3a1b95ad.js:103 ChunkLoadError: Loading chunk 3 failed.
(error: http://localhost:4000/3.app.js)
    at Function.requireEnsure [as e] (http://localhost:4000/js/app.js:106:26)
    at webpackAsyncContext (webpack:///./node_modules/components/dist/esm-es5_lazy_^\.\/.*\.entry\.js$_include:_\.entry\.js$_exclude:_\.system\.entry\.js$_namespace_object?:17:29)
    at loadModule (webpack:///./node_modules/components/dist/esm-es5/core-3a1b95ad.js?:113:169)
    at eval (webpack:///./node_modules/components/dist/esm-es5/core-3a1b95ad.js?:841:24)
    at step (webpack:///./node_modules/components/dist/esm-es5/core-3a1b95ad.js?:51:23)
    at Object.eval [as next] (webpack:///./node_modules/components/dist/esm-es5/core-3a1b95ad.js?:32:53)
    at eval (webpack:///./node_modules/components/dist/esm-es5/core-3a1b95ad.js?:26:71)
    at new Promise (<anonymous>)
    at __awaiter (webpack:///./node_modules/components/dist/esm-es5/core-3a1b95ad.js?:22:12)
    at initializeComponent (webpack:///./node_modules/components/dist/esm-es5/core-3a1b95ad.js?:830:89)
consoleError @ core-3a1b95ad.js:103
Promise.then (async)
loadModule @ core-3a1b95ad.js:113
eval @ core-3a1b95ad.js:841
step @ core-3a1b95ad.js:51
eval @ core-3a1b95ad.js:32
eval @ core-3a1b95ad.js:26
__awaiter @ core-3a1b95ad.js:22
initializeComponent @ core-3a1b95ad.js:830
eval @ core-3a1b95ad.js:947
Promise.then (async)
nextTick @ core-3a1b95ad.js:190
connectedCallback @ core-3a1b95ad.js:947
eval @ core-3a1b95ad.js:1026
jmp @ core-3a1b95ad.js:73
HostElement.connectedCallback @ core-3a1b95ad.js:1026
eval @ core-3a1b95ad.js:1056
bootstrapLazy @ core-3a1b95ad.js:1056
eval @ loader.mjs:7
Promise.then (async)
defineCustomElements @ loader.mjs:6
eval @ app.js:28
Promise.then (async)
eval @ app.js:26
eval @ app.js:36
./js/app.js @ app.js:223
__webpack_require__ @ app.js:64
eval @ app.js:1
0 @ app.js:305
__webpack_require__ @ app.js:64
(anonymous) @ app.js:199
(anonymous) @ app.js:202
core-3a1b95ad.js:850 Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined
    at eval (core-3a1b95ad.js:850)
    at step (core-3a1b95ad.js:51)
    at Object.eval [as next] (core-3a1b95ad.js:32)
    at fulfilled (core-3a1b95ad.js:23)

[turtledev1]

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

[mnemanja]

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.

[EirikFA]

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.

[izengliang]

@EirikFA me to

[EirikFA]

@zalelion I suspect this Parcel issue might have something to do with it - dynamic imports.

[ps011]

This has been fixed in latest version of stencil.

[Robbson]

@zalelion I suspect this Parcel issue might have something to do with it - dynamic imports.

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.

[favna]

@Robbson Try using the "next" (v1.15.0-2) version of @stencil/core. That works for me in 2 projects.

[Robbson]

@favna Thanks for the suggestion but the issue remains.

[charlieTheBotDev]

Looks like the same issue we had with Webpack. Essentially it detects the stencil chunks and outputs them to [n].js files. If your app serves the webpack output from anywhere other than /bundle.js (i.e. the root of the site) then the stencil lazy-loading fails as it looks for /[n].js explicitly, as opposed to looking relative to bundle.js

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

[bjankord]

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

import { defineCustomElements } from '@my-lib/components/loader';

to

const loader = require('/dist/cjs/loader.cjs.js');

[roman-telia]

plugins: [
  new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 1
  })
],

Where exactly do we need to put this webpack config? in Stencil or in React project?

[charlieTheBotDev]

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)

[roman-telia]

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.

[alexhhn]

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.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

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.

[ionitron-bot]

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!