My IDE report Error Its type '"p"' is not a valid JSX element type.

[XLearner]

I imported preact into my project and the project worked successfully. However, the VSCode had always the following error message:

I can use // @ts-expect-error to shield this error, but I want to get a more gentle way to deal with this.

Could anyone help? 🤜🏽

[rschristian]

Have you restarted the TS language server?

What does your tsconfig.json look like?

[XLearner]

Here is my tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "jsx": "preserve",
    "jsxImportSource": "preact",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "target": "es5",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

[rschristian]

Remove "jsxImportSource": "preact", it shouldn't be set unless you're using the automatic JSX transform. I don't think that'll be a problem per se though.

I have to imagine it's just a temporary bug in your editor, as everything else it looks fine. Give your editor a restart it you haven't already, or try to reproduce the issue in something like codesandbox if it persists.

[XLearner]

It is no work of removing "jsxImportSource": "preact". And I've tried to restart TS Server, during the restarting process, this error message is gone, but appears after the restarting is done.
I try to reproduce the issue in a codesandbox but fail, I notice the declaration tips are different, like the following image. The reason for the difference is that I import h by hand, if I don't do that there will have a problem in runtime that can not transform React.createElement to h. However, even if I remove the h, this issue is still there.😭

[rschristian]

You can try adding "paths" to your tsconfig.json maybe, as we show here: https://preactjs.com/guide/v10/typescript#typescript-preactcompat-configuration

Otherwise not sure; not a VSCode user myself and it seems like it might be some misconfiguration in your editor specifically.

[XLearner]

Thank you very much for your patient reply. I have tried all the methods mentioned in the document, but none of them have worked. I will use comments // @ts-expect-error as a temporary solution to avoid this error, and then I will look for a solution later. Thank you.

[marvinhagemeister]

Can you share a small repo or codesandbox where the issue can be reproduced? That will make it much easier to narrow it down.

[lm-maxfab]

I have the same problem of VSCode saying "'div' cannot be used as a JSX component.". Here is a repo from which I reproduce the error message, it is a minimal preact x typescript configured following preact docs : https://github.com/lm-maxfab/preact-test

No problem at build time though, the compilation via esbuild goes well and the built output works.

[davidmz]

Here is my minimal repository with the same problem: https://github.com/davidmz/preact-types-test

[rschristian]

I'm a bit surprised to see 3 (seemingly unrelated) people have the same issue. Is this specifically an issue with the latest or recent versions of Preact? Do you still see this if you go back a bit (say, mid v10)?

[marvinhagemeister]

@lm-maxfab Thanks for sharing that repo. Weirdly I'm unable to reproduce that on my end. VSCode finds the correct JSX types. Works in both the stable release line and vscode insiders for me. Note that esbuild doesn't do any type checking. It just deletes the types, so any type errors would be ignored by it.

@davidmz I'm getting a 404 on that link. Is the repo private?

[davidmz]

@marvinhagemeister oh, sorry, it really was private. I've now made it public.

But now I see the same error with clean pnpm create vite test-app --template preact-ts, so I doubt that Preact is the problem. It looks more like something is broken in our VSCode settings...

[davidmz]

Well, my VSCode had the ms-vscode.vscode-typescript-next extension installed. I disabled it, and that seemed to fix the problem, at least for me. Sorry, I didn't check that at first.

[rschristian]

Interesting, maybe should raise this on that extension's tracker.

@lm-maxfab and @XLearner, do you have this installed too by chance?

[davidmz]

I see there is a recent bug in Typescript that looks similar: microsoft/TypeScript#53939. Maybe the extension was using the nightly version with this bug.

[lm-maxfab]

@lm-maxfab and @XLearner, do you have this installed too by chance?

Yep, had it installed too, everything's fine when disabling it. Thanks a lot!

[XLearner]

Interesting, maybe should raise this on that extension's tracker.

@lm-maxfab and @XLearner, do you have this installed too by chance?

Wow, that's really the key to the problem. After reloading this plugin, there is no issue anymore. Thank you very much!

[JoviDeCroock]

Closing this as it seems to be a genuine TS related bug, for anyone finding this thread, disabling [ms-vscode.vscode-typescript-next](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next) fixes the issue.