Ionic-framework: Modal - componentOnReady error

Created on 6 Mar 2018  路  4Comments  路  Source: ionic-team/ionic-framework

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",
v3

Most helpful comment

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/[email protected] 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)



md5-8c0a26927d51ef9cb6ffb50d58ec2df5



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

I'm looking to deploy a PWA prod build.

All 4 comments

This appears to be fixed in 0.1.4-3

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/[email protected] 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)



md5-8c0a26927d51ef9cb6ffb50d58ec2df5



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

I'm looking to deploy a PWA prod build.

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

GeorgeAnanthSoosai picture GeorgeAnanthSoosai  路  3Comments

aslamj picture aslamj  路  3Comments

alan-agius4 picture alan-agius4  路  3Comments

alexbainbridge picture alexbainbridge  路  3Comments

SebastianGiro picture SebastianGiro  路  3Comments