Modal - componentOnReady error

[cjorasch]

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ ] 3.x x ] 4.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: There is an error when attempting to open a modal using <ion-modal-controller>.create.

chunk25.js:18 Uncaught (in promise) TypeError: element.componentOnReady is not a function
    at createOverlay (chunk25.js:18)
    at ModalController.create (ion-modal-controller.js:23)
    at ensureComponent.then.el (chunk17.js:145)
    at <anonymous>

The following function generates the error:

function createOverlay(tagName, opts) {
    // create ionic's wrapping ion-alert component
    const element = document.createElement(tagName);
    // give this alert a unique id
    element.overlayId = lastId++;
    // convert the passed in overlay options into props
    // that get passed down into the new alert
    Object.assign(element, opts);
    // append the alert element to the document body
    const appRoot = document.querySelector('ion-app') || document.body;
    appRoot.appendChild(element);
    return element.componentOnReady();
}

Version information:

    "@ionic/core": "0.1.3",
    "@stencil/core": "0.6.18",
    "@stencil/router": "0.0.27",

[cjorasch]

This appears to be fixed in 0.1.4-3

[kael]

I'm coming across a similar bug with <ion-menu/> when running a prod build:

  render() {
    return (
      <ion-split-pane id="splitPane">
        <ion-menu side="left">
        <!-- code removed for test -->
        </ion-menu>  
      </ion-split-pane>
    )
  }

$ npm run build

> @stencil/starter@0.0.1 build /home/kael/Project/dev/my-project
> stencil build --prerender

[40:05.4]  @stencil/core v0.6.1 💎
[40:05.4]  build, my-project, prod mode, started ...
[40:05.6]  compile started ...
[40:12.3]  compile finished in 6.67 s
[40:15.8]  generate bundles started ...
[40:15.8]  generate bundles finished in 55 ms
[40:15.8]  generate app files started ...
[40:15.9]  compile global style start ...
[40:15.9]  compile global style finish in 1 ms
[40:15.9]  generate app files finished in 26 ms
[40:15.9]  prerendering started ...
[40:15.9]  prerender, started: / ...

[ ERROR ]  ctrlElm.componentOnReady is not a function TypeError: ctrlElm.componentOnReady is not a function at resolve
           (/home/kael/Project/dev/my-project/node_modules/@stencil/core/dist/compiler/index.js:11768:17) at new
           Promise (<anonymous>) at loadComponent
           (/home/kael/Project/dev/my-project/node_modules/@stencil/core/dist/compiler/index.js:11759:12) at
           Object.componentOnReady
           (/home/kael/Project/dev/my-project/node_modules/@stencil/core/dist/compiler/index.js:11754:16) at
           e.componentWillLoad (evalmachine.<anonymous>:2:60164) at update
           (/home/kael/Project/dev/my-project/node_modules/@stencil/core/dist/compiler/index.js:11137:48) at
           plt.queue.add
           (/home/kael/Project/dev/my-project/node_modules/@stencil/core/dist/compiler/index.js:11100:13) at flush
           (/home/kael/Project/dev/my-project/node_modules/@stencil/core/dist/compiler/index.js:11706:33) at
           process._tickCallback (internal/process/next_tick.js:112:11)

This seems to point to https://github.com/ionic-team/ionic/blob/7a0f2769b139a6f011eb5593b620deda8735986f/packages/core/src/components/menu/menu.tsx#L125

    "@ionic/core": "0.1.4-3",
    "@stencil/core": "0.6.1",

I'm looking to deploy a PWA prod build.

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/592