Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 :(

like image 294
Leon Gaban Avatar asked Sep 13 '18 22:09

Leon Gaban


People also ask

How do you fix JSX element implicitly has type any because no interface JSX IntrinsicElements exists?

To solve the error "JSX element implicitly has type 'any' because no interface 'JSX. IntrinsicElements' exists", make sure to install the typings for react running the command npm install --save-dev @types/react@latest @types/react-dom@latest and restart your IDE. Copied!

How do I fix JSX expressions must have one parent element?

js error "JSX expressions must have one parent element" occurs when a component returns multiple elements. To solve the error, wrap the elements in a parent div element or use a fragment, e.g. <><h2>One</h2><h2>Two</h2></> .

What is JSX in React JS?

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.


1 Answers

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
like image 136
Leon Gaban Avatar answered Sep 23 '22 12:09

Leon Gaban