ionic-team / ionic-pwa-toolkit

Build lightning fast Progressive Web Apps with zero config and best practices built-in. Go from zero to production ready with Ionic and Stencil (Web Components).
MIT License
633 stars 74 forks source link

ctrlElm.componentOnReady throws error when using ion-menu #47

Closed rpersaud closed 6 years ago

rpersaud commented 6 years ago

Resources: Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

└── @stencil/core@0.7.18

I'm submitting a ... (check one with "x") [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:

Added dom [for ion-split-pane] consisting of a ion-menu, andnpm run build goes bonkers.

[ ERROR ]  ctrlElm.componentOnReady is not a function TypeError: ctrlElm.componentOnReady is not a function at
           resolve
           (/Users/rpersaud2/workspace/ionic-pwa-toolkit/node_modules/@stencil/core/dist/compiler/index.js:12225:17)
           at Promise (<anonymous>) at loadComponent
           (/Users/rpersaud2/workspace/ionic-pwa-toolkit/node_modules/@stencil/core/dist/compiler/index.js:12216:12)
           at Object.componentOnReady
           (/Users/rpersaud2/workspace/ionic-pwa-toolkit/node_modules/@stencil/core/dist/compiler/index.js:12211:16)
           at e.<anonymous> (evalmachine.<anonymous>:2:27814) at evalmachine.<anonymous>:2:1246 at Object.next
           (evalmachine.<anonymous>:2:1351) at evalmachine.<anonymous>:2:285 at Promise (<anonymous>) at __awaiter
           (evalmachine.<anonymous>:2:62)

Expected behavior:

Clicking on the hamburger should slide out a side menu to the right, and I should have clean build.

Steps to reproduce:

I threw this dom into my-app.tsx from the latest ionic pwa toolkit repo today -

Related code:

render() {
    return (
      <ion-app>
        <main>
          <ion-router useHash={false}>
            <ion-route url='/' component='app-home'></ion-route>
            <ion-route url='/profile/:name' component='app-profile'></ion-route>
            <ion-nav></ion-nav>
          </ion-router>
          <ion-split-pane>
            <ion-menu>
              <ion-header>
                <ion-toolbar>
                  <ion-title>Menu</ion-title>
                </ion-toolbar>
              </ion-header>
              <ion-content forceOverscroll={false}>
                <ion-list>
                  <ion-list-header>
                    Navigate
                  </ion-list-header>
                </ion-list>
              </ion-content>
              </ion-menu>
            <ion-router-outlet animated={false} main></ion-router-outlet>
          </ion-split-pane>
        </main>
      </ion-app>
    );

Other information:

jgw96 commented 6 years ago

Hello! Thanks for using Ionic and Stencil! We have recently fixed this issue in Ionic and if you update https://github.com/ionic-team/ionic-pwa-toolkit/blob/master/package.json#L19 you will not run into this error anymore.