Reactコンポーネントをインポートできません - モジュールが見つかりません

Question

React.jsを使い始めましたが、コンポーネントをインポートできませんでした。 this tutorial (YouTube link)が続くよう

私はこのような構造を持っている：

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

これは私の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')); 

これはMyComponent.jsです：

import React from "react"; 

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

私はthis webpack file (GitHub link)を使用しています。

しかし、これを実行すると、モジュールが読み込まれません。

私は、ブラウザのコンソールにこのエラーが表示されます。

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 

はここに何が悪かったのかを把握することはできません。

Answer 1

インポートに入力ミスがあります。あなたはMyCompontentをリクエストしています。変更：

import MyComponent from "./components/MyComponent"; 

また、すべてのタイプミス。

Answer 2

あなたは "./components/MyCompontent.js" あなたはファイル名がMyComponent.jsであることを書かれているこの

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

Answer 3

よう

からMyCompontentをインポートしようとすることができます。

このように、あなたのインポートがせずにここにタイプミスを来て、誰のために

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

Answer 4

ようになっているはず、とのWebPACKを使用している、このような句をチェックしてください：

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

はwebpack.config.jsにあります。

import Setup from './components/Setup' 

拡張子を必要としないこの方法で

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

へ：

は、これはのような文を解決するために、あなたのtranspilerを伝えます。