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?
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
you should do import Map from './Map'
React is just telling you it doesn't know where variable you are importing is.
This happens to me occasionally, usually it's just a simple oversight. Just pay attention to details, simple typos, etc. For example when copy/pasting import statements, like this: