Skip to content

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

Closed
@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

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions