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

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?

11 Answers

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 -

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:

You have to tell it which component you want to import by explicitly giving the class name..in your case it's Map

import Map from './Map'; class App extends Component{ /*your code here...*/ } 

The Syntax for the importing any module is

import { } from "module"; 

or

import module-name from "module"; 

Before error (cakeContainer with small "c")

After Fix

in map.jsx or map.js file, if you exporting as default like:

export default MapComponent; 

then you can import it like

import MapComponent from './map' 

but if you do not export it as default like this one here

export const MapComponent = () => { ...whatever } 

you need to import in inside curly braces like

import { MapComponent } from './map' 

**Here we get into your problem:**
sometimes in our project (most of the time that I work with react) we need to import our styles in our javascript files to use it. in such cases we can use that syntax because in such cases, we have a blunder like webpack that that takes care of it, then later on, when we want to bundle our app, webpack is going to extract our CSS files and put it in a separate (for example) app.css file. in those situations, we can use such syntax to import our CSS files into our javascript modules.

like below:

import './css/app.css' 

if you are using sass all you need to do is just use sass loader with webpack!

Strangely enough, the reason for my failure was about the CamelCase that I was applying to the component name. MyComponent was giving me this error but then I renamed it to Mycomponent and voila, it worked!!!

should write like this -->

import Map from './map';

1. look in this Map should have first later is capital .(important note)
2. inset the single 'just mention your file location correctly'.

Here you have not specified class name to be imported from Map.js file. If Map is class exportable class name exist in the Map.js file, your code should be as follow.

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

its very similar with nodejs

var User= require('./Users'); 

in this case its React:

import User from './User' 

right now you can use

return ( <Users></Users> ) 

I hope this algorithm will help .

1. npm install reactjs

2. npx create-react-app ded-moroz.

3. Enter to directory ‘ded-moroz’.

4. npx create-react-component Weapon (pay attention component should be uppercase).

5. Move component to ‘src’ directory

6. Enter to jsx file, edit "Weapon" to "Snow"( up to you, we are testing).

7. Open App.js file and put import Weapon from './Weapon/Weapon';

8. Put tag <Weapon/> in your App method within <div className="App"> .

9. Run npm start