17

All of a sudden my react typescript project has started rejecting <span> tags with 

TS2339: Property <span> does not exist on type 'JSX.IntrinsicElements'

Every other tag is absolutely fine, but <span>s any where in my .tsx files throw this error.

Can anyone advise?

Improve this question

5 Answers 5

Reset to default
38

I had the same problem but for me, it was the p element. The reason for the error was that I refactored a p element to h3 for instance and VSCode changed also the type definition.

As you pointed out cleaning the node_modules and doing a fresh npm install does the trick.

Just wanted to point out what could cause the problem.

Improve this answer
7
  • 3
    Did you report a defect against VSCode? Seems bogus for it to modify files under the node modules directory.
    – Randy Hudson
    Commented Aug 14, 2018 at 17:15
  • To be honest. I didn't. Not thought about that this could be a bug.
    – datoml
    Commented Aug 14, 2018 at 17:16
  • 2
    Thanks. I had this exact same problem. Refactored (renamed) an element via F2 in VSCode and it renamed the type definition for div within interface IntrinsicElements in node_modules/@types/react/index.d.ts.
    – Ian Routledge
    Commented Sep 18, 2019 at 8:24
  • Yep, same issue for me... found out the hard way that using rename in JSX tag names seems to rename every single instance of that HTML tag, throughout your entire project, and even affects node_modules too as we've discovered.
    – LaVache
    Commented Jul 29, 2020 at 14:30
  • 7
    Simply npm uninstall @types/react and npm install @types/react is fine too, for me there was no need to remove the entirety of node_modules. Takes a long time for some people to delete it heh
    – lieuwe_berg
    Commented Apr 4, 2021 at 19:30
10

Can anyone advise?

  • Make sure you have import * as React from 'react' in your file
  • Update types for react npm install @types/react
Improve this answer
1
  • I cleared and "npm install"-ed my packages and everything sorted itself out so marked this answer as closest.
    – RNDThoughts
    Commented Jan 26, 2018 at 16:23
0

i had the same issue with section element. literally, what worked for me was: deleting the type declaration - JSX.Element, and the element, and return them. after that VSCode accepted.

Improve this answer
0

tl;dr : specifically update @types/react dependency.

  • npm uninstall @types/react and npm install @types/react (my fix)
  • npm i @types/react@latest (should work as well as someone above noted)

context : installed a library and TS immediately started flagging the TS2339 error for all html elements, across all files. fwiw, code still ran as expected. npx tsc was catching the errors too.

tried switching the vscode workspace/typescript version, uninstall/reinstalling the new package, deleting node_modules and package-lock then fresh npm install but no go on those attempts.

specifically importing React into any files wasn't necessary for my fix. Hope this helps someone!

Improve this answer
0

I had same problem while I was making a component name start with small letter.

<Suspense fallback={<fallbackLoading lang={payload.lang} />}>

My fallbackLoading was showing error: does not exist on type 'JSX.IntrinsicElements'. The correction will be bellow and the component name also need to rewrite FallbackLoading .

<Suspense fallback={<FallbackLoading lang={payload.lang} />}>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.