React unable to import component -- module not found : <p>I just started with React.js and I am unable to import component.</p>

<p>I have this structure as followed by <a href="https://www.youtube.com/watch?v=9wK4gHoOh1g&amp;list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS&amp;index=5" rel="noreferrer">this tutorial (YouTube link)</a> :</p>

<pre><code>-- src
----| index.html
----| app
------| index.js
------| components
--------| MyCompontent.js
</code></pre>

<p>This is my <code>index.js</code>:</p>

<pre><code>import React from 'react';
import { render } from 'react-dom';

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

class App extends React.Component {
    render() {
        return (
            &lt;div&gt;
              &lt;h1&gt;Foo&lt;/h1&gt;
              &lt;MyCompontent/&gt;
            &lt;/div&gt;
        );
    }
}

render(&lt;App /&gt;, window.document.getElementById('app'));
</code></pre>

<p>This is <code>MyComponent.js</code>:</p>

<pre><code>import React from "react";

export class MyCompontent extends React.Component {
  render(){
    return(
      &lt;div&gt;MyCompontent&lt;/div&gt;
    );
  }
}
</code></pre>

<p>I am using <a href="https://github.com/mschwarzmueller/reactjs-basics/blob/03-multiple-components/webpack.config.js" rel="noreferrer">this webpack file (GitHub link)</a>.</p>

<p>However, when I run this, my module fails to load. </p>

<p>I get this error in the browser console:</p>

<blockquote>
  <p>Error: Cannot find module "./components/MyCompontent"</p>
</blockquote>

<pre><code>[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
</code></pre>

<p>Can't figure out what went wrong here.</p>
