vNode passed as children has unexpected type. Make sure it's using the correct h() function.

[philipfeldmann]

When using state tunnel with stencil 1.3.3 I get vNode passed as children has unexpected type. Make sure it's using the correct h() function. I simply just followed the guide.

This is my tunnel:

import { h } from "@stencil/core";
import { createProviderConsumer } from "@stencil/state-tunnel";

export interface CollapsibleState {
  isOpen: boolean;
  setIsOpen: (fn: (oldVal: boolean) => boolean) => void;
}

export const CollapsibleTunnel = createProviderConsumer<CollapsibleState>(
  {
    isOpen: true,
    setIsOpen: () => false
  },
  (subscribe, child) => (
    <context-provider subscribe={subscribe} renderer={child}></context-provider>
  )
);

Setting up the provider:

export class Collapsible {
  @State()
  isOpen = false;

  render() {
    return (
      <div class="cui-collapsible">
        <CollapsibleTunnel.Provider
          state={{
            isOpen: this.isOpen,
            setIsOpen: fn => {
              this.isOpen = fn(this.isOpen);
            }
          }}
        >
          <slot />
        </CollapsibleTunnel.Provider>
      </div>
    );
  }
}

Using the tunnel:

export class CollapsibleBody {
  render() {
    return (
      <CollapsibleTunnel.Consumer>
        {({ setIsOpen }) => (
          <button onClick={() => setIsOpen(o => !o)}>Toggle</button>
        )}
      </CollapsibleTunnel.Consumer>
    );
  }
}

Types are also not correctly inferred to the Consumer, setIsOpen is typed as any.

[petermikitsh]

The warning message is coming from stencil core. See https://github.com/ionic-team/stencil/issues/2007