Problem with <ion-nav>

Stencil
1

Hi to everyone, these are my stencil and ionic version

"dependencies": {
    "@ionic/core": "one"
  },
  "devDependencies": {
    "@stencil/core": "1.0.0-beta.8"
  }

I’m trying to use the <ion-menu> inside a <ion-split-pane> like in a ionic app, this is my code (this is the original repo of this code https://github.com/modemlooper/stencil-pwa-sidemenu ):

app-root.tsx

[...]
render() {
    return (
      <ion-app>
        <ion-router useHash={false}>
          <ion-route url="/" component="app-home" />
          <ion-route url="/profile/:name" component="app-profile" />
        </ion-router>

        <ion-split-pane when="lg">
          <ion-menu side="start">
            <ion-header>
              <ion-toolbar color="primary" />
            </ion-header>

            <ion-content forceOverscroll={false}>
              <ion-list>
                <ion-menu-toggle autoHide={false}>
                  <ion-item href="/">
                    <ion-icon slot="start" name="home" />
                    <ion-label>Home</ion-label>
                  </ion-item>
                </ion-menu-toggle>

                <ion-menu-toggle autoHide={false}>
                  <ion-item href="/profile/piero">
                    <ion-icon slot="start" name="person" />
                    <ion-label>Profile</ion-label>
                  </ion-item>
                </ion-menu-toggle>
              </ion-list>
            </ion-content>
          </ion-menu>
          <ion-nav main />
        </ion-split-pane>
      </ion-app>
    );
  }
[...]

The problem is that <ion-nav main /> gives me this error:

55
Schermata 2019-07-01 alle 14.56.55.png1426×348 31.8 KB

And without “main” the split pane don’t work properly

08
Schermata 2019-07-01 alle 16.13.08.png4096×1008 197 KB

This is the expected behaviour

40
Schermata 2019-07-01 alle 16.15.40.png4096×854 165 KB

How is it possible to fix this? I don’t get how to use properly the ion menu inside a split pane…
Thank you so much

2

I know that is probably too (tooooo) late for an answer… but I step at the same problem today and found this post and also a solution.

There’s now a Stencil action at the docs for split pane, that worked like a charm.