React Js Error: Is Not Defined React/Jsx-No-Undef

React JS Error: is not defined react/jsx-no-undef

Try using

import Map from './Map';

When you use import 'module' it will just run the module as a script. This is useful when you are trying to introduce side-effects into global namespace, e. g. polyfill newer features for older/unsupported browsers.

ES6 modules are allowed to define default exports and regular exports. When you use the syntax import defaultExport from 'module' it will import the default export of that module with alias defaultExport.

For further reading on ES6 import - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

'Component' is not defined react/jsx-no-undef

You have to name your import.

import React from 'react';
import Item from './Item';

class App extends React.Component {
 
  render() {
    return (
        <div>      
        <Item />
      </div>
    );
  }
}

export default App;

'TextField' is not defined react/jsx-no-undef

missing import of textfield. Please add below import in your code.

import TextField from '@material-ui/core/TextField';
or
import { TextField } from '@material-ui/core';

'Routes' is not defined react/jsx-no-undef

Well the thing was, that I was following a guide for the older react-router-dom;

In order to fix that, I just read the new docs for react-router-dom@6;

There is no <Switch> now, instead you wrap your APP in just like this:

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
); 

Then in the App component, you wrap your content in <Routes> and for every different path we use <Route> </Route> or just <Route />, depends on your project.

Theres my example, just to be more clear:

function App() {
  return (
    <div>
    <MainNavigation/>
      <Routes>
        <Route path="/" element={<AllMeetups />}></Route>
        <Route path="/new-meetups" element={<NewMeetups />}></Route>
        <Route path="/favorites" element={<Favorites />}></Route>
      </Routes>
    </div>
  );
}

src\components\Home.js Line 6:10: 'Container' is not defined react/jsx-no-undef

You need to define Container first for example:

import React from 'react'
import styled from "styled-components";

const Container = styled.Text`
 font-size: 42;
`;

function Home() {
    return (
        <Container>
            home
        </Container>
    )
}

export default Home

If you have a Container that you are already created and exported defaultl then import it as follows

import React from 'react'
import styled from "styled-components";
import Container from "file-path";

function Home() {
    return (
        <Container>
            home
        </Container>
    )
}

export default Home

If you export Container as constant then you need to import as

import React from 'react'
import styled from "styled-components";
import { Container } from "file-path";

function Home() {
    return (
        <Container>
            home
        </Container>
    )
}

export default Home

For more please refer this

Switch' is not defined react/jsx-no-undef

import every module in a right way as below:

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from "react-router-dom";

// import your components here ...
import Home from './Home'
...




class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Router>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/services" component={Services} />
          <Route path="/products" component={Products} />
          <Route path="/contact-us" component={ContactUs} />
          <Route path="/sign-up" component={SignUp} />
          <Route path="/marketing" component={Marketing} />
          <Route path="/consulting" component={Consulting} />
        </Switch>
      </Router>
    );
  }
}

export default App;

---

Related Topics