Stencil: ES5 build invalid when using shared library

[cary-smith]

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://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

When an external library (like resize-observer-polyfill) is imported and used in multiple components, the es5 module does not convert the reference to the incoming 'chunk' argument.

Expected behavior:

__chunk#__js argument object is used properly

Steps to reproduce:

1. Clone the stencil-starter-component repo
2. Install the npm lib resize-observer-polyfill
3. Create 2 components that use the ResizeObserver
4. Run npm start (using the --es5 flag) and open it in IE11

• IE11 reports: ReferenceError: 'index' is undefined...
• Firefox does not error, but also does not load the ResizeObserver.

1. Comment out the lines related to the resize observer in either component
2. ....
3. Stuff works again! (because it no longer is used in 2 places, it just combines the external into the component)

Related code:
Can be used in both elements with different tag names

import { Component, Element } from '@stencil/core';
import ResizeObserver from 'resize-observer-polyfill';

@Component({
  tag: 'x-one',
  shadow: true
})
export class XOne {
  @Element() private host: HTMLElement;

  protected componentWillLoad() {
    const observer = new ResizeObserver(() => console.log('Resizing!!!'));
    observer.observe(this.host);
  }

  protected render() {
    return <div>Hello World</div>;
  }
}

Other information:

Darn these saucy old browsers!

This bug is not specific to 0.6.6 and I am unsure of where it started.

Still loving the library. Please keep up the amazing work. :)

[cary-smith]

I sometimes feel like I am here to plague you with IE11 (or older browser) problems 😞

[jgw96]

All good! While supporting old browser like IE11 can be challenging, it is worth it to enable users who need to support these browsers to be able to use modern tools like Stencil.

[captaincole]

I believe this might not be a solo IE11 issue.

While testing functionality on safari (installed on iOS 10.3.3) I found that firebase would not work. This is also the case in Firefox.

import { Component, State, Listen } from '@stencil/core';
import firebase from 'firebase';

@Component({
  tag: 'app-home',
  styleUrl: 'app-home.scss'
})
export class AppHome {

  @State() jobList: Array<any> = [];
  @State() user: any;

  componentDidLoad() {
    // Load Data!
    this.setDataListners();
    this.getUser();
    // add job...
    // this.addJob();
  }

  setDataListners() {
    // Setup Firebase Listeners To Push Data...
    let jobsRef = firebase.database().ref('jobs').orderByChild('points').limitToLast(25);
    jobsRef.once('value', (snapshot) => {
      console.log('got snapshot change');
      let tmpJobList = [];
      snapshot.forEach( (childSnapshot): any => {
        tmpJobList.push({ id: childSnapshot.key , ...childSnapshot.val() });
      });
      this.jobList = tmpJobList;
    }, (err) => {
      console.warn('Error Getting Data', err);
    });
  }

Also, at buildtime, I see these "runtime errors" that dont seem to have an effect on the build in chrome...

 ERROR ]  Runtime error detected during componentDidLoad(): app-home
           index_node is not defined ReferenceError: index_node is not defined at e.setDataListners
           (evalmachine.<anonymous>:2:1827) at e.componentDidLoad (evalmachine.<anonymous>:2:1582) at
           initComponentLoaded

When I am running via

npm run dev --es5

I get these console errors

ReferenceError: index_node is not defined
Stack trace:

[cary-smith]

I am not sure what commit did it, but this seems to be fixed in 0.6.13.

edit: @thielCole does it work for you?

[captaincole]

Edit: It now works!

I had to upgrade my ionic/core version as well. My dependencies look like this.

  "dependencies": {
    "@ionic/core": "0.0.3",
    "@stencil/core": "0.6.13",
    "@stencil/router": "latest",
    "firebase": "^4.10.1"
  },

Edit: Premature...

npm run dev --es5 works, but npm run build with the --es5 flag does not. I ran into this error

[ ERROR ]  ctrlElm.componentOnReady is not a function TypeError: ctrlElm.componentOnReady is not a
           function at resolve
           (/Library/WebServer/Documents/job-search/node_modules/@stencil/core/dist/compiler/index.js
:11891:17)

Edit: Also tried this with core 0.0.4-1 and it still has the same error.

[jgw96]

Hello all! As it seems this issue has been fixed I am going to close this issue for now. Thanks for using Stencil!