Трафарет JS: отсутствует импорт "h" для типов JSX

Question

Я пытаюсь создать веб-компонент, используя трафарет, и при использовании тега h1 внутри файла TSX я получаю ошибку ниже:

[ 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';

Ниже приведен код для моего веб-компонента:

import { Component } from "@stencil/core";

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

Answer 1

Ладно, наконец-то получил его из официальных документов .

С версии 1.0.0 трафарета произошли серьезные изменения

BREAKING CHANGES

Общей проблемой JSX является использование в глобальных типах JSX каждого отдельного проекта. Многие из необходимых изменений предназначены для того, чтобы избежать глобальных типов, которые часто вызывают проблемы для приложений, которые импортируют из многочисленных пакетов. Другое изменение заключается в том, что каждый компонент импортирует свой рендерер, например, функцию h () JSX.

Требуется импорт {h} Чтобы рендерить JSX в приложениях Stencil, функцию h () необходимо импортировать из @ трафарет / ядро:

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

function app() {
  return <ion-app></ion-app>
}

h означает «гиперскрипт», в который преобразуются элементы JSX (это фактическая функция, выполняемая при рендеринге во время выполнения). Импортирование h трафарета эквивалентно React. React.createElement. Это также объясняет, почему tsconfig приложения. json устанавливает конфигурацию {"jsxFactory": "h"}, что подробно описано в документах JSX Factory Function TypeScript.

Answer 2

Вы пытались добавить h зависимость в свой импорт?

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