JSX error: Property does not exist on type 'JSX.IntrinsicElements

Question

I converted my Container into a .jsx file, but now I'm getting the following errors on my HTML elements in the render method:

Property does not exist on type 'JSX.IntrinsicElements.div

Property does not exist on type 'JSX.IntrinsicElements.h1

---

package.json

{
  "name": "moonholdings.io",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/ --source-map",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive --source-map",
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "dependencies": {
    "node-sass-chokidar": "^1.3.3",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts-ts": "2.17.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@types/jest": "^23.3.2",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.5",
    "@types/react-redux": "^6.0.9",
    "@types/react-router": "^4.0.25",
    "@types/react-router-dom": "^4.2.6",
    "@types/react-router-redux": "^5.0.14",
    "@types/redux": "^3.6.31",
    "ramda": "^0.25.0",
    "typescript": "^3.0.3"
  }
}

loginContainer.js

    import * as React from 'react';
import { connect } from 'react-redux';

// Actions
// import { addCoins } from 'actions/coins';

interface IProps {
  loginActions: any
}

interface IState {
  email: string;
  password: string;
}

class LoginContainer extends React.Component<IProps, IState> {

  public state: IState = {
    email: '',
    password: ''
  };

  public render() {
    return (
      <div id="login-container">
        <h1>Login</h1>
      </div>
    );
  }
}

// const mapDispatchToProps = dispatch => ({
//   addCoins: (...args) => dispatch(addCoins(...args))
// });

export const LoginContainerJest = LoginContainer;

export default connect(null, null)(LoginContainer);

I've rm -R node_modules, I also did see that I had "@types/react-redux" installed twice, but I fixed that. Reinstalled Typescript, and still get the same (2312,14): Duplicate identifier 'LibraryManagedAttributes'. Error :(

Answer 1

Found the answer: Typescript Error: TS2339: Property 'span' does not exist on type 'JSX.IntrinsicElements'

• Make sure you have import * as React from 'react' in your file
• Update types for react npm install @types/react

Answer 2

In my nextjs project, I encountered the same error. All I did was close vs code and open it again. Everything was fine.

When I first entered the command "npx create-next-app@latest", I didn't wait for all the dependencies to be installed and went ahead to make some changes in the page.tsx and layout.tsx file in the app folder. I got the error message and tried to fix it by changing the

"jsx": "preserve"
TO
"jsx": "react-jsx"

in my tsconfig.jsonn file

HOWEVER, it still didn't work. So I closed the vs code editor and opened it again. I got no error after that.

Hope this helps.