web-dev-qa-db-fra.com

React impossible d'importer le composant - module non trouvé

Je viens de commencer avec React.js et je ne parviens pas à importer le composant.

J'ai cette structure suivie par ce tutoriel (lien YouTube) :

-- src
----| index.html
----| app
------| index.js
------| components
--------| MyCompontent.js

C'est mon index.js:

import React from 'react';
import { render } from 'react-dom';

import { MyCompontent } from "./components/MyCompontent";

class App extends React.Component {
    render() {
        return (
            <div>
              <h1>Foo</h1>
              <MyCompontent/>
            </div>
        );
    }
}

render(<App />, window.document.getElementById('app'));

C'est MyComponent.js:

import React from "react";

export class MyCompontent extends React.Component {
  render(){
    return(
      <div>MyCompontent</div>
    );
  }
}

J'utilise ce fichier webpack (lien GitHub) .

Cependant, lorsque je lance ceci, mon module ne se charge pas.

Je reçois cette erreur dans la console du navigateur:

Erreur: Impossible de trouver le module "./components/MyCompontent"

[WDS] Hot Module Replacement enabled.  bundle.js:631:11
[WDS] Errors while compiling.  bundle.js:631:11
./src/app/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./components/MyCompontent in /home/kuno/code/react-hoteli/src/app
resolve file
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.json doesn't exist
resolve directory
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent/package.json doesn't exist (directory description file)
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist (directory default file)
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json]
 @ ./src/app/index.js 11:20-56  bundle.js:669:5

Je ne peux pas comprendre ce qui n'allait pas ici.

javascriptreactjswebpack
18
Kunok

Vous avez une faute de frappe dans votre importation. Vous demandez MyCompontent. Changer en:

import MyComponent from "./components/MyComponent";

Et toutes les fautes de frappe aussi.

17
Omri Aharon

Pour tous ceux qui viennent ici sans une faute de frappe et utilisant Webpack, assurez-vous de rechercher une clause comme celle-ci:

resolve: {
    extensions: [".jsx", ".js"]
},

dans votre webpack.config.js.

Cela indique à votre transpiler de résoudre des instructions telles que:

import Setup from './components/Setup'

à

import Setup from './components/Setup.jsx'

De cette façon, vous n'avez pas besoin de l'extension.

33
Parth Mehrotra

Vous pouvez essayer d'importer MyCompontent à partir de "./components/MyCompontent.js"

comme ça

import MyCompontent from "./components/MyCompontent.js";
2
RainDev

Vous avez écrit que le nom du fichier est MyComponent.js.

Ainsi, votre importation devrait ressembler à

import { MyCompontent } from './components/MyComponent.js'
0
Anish Hirlekar

Le problème pour moi était que la ligne d'importation n'était pas générée correctement. J'ai ce scénario:

--src
----elements
-----myCustomText.tsx

voici le fichier myCustomText.tsx:

export interface Props {
  text: string;
}

const MyCustomText = ({ text }: Props) => (
  <Text>{text}</Text>
);

export default MyCustomText

Et l'importation générée était la suivante:

import MyCustomText from '../../elements/MyCustomText';

et je l'ai changé en ceci:

import MyCustomText from '../../elements/myCustomText'

Je ne sais pas pourquoi la ligne d'importation générée a été générée automatiquement de manière erronée.

0
Adrian Buciuman