Stencil: Polyfill not working when integrating a web component in Vue or React framework

[stephanschroeter]

Stencil version:

 @stencil/[email protected]

I'm submitting a:
[x] bug report
[ ] feature request
[ ] support request

Current behavior:
When integrating a web component generated by Stencil JS into Vue or React framework according to Stencil JS docs then the web component polyfill is not working at all.

Expected behavior:
Stencil Web Component polyfill should work correctly when integrating in e.g. Vue or React framework.

Steps to reproduce:

Create project setup

mkdir test
cd test

Add a package.json file:

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": ["test-components", "test-app"]
}

Setup Stencil JS

Make sure to execute the following command within the previously generated folder test.

npm init stencil

Selected options:

• [x] component
• [x] Project name: test-components

cd test-components
npm install @stencil/[email protected]

Edit following file:
src/components/my-component/my-component.css

div {
  background: deeppink;
}

Create a build

yarn build

Setup Vue JS

Using Vue cli (version: 3.8.2) to create a dummy Vue project.
Make sure to execute the following command within the previously generated folder test.

vue create test-app

Selected options:

• [x] Babel
• [x] TypeScript
• [x] Linter / Formatter
• [x] class-style component syntax
• [x] Use Babel alongside TypeScript
• [x] TSLint

Adapt test-app/src/main.ts

import Vue from 'vue';
import App from './App.vue';
import { defineCustomElements } from 'test-components/loader';

Vue.config.productionTip = false;
Vue.config.ignoredElements = [/my-\w*/];

defineCustomElements(window);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Adapt template section in test-app/src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

Start application

cd test-app
yarn serve

Web component is working fine in e.g. latest version of Chrome but component is not shown in e.g. IE11.

[jthoms1]

I was able to reproduce the issue. It appears that the polyfill is not getting loaded for some reason. I have talked with @adamdbradley. He will be looking at it this afternoon.

I think our e2e tests around IE11 cover usage through the script tag usage, but do not cover the usage of 'defineCustomElements'. I wonder if this is the source of problems. We should probably create tests around this usage as well to ensure these types of issues are captured in the future.

[jthoms1]

@stephanschroeter Can you please link the repo where the example test case is? Thanks!

[stephanschroeter]

Yeah of course, you can find the example here: https://github.com/porscheui/stencil-test

[andreyleonardo]

Hi @stephanschroeter,

I was experiencing the same issue and was using this work around until 1.0.0-beta.7:

import { defineCustomElements, applyPolyfills } from '@mycomponent/loader';
// Apply necessary Polyfills for IE11.
applyPolyfills().then(() => {
  defineCustomElements(window);
});

But since the change to core-js on beta.8 and above it's returning the following error:
Incompatible receiver, Symbol required

So I've changed for this my workaround (not the optimal but trying to solve somehow):

import { defineCustomElements, applyPolyfills } from '@mycomponent/loader';
import 'core-js/features/symbol'
// Apply necessary Polyfills for IE11.
applyPolyfills().then(() => {
  defineCustomElements(window);
});

Then I had another error:
Unable to set property 'WHATWGFetch' of undefined or null reference

Removing (manually) the piece of code for fetch polyfill from core-js.js file generated by Stencil build process I am able make this work again.

So for now I'm stuck on beta.7 until a fix comes in some next version.

Hope this work around could help anyone that is experiencing the same issue.

[jthoms1]

It appears the polyfills are not getting included correctly. @andreyleonardo you are correct though applyPolyfills needs to be executed before the defineCustomElement.

[jthoms1]

Nevermind I don't have any issues. I had an incorrect link. This is working for me. I will update the docs on the site to include info about applying polyfills when you are not accounting for them yourself.

@stephanschroeter I sent you a PR for your repo to fix the issue. Can you verify it works? https://github.com/porscheui/stencil-test/pull/1

[jthoms1]

The following PR to stencil-site fixes this issue. https://github.com/ionic-team/stencil-site/pull/436

[flobacher]

When used in an Angular ClI app (v8) the same issue arises in IE 11.
Use via Scripttag in Head (Stencil Polyfills need to be loaded before zone.js ) is the workaround that worked for us

[andreyleonardo]

Hi @jthoms1! Thanks for updating the docs with this information!

What about the issues that I'm experiencing after the changes on Stencil to use core-js as polyfills alternative?
Could you reproduce it on IE11?

[GuillaumeNury]

I found an other workaround (working with a Angular CLI 8 app, on IE11) :

// in polyfills.ts
import { applyPolyfills } from '@mycomponent/loader';
applyPolyfills()


// in main.ts
import { defineCustomElements } from '@mycomponent/loader';
defineCustomElements(window);