web-dev-qa-db-fra.com

React JS Error: n'est pas défini react/jsx-no-undef

Je développe une fonctionnalité de carte à l'aide de ReactJS. Mon fichier app.js est:

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

L'erreur est:

./src/App.js
Line 8:  'Map' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

Comment puis-je résoudre ce problème?

javascriptreactjs
16
Sarvesh Kulkarni

import Map from './Map' React vous dit simplement qu'il ne sait pas où se trouve la variable que vous importez.

14
Demon

Essayez d'utiliser

import Map from './Map';

Lorsque vous utilisez import 'module', le module sera exécuté en tant que script. Ceci est utile lorsque vous essayez d'introduire des effets secondaires dans un espace de noms global, par exemple. g. Polyfill fonctionnalités plus récentes pour les navigateurs plus anciens/non pris en charge.

Les modules ES6 sont autorisés à définir des exportations par défaut et des exportations régulières. Lorsque vous utilisez la syntaxe import defaultExport from 'module', il importe l'exportation par défaut de ce module avec l'alias defaultExport.

Pour en savoir plus sur l'importation ES6 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

10
shawon191

Vous devez lui indiquer le composant que vous souhaitez importer en donnant explicitement le nom de la classe .. dans votre cas, il s'agit de Carte

import Map from './Map';

class App extends Component{
    /*your code here...*/
}
5
Shahrukh Anwar

Cela m'arrive de temps en temps, en général c'est juste un simple oubli. Faites juste attention aux détails, aux fautes de frappe simples, etc. Par exemple, lorsque vous copiez/collez des instructions d'importation, comme ceci: enter image description here

4
Mirza Sisic

Curieusement, la raison de mon échec était liée à la CamelCase que j'appliquais au nom du composant. MyComponent me donnait cette erreur mais ensuite je l'ai renommée Mycomponent et le tour est joué, ça a fonctionné !!!

1
Marco

devrait écrire comme ça -> 

importer une carte de './map';

  1. regardez dans cette carte devrait avoir d'abord plus tard est capitale. (note importante)
  2. insérez le single "il suffit de mentionner votre emplacement de fichier correctement".
0
Muo sigma classes

dans le fichier map.jsx ou map.js, si vous exportez par défaut comme:

export default MapComponent;

alors vous pouvez l'importer comme 

import MapComponent from './map'

mais si vous ne l'exportez pas par défaut, comme celui-ci 

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

vous devez importer à l'intérieur des accolades comme 

import { MapComponent } from './map'


Ici nous entrons dans votre problème:

parfois, dans notre projet (la plupart du temps, je travaille avec Rea), nous devons importer nos styles dans des fichiers JavaScript pour pouvoir les utiliser. dans de tels cas, nous pouvons utiliser cette syntaxe, car dans de tels cas, nous avons une gaffe telle que Webpack qui s'en occupe, puis plus tard, lorsque nous voulons regrouper notre application, Webpack va extraire nos fichiers CSS et les mettre dans un fichier app.css séparé (par exemple). Dans ce cas, nous pouvons utiliser cette syntaxe pour importer nos fichiers CSS dans nos modules javascript.

comme ci-dessous:

import './css/app.css'

si vous utilisez sass, il vous suffit d'utiliser sass loader avec webpack!

0
a_m_dev