React JS Error: is not defined react/jsx-no-undef
JavascriptReactjsJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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
Solution 2 - Javascript
you should do import Map from './Map'
React is just telling you it doesn't know where variable you are importing is.
Solution 3 - Javascript
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:
Solution 4 - Javascript
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...*/
}
Solution 5 - Javascript
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
Solution 6 - Javascript
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!
Solution 7 - Javascript
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!!!
Solution 8 - Javascript
should write like this -->
import Map from './map';
- look in this
Map
should have first later is capital .(important note) - inset the single 'just mention your file location correctly'.
Solution 9 - Javascript
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;
Solution 10 - Javascript
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>
)
Solution 11 - Javascript
I hope this algorithm will help .
-
npm install reactjs
-
npx create-react-app ded-moroz
. -
Enter to directory ‘ded-moroz’.
-
npx create-react-component Weapon
(pay attention component should be uppercase). -
Move component to ‘src’ directory
-
Enter to jsx file, edit "Weapon" to "Snow"( up to you, we are testing).
-
Open App.js file and put
import Weapon from './Weapon/Weapon';
-
Put tag
<Weapon/>
in your App method within<div className="App">
. -
Run
npm start