Reagieren Sie nicht zu importieren-Komponente — Modul nicht gefunden
Ich habe gerade angefangen mit React.js und ich bin nicht in der Lage zu importieren Komponente.
Habe ich diese Struktur, gefolgt von dieses tutorial (YouTube-link) :
-- src
----| index.html
----| app
------| index.js
------| components
--------| MyCompontent.js
Dies 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 bin mit das webpack-Datei (GitHub-link).
Jedoch, wenn ich diese ausführe, wird mein Modul nicht geladen wird.
Ich bekomme diese Fehlermeldung in der browser-Konsole:
Error: Cannot find module./Komponenten/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 schief gelaufen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Haben Sie einen Tippfehler in den import. Du bist ersuchenden
MyCompontent
. Änderung:Und alle Tippfehler sowie.
MyCompontent
stattMyComponent
Für jeden, der hierher kommt ohne ein Tippfehler, und ist mit Webpack, sicher sein, zu prüfen, eine Klausel wie dieser:
in Ihrem webpack.config.js.
Dieser erzählt Ihr transpiler zu beheben Aussagen wie:
zu
Diese Weise brauchen Sie nicht die Erweiterung.
Können Sie versuchen, zu importieren MyCompontent von "./components/MyCompontent.js"
wie diese
Haben Sie geschrieben, dass das mit dem Namen ist MyComponent.js.
So, Ihr import Aussehen sollte