Réagir JS Erreur: n'est pas défini réagir/jsx-pas-fnud

Je suis l'élaboration d'une carte à l'aide de la fonctionnalité ReactJS, Mon app.js fichier 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?

import Map from './Map'; si vous avez utilisé d'exportation par défaut dans le fichier de la carte sinon import {Map} from './Map'; nommé pour l'exportation.

OriginalL'auteur Sarvesh Kulkarni | 2017-06-08

  1. 14

    que vous devriez faire import Map from './Map' Réagir est juste vous dire qu'il ne sait pas où la variable à l'importation.

    OriginalL'auteur Demon

  2. 10

    Essayez d'utiliser

    import Map from './Map';

    Lorsque vous utilisez import 'module' il suffit d'exécuter le module en tant que script. Ceci est utile lorsque vous essayez d'introduire des effets secondaires dans l'espace de noms global, de l'e. g. polyfill de nouvelles fonctionnalités pour les anciens/non pris en charge navigateurs.

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

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

    OriginalL'auteur shawon191

  3. 5

    Vous avez à dire à ce composant que vous souhaitez importer en donnant explicitement le nom de la classe..dans votre cas, c'est la Carte

    import Map from './Map';

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

    OriginalL'auteur Shahrukh Anwar

  4. 4

    Ce qui m'arrive, parfois, d'habitude c'est juste une simple surveillance. Juste à payer attention aux détails, de simples fautes de frappe, etc. Par exemple lors de copier/coller des déclarations d'importation, comme ceci:
    Réagir JS Erreur: n'est pas défini réagir/jsx-pas-fnud

    OriginalL'auteur Mirza Sisic

  5. 1

    Curieusement, la raison de mon échec était sur le CamelCase que je me suis inscrite sur le nom du composant. MyComponent me donnait cette erreur, mais ensuite je l'ai renommé pour Mycomponent et le tour est joué, il a travaillé!!!

    OriginalL'auteur Marco

  6. 0

    dans map.jsx ou map.js fichier, si vous avez l'exportation en tant que par défaut comme:

    export default MapComponent;

    ensuite, vous pouvez l'importer comme 

    import MapComponent from './map'

    mais si vous n'avez pas l'exporter en tant que par défaut comme celle-ci 

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

    vous avez besoin d'importer dans l'intérieur des accolades comme 

    import { MapComponent } from './map'

    Ici, nous arrivons à votre problème:

    parfois, dans notre projet (la plupart du temps que je travaille avec react) nous avons besoin d'importer nos styles dans les fichiers javascript à utiliser. dans de tels cas, nous pouvons utiliser cette syntaxe , car dans de tels cas , nous avons une bourde comme webpack que qui prend soin de lui, puis , plus tard, quand nous voulons bundle notre application, webpack va extraire de nos fichiers css et le mettre dans un autre (par exemple) app.fichier css. dans ce cas, nous pouvons utiliser ces syntaxe pour importer nos fichiers css dans nos modules javascript.

    comme ci-dessous:

    import './css/app.css'

    si vous utilisez sass tout ce que vous devez faire est de simplement utiliser sass chargeur avec webpack!

    OriginalL'auteur a_m_dev

  7. 0

    doit écrire comme ceci -->

    Carte d'importation de". /la carte";

    1. regarder dans cette Carte doit être le premier plus tard, c'est le capital .(note importante)
    2. encart le single "il suffit de mentionner votre emplacement de fichier correct".
    seulement node_module fichier, vous pouvez accéder directement . et fichier css aussi..

    OriginalL'auteur Muo sigma classes