Skip to content

TypeScript 4.1 + Preact: TypeScript does not pick up JSX.IntrinsicElements w. jsx: react-jsx #41118

@ddprrt

Description

@ddprrt

This is Re: #40502 cc @weswigham @DanielRosenwasser

Using the new JSX transform and Preact as import source, TypeScript doesn't seem to pick up the JSX types that are shipped by Preact. It works as described in #40502 with additionally installed @types/react, but not with the types that come with Preact itself. Daniel suggested filing a new bug 😄

TypeScript Version: 4.1.0-dev.20201015

Search Terms: Preact, JSX, JSX Transform

Code

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx", 
    "jsxImportSource": "preact",
    "types": ["preact/jsx-runtime"],
  }
}

This is the d.ts file that contains the JSX definitions: https://github.com/preactjs/preact/blob/master/jsx-runtime/src/index.d.ts

import { render } from "preact";

function App() {
  return (
    <>
      <h1>Hello World</h1>
    </>
  );
}

const node = document.querySelector("#app");
if (node) {
  render(<App />, node);
}

export default {};

Note: The JSX definitions are in the jsx and jsxDEVnamespaces. I thought this might be an issue. But If I move JSX into the global namespace with

declare global {
  export import JSX = JSXInteral;
}

I get a compile error: Cannot read property 'get' of undefined

Expected behavior: Since TypeScript knows to pull in jsx from preact/jsx-runtime, I'd expect it to pull in JSX types from preact/jsx-runtime/src/index.d.ts.

Actual behavior: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)

Playground Link: I have a branch in a repo: https://github.com/ddprrt/preact-typescript-starter/tree/jsx-transform

Related Issues: #40502

Metadata

Metadata

Assignees

Labels

BugA bug in TypeScriptDomain: JSX/TSXRelates to the JSX parser and emitterFix AvailableA PR has been opened for this issue

Type

No type
No fields configured for issues without a type.

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions