[EDGE] unable to get property 'define' of undefined or null reference

[xskif]

Stencil version:

 @stencil/core@1.1.2

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: Using defineCustomElements from dynamic loader in Edge throws an Error to the browser console -> unable to get property 'define' of undefined or null reference

Expected behavior: There is no error and all works fine

Steps to reproduce: Create new collection of components Create Angular project Call defineCustomElements on window object

[hvgeertruy]

I am encountering this as well in IE11 & edge

This seems to be introduced with @Stencil/core@1.0.0 I downgraded the version and the earliest version that worked for me was 0.18.1

This means that, contrary to what is stated in stencil browser support documentation, IE11 and EDGE 16+ is not supported when using stencil in angular.

We can't drop IE support (especially not EDGE), so the only option for us is to downgrade to 0.18.1 until this issue is resolved.

I am almost hoping that I am missing something and just have to tweak an option somewhere.

UPDATE: I managed to get it working on EDGE by adding the shadow DOM & custom elements polyfill (109kb), but this is hardly desirable

UPDATE 2: You can fix this by using applyPolyfills().then(() => {}) See stencil documentation for javascript/vue/react.

For some reason, Stencil didn't add this to angular integration documentation. I reckon because Angular does polyfilling on their own, which would mean duplicate polyfills. They (Stencil) broke something from stencilJS 1.0.0 onwards though.

[dougestey]

Can confirm this bug as well. Loading applyPolyfills before defineCustomElements as @hvgeertruy mentions above is what fixed it for me in Edge.

[mynormh]

Still getting this error after trying the fix. Am I doing something wrong? This is my index.tsx:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import {
  applyPolyfills,
  defineCustomElements
} from "@ionic/pwa-elements/loader";

ReactDOM.render(<App />, document.getElementById("root"));

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

[splitinfinities]

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now.

We do not support Stencil versions less than v2, and you seem to be using an older version of Stencil. If you can upgrade to the latest version and let me know if this issue still exists, I would appreciate it.

Let me know if you need anything else!

[ionitron-bot[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!