React kann Komponente nicht importieren - Modul nicht gefunden

Question

Ich habe gerade mit React.js gestartet und kann die Komponente nicht importieren.

Ich habe diese Struktur als gefolgt von this tutorial (YouTube link):

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

Das ist mein 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')); 

Dies ist MyComponent.js:

import React from "react"; 

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

ich this webpack file (GitHub link) verwende.

Wenn ich dies jedoch ausführe, kann mein Modul nicht geladen werden.

ich diesen Fehler in der Browser-Konsole:

Error: Cannot find 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 

Kann nicht herausfinden, was hier passiert.

Answer 1

Sie haben einen Tippfehler in Ihrem Import. Sie fordern MyCompontent an. Ändern zu:

import MyComponent from "./components/MyComponent"; 

Und alle Tippfehler auch.

Answer 2

können Sie versuchen, MyCompontent zu importieren aus "./components/MyCompontent.js"

wie diese

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

Answer 3

Sie geschrieben haben, dass der Dateiname MyComponent.js ist.

So Ihre Import wie

import { MyCompontent } from './components/MyComponent.js' 

Answer 4

Für alle kommen hier ohne ein Tippfehler aussehen sollte, und wird mit Webpack, sollten Sie eine Klausel wie folgt überprüfen:

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

in Ihrem webpack.config.js.

Dies teilt Ihre Transpiler Aussagen zu lösen wie:

import Setup from './components/Setup' 

zu

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

Auf diese Weise können Sie die Erweiterung nicht benötigen.