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

Question

I'm developing a map functionality using ReactJS, My app.js file is:

import React, { Component } from 'react'; import './Map'; class App extends Component {    render() {      return (          <div className="App">             <Map/>          </div>      );    } } export default App; 

The error is:

./src/App.js Line 8:  'Map' is not defined  react/jsx-no-undef  Search for the keywords to learn more about each error. 

How can I solve this problem?

Answer 1

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

Answer 2

you should do import Map from './Map' React is just telling you it doesn't know where variable you are importing is.