Error on 11-typescript-and-jsx-in-deno

[warcayac]

I have a Deno 2 project with these files:

deno.json

{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "React.createElement",
        "jsxFragmentFactory": "React.Fragment"
    },
    "imports": {
        "react": "npm:react@^18.3.1"
    }
}

App.tsx

import React from "https://esm.sh/react@18.3.1";

const App = () => {
    return <h1>Hello from JSX</h1>;
};

console.log(App());

this project is running as expected with no errors, But if I use this line:

import React from "react";

I get the following error on H1 tags:

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.deno-ts(7026)
⚠ Error (TS7026)  | 
JSX element implicitly has type any because no interface JSX.IntrinsicElements exists.

I tried adding @types/react package, then no error was showed however when running the program I get this error:

error: Could not resolve 'npm:@types/react@18.3.12'.

Caused by:
    [ERR_INVALID_PACKAGE_TARGET] Invalid "exports" main target {"types@<=5.0":{"default":"./ts5.0/index.d.ts"},"types":{"default":"./index.d.ts"}} defined in the package config /home/warcayac/.cache/deno/npm/registry.npmjs.org/@types/react/18.3.12/package.json imported from 'file:///home/warcayac/DataDisk/Projects/Programming/Deno/_tutorials/MoonHighway/deno-2-course/11-typescript-and-jsx-in-deno/App.tsx'; target must start with "./"

I don't know what's happening. Any ideas?

[jarrodu]

These compiler options worked for me.

...
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "npm:react@^18.3",
    "jsxImportSourceTypes": "npm:@types/react@^18.3"
  }, 
...

See https://docs.deno.com/runtime/reference/jsx/#jsx-automatic-runtime-(recommended)

[warcayac]

I just went with:

{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "React.createElement",
        "jsxFragmentFactory": "React.Fragment"
    },
    "imports": {
        "react": "https://esm.sh/react@18.3.1"
    }
}

[krutoo]

@jarrodu @warcayac This options is works for JSX but is it works for import {} from 'react';?

For example I want to use hooks like useState but as I mentioned here I can't use imports from react because Deno 2 does not sees types for React NPM-package