StencilJS: Missing "h" import for JSX types

I am trying to create a web component using the stencil and while using the h1 tag inside TSX file I get below error:

[ ERROR ] Missing "h" import for JSX types: ./src/components/side-drawer/side-drawer.tsx:1:19 In order to load accurate JSX types for components, the "h" function must be imported from "@stencil/core" by each component using JSX. For example: import { Component, h } from '@stencil/core';

Below is the code for my web component:

import { Component } from "@stencil/core";
@Component({ tag: "vs-test",
})
export class Test { render() { return ( <div> <h1>Hello</h1> </div> ); }
}

2 Answers

Okay so finally got it from the official docs.

There is a breaking change since v1.0.0 of stencil

BREAKING CHANGES

A common issue with JSX is each separate project's use of global JSX types. Many of the required changes are in order to avoid global types, which often cause issues for apps which import from numerous packages. The other change is having each component import its renderer, such as JSX's h() function.

Import { h } is required In order to render JSX in Stencil apps, the h() function must be imported from @stencil/core:

import { h } from '@stencil/core';
function app() { return <ion-app></ion-app>
}

The h stands for "hyperscript", which is what JSX elements are transformed into (it's the actual function executed when rendering within the runtime). Stencil's h import is an equivalent to React's React.createElement. This also explains why the app's tsconfig.json sets the { "jsxFactory": "h" } config, which is detailed further in TypeScript's JSX Factory Function Docs.

Have you tried adding h dependency to your import?

import { Component, h } from '@stencil/core';