Stencil: FunctionalComponent - Dev mode errors

[cjorasch]

Stencil version:

 @stencil/[email protected]

I'm submitting a:
[x] bug report

Current behavior:
Using functional components with simple text content results in errors.

For any Functional Component such as:

const MyComponent: FunctionalComponent = (_props, children) => (
    <div>
        <div>Hello</div>
        {children}
    </div>
);

If you use the component with simple text children then there is an error logged. For example:

render() {
    return <MyComponent>John</MyComponent>;
}

produces the following error:

[STENCIL-DEV-MODE] vNode passed as children has unexpected type.
Make sure it's using the correct h() function.
Empty objects can also be the cause, look for JSX comments that became objects.

<MyComponent>John</MyComponent> => error
<MyComponent><span>John</span></MyComponent> => no error
<MyComponent></MyComponent> => no error

Expected behavior:
Simple text should be valid child content.

[simonhaenisch]

@manucorporat we get the same warning but I don't think it's because of simple text as content, but because the child content is a function:

https://github.com/ionic-team/stencil/blob/358e92587a331799b195c1ef5b4ba5775014a63f/src/runtime/vdom/h.ts#L32-L40

isComplexType checks whether the child is either an object or a function, and for @stencil/state-tunnel it's actually required to pass a function as the child.

[jdnichollsc]

Can you try using High Order Components?
My example: https://gist.github.com/jdnichollsc/cecb152ecdd41e2a3733a3dfe03f0ce3#file-utils-tsx

[simonhaenisch]

@jdnichollsc state-tunnel kind of is a HOC... not sure how using a HOC is supposed to solve this?

[jdnichollsc]

Nevermind, very odd

[simonhaenisch]

The state tunnel works like this:

<RootStateTunnel.Consumer>
  {state => (
    <my-comp state={state} />
  )}
</RootStateTunnel.Consumer>

The first child of the consumer needs to be a function that receives the state as an argument and returns JSX. Wrapping the child function in [] doesn't solve this for me. The warning shows (in my case) because the child is of type function, even though it's required by the state tunnel.

[flawyte]

Had the same error with a text node (e.g. {condition ? 'foo' : 'bar'}) when upgrading a project to Stencil v1.7.4. Wrapping the text node in a <span> (e.g. <span>{condition ? 'foo' : 'bar'}</span>) solved it for me, but not sure every use case can be solved so easily.

[dutscher]

"@stencil/core": "^1.7.4",

i got the error with && conditions see here: render() { return <Fragment>{this.imagePath && this.renderImage()}</Fragment>;}

here is a good guide for stenciljs jsx usage https://www.joshmorony.com/understanding-jsx-for-stencil-js-applications/

cheers

[philipfeldmann]

@ simonhaenisch Is it even possible to use state tunnel at this point?
I get the same error, is there any way around it?

[aharris]

I am seeing a similar issue in tests. After adding state tunnel my tests no longer run:

Error:

    vNode passed as children has unexpected type.
    Make sure it's using the correct h() function.
    Empty objects can also be the cause, look for JSX comments that became objects.

      83 |     return (
      84 |       <div>
    > 85 |         <Tunnel.Consumer>
         |         ^
      86 |           {({ disabled }) => (
      87 |             <input
      88 |               

Test:

describe('MyInput', () => {
  it('should contain class', async () => {
    const page = await newSpecPage({
      components: [MyInput],
      html: `<my-input></my-input>`
    });
  })
});

[simonhaenisch]

Yes, state tunnel still works in production because this is just a dev warning.

[WickyNilliams]

Hey. This does not seem to be fixed. The original issue does not mention state tunnel and functions, but rather text/string as children. I am still observing this issue in stencil v1.8.5.

[simonhaenisch]

@WickyNilliams I’m pretty sure it’s only fixed in the next version of the compiler if you npm install @stencil/core@next and then add the —next flag to the stencil build command. It will be released with the 1.9 release and the plan is to make it the default compiler with 1.10.

Anyway, it works as expected in production builds, so just ignore the warning, or add -vNode to your dev tools console filter.

[WickyNilliams]

OK thanks. I'll give 1.9 a go when I have a chance. For now I guess I can ignore! Cheers