Stencil: Ionic Angular including stencil(0.16.2) web component typeerror observe is not a function

[petemcwilliams]

Stencil version:

 @stencil/[email protected]

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:
npm run start = ng serve

Errors:

core.js:14597 ERROR TypeError: A.observe is not a function
    at ionic.core.js:9
    at applyPolyfills (ionic.core.js:9)
    at r (ionic.core.js:6)
    at defineCustomElements (ionic.define.js:8)
    at Array.<anonymous> (app-initialize.js:28)
    at ApplicationInitStatus.push../node_modules/@angular/core/fesm5/core.js.ApplicationInitStatus.runInitializers (core.js:15612)
    at core.js:16631
    at _callAndReportToErrorHandler (core.js:16724)
    at core.js:16629
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)

Expected behavior:
Does not error

Steps to reproduce:
Using in main.ts:
defineCustomElements(window);

Web component compiled using ionic/core 0.16.2

Related code:

    "dependencies": {
        "@angular/common": "~7.1.4",
        "@angular/core": "~7.1.4",
        "@angular/forms": "~7.1.4",
        "@angular/http": "~7.1.4",
        "@angular/platform-browser": "~7.1.4",
        "@angular/platform-browser-dynamic": "~7.1.4",
        "@angular/pwa": "^0.11.4",
        "@angular/router": "~7.1.4",
        "@angular/service-worker": "~7.1.4",
        "@ionic-native/core": "5.0.0-beta.21",
        "@ionic-native/splash-screen": "5.0.0-beta.21",
        "@ionic-native/status-bar": "5.0.0-beta.21",
        "@ionic/angular": "4.0.0-rc.0",
<snip my component>
        "core-js": "^2.5.4",
        "rxjs": "~6.3.3",
        "zone.js": "~0.8.26"
    },
    "devDependencies": {
        "@angular-devkit/architect": "~0.11.4",
        "@angular-devkit/build-angular": "~0.11.4",
        "@angular-devkit/core": "~7.1.4",
        "@angular-devkit/schematics": "~7.1.4",
        "@angular/cli": "~7.1.4",
        "@angular/compiler": "~7.1.4",
        "@angular/compiler-cli": "~7.1.4",
        "@angular/language-service": "~7.1.4",
        "@ionic/angular-toolkit": "~1.2.0",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~10.12.0",
        "codelyzer": "~4.5.0",
        "http-server": "^0.11.1",
        "lighthouse": "^4.0.0-alpha.2-3.2.1",
        "opn": "^5.4.0",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~3.1.4",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.12.0",
        "typescript": "~3.1.6"
    }

Other information:
Drop ionic/core to 0.16.1 and rebuild web component angular runs fine

[manucorporat]

Which browser are you testing?

[manucorporat]

Can you also provide a repo case? we have never seen this bug

[petemcwilliams]

Google Chrome is up to date
Version 71.0.3578.98 (Official Build) (64-bit)

[petemcwilliams]

Looks like it is reproducible if the component has an @Prop, Think you should be able to repro with the following, if you want me to send you the files, can do.

import { Component, Prop } from '@stencil/core';

@Component({
    tag: 'testing-angular',
    styleUrl: 'testing-angular.css',
    shadow: true,
})
export class TestAngular {
    @Prop() labelText: string;

    render() {
        return <p>{this.labelText}</p>;
    }
}

stencil.config.ts

import { Config } from '@stencil/core';

export const config: Config = {
    namespace: 'testing-angular',
    outputTargets: [
        { type: 'dist' },
        { type: 'docs' },
        {
            type: 'www',
            serviceWorker: null, // disable service workers
        },
    ],
};

tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "allowUnreachableCode": false,
        "declaration": false,
        "experimentalDecorators": true,
        "lib": ["dom", "es2017"],
        "moduleResolution": "node",
        "module": "esnext",
        "target": "es2017",
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "jsx": "react",
        "jsxFactory": "h"
    },
    "include": ["src", "types/jsx.d.ts"],
    "exclude": ["node_modules"]
}

package.json

{
    "name": "testing-angular",
    "version": "1.0.0",
    "author": "Peter McWilliams",
    "description": "Stencil web component compiled with stencil/core 0.16.2.",
    "module": "dist/esm/index.js",
    "main": "dist/index.js",
    "unpkg": "dist/ionic.js",
    "types": "dist/types/components.d.ts",
    "collection": "dist/collection/collection-manifest.json",
    "files": [
        "dist/"
    ],
    "scripts": {
        "build": "stencil build --docs",
        "start": "stencil build --dev --watch --serve"
    },
    "dependencies": {},
    "devDependencies": {
        "@stencil/core": "^0.16.2"
    },
    "license": "SEE LICENSE IN ../LICENSE"
}

[peterpeterparker]

@manucorporat same problem when using Ionic Core and Ionicons -> https://github.com/ionic-team/ionic/issues/17114

also with Ionic RC.1 I wasn't able to consume my Web Components using defineCustomElements in my Ionic Angular app, I had to rollback to a script tag in index.html

[petemcwilliams]

Although setting the version of stencil/core back to 0.16.1 fixed it for ng serve,
a pwa prod build shows the same error
ng build --prod

[peterpeterparker]

I landed on that issue again just right now. I've publish two web component to npm, built with Stencil 0.16.1, updated just these two and face the error again

deckdeckgo-charts.core.js:8 Uncaught (in promise) TypeError: A.observe is not a function
    at deckdeckgo-charts.core.js:8
    at applyPolyfills (deckdeckgo-charts.core.js:8)
    at r (deckdeckgo-charts.core.js:5)
    at defineCustomElements (deckdeckgo-charts.define.js:8)
    at ./src/index.js.Object.then (index.js:35)

Project to reproduce the error (branch rtl): https://github.com/deckgo/deckdeckgo-starter/tree/rtl

This issue is a bit a pain I've to say, makes really difficult to release my projects

[petemcwilliams]

Problem persists into "@stencil/core": "0.17.0"

[petemcwilliams]

So I've got the angular PWA running with stencil version 0.16.1 (tested does not work with 0.17.0)

Re-wrote main.ts so that the custom elements are defined before bootstrapping the appmodule...

import { defineCustomElements as defineMyCustomElements1 } from '@myrepo/custom1/dist/loader';
import { defineCustomElements as defineMyCustomElements2 } from '@myrepo/custom2/dist/loader';


const defineCustomElements = async () => {
    await defineMyCustomElements1(window);
    await defineMyCustomElements2(window);
};

defineCustomElements().then(() => {
    platformBrowserDynamic()
        .bootstrapModule(AppModule)
        .catch(err => {
            // tslint:disable-next-line: no-console
            console.log(err);
        });
});

[peterpeterparker]

I use my libs in a webpack "no framework" project and so far can't figue out what's the root of the problem. Also tried 0.17.0, same error as with 0.16.1

[peterpeterparker]

So if I wipe my node_modules and rebuild the lib locally, I get a couple of "dev": true, "optional": true differences in package-lock.json related to fsevents, nothing else, and it solves the error. But, I then did again the same process and I faced the error again...so weird

@petemcwilliams which node version are u using? I've got v11.5.0

[petemcwilliams]

Seems I'm on quite old versions, reticent to update as I have a working environment (albeit on an older stencil/core)
node -v
v8.11.3
npm -v
6.5.0

[peterpeterparker]

@petemcwilliams thx for the feedback, at least it means that I should not search the problem in the node version but somewhere else

[peterpeterparker]

I compared two of my Web Components build with Stencil. One which load successfully vs one of these which doesn't load. I had a look at the compiled code and I found a difference.

In the Web Component I'm able to load, I found the following code in the bundle dist/esm/es5/...-core.js:

var y, w = Array.isArray ? Array.isArray : function (n) {
      return "[object Array]" === Object.prototype.toString.call(n)
    }, b = 0, m = void 0, g = void 0, M = function (n, t) {
      S[b] = n, S[b + 1] = t, 2 === (b += 2) && (g ? g(e) : O())
    }, j = (y = void 0 !== n ? n : void 0) || {}, k = j.MutationObserver || j.WebKitMutationObserver;
    j = "undefined" == typeof self;

see the MutationOverserver right?

Then in the Web Component(s) I'm not able to load, I found the following code in their bundle dist/esm/es5/...-core.js:

var y, w = Array.isArray ? Array.isArray : function (n) {
      return "[object Array]" === Object.prototype.toString.call(n)
    }, m = 0, b = void 0, g = void 0, M = function (n, t) {
      S[m] = n, S[m + 1] = t, 2 === (m += 2) && (g ? g(e) : O())
    }, k = (y = void 0 !== n ? n : void 0) || {}, j = k.k || k.j;
    k = "undefined" == typeof self;

see, no explicit MutationOverserver => the error A.observe is not a function.

worth to notice, when I copied/pasted the code of the component with the Observer in the component which does't load, then it solved the problem.

so I had a look to the packages and I noticed that one of these two components was using Stencil v0.17.0 and that's why it had the MutationOverserver where the other didn't.

but I also know that my current master branch, which works fine, is all compiled with Stencil 0.16.1 and also that I was stuck with Ionic rc.0 because I faced the same problem when I tried to upgrade Ionic (to rc.2)

so I migrated the Stencil version in the component which was problematic and guess what, it loaded successfully

therefore, I ask my self, in a project where multiple separate Web Components are build with Stencil (inclusive where Ionic core and Ionicons is used respectively where multiple defineCustomElements occurs), should all the Components be compiled with the same version of Stencil in order to be all loaded correctly?

I would be surprised, that doesn't make much sense ... such a weird issue

[adamdbradley]

Thanks for debugging this, looks to me like terser's property renaming is being applied to this polyfill. We'll take a look thanks.

[peterpeterparker]

This error is just super random.

In my project I use 5 components. I load the first one and when it's done, I load the others. I face the error because I updated the first of these components, the main one.

So today I rebuilt this component locally without doing anything, then installed it locally in my project, and I didn't face the error.

Then I updated this "main" component to Stencil v0.17.1 and I faced the error again.

But I then decided to update each and every components (the all 5) to v0.17.1 and it turned out that at the end, that solved the problem too. So I released every single components updated to npm as I kind of would like to go forward.

Before updating my project, I saved a branch to replicate the issue.

Branch with issue: https://github.com/deckgo/deckdeckgo-starter/tree/stencil-1308

Branch without issue (might be master soon too): https://github.com/deckgo/deckdeckgo-starter/tree/rtl

[petemcwilliams]

Problem persists into "@stencil/core": "0.18.0"

[petemcwilliams]

Decided to re-write my components as angular elements, given that it looks like there will be significant rework to migrate them to stencil version 1 and there is no guarantee that this issue will be resolved afterwards. no longer watching this issue, but leaving open as there's been no fix I have seen.

[adamdbradley]

Fix with the stencil one update