title: Module not found: can't resolve 'moduleName' in react js
body: <p>While learning react JS from <a href="https://reactjs.org/docs/conditional-rendering.html" rel="nofollow noreferrer">official documentation</a> page, everything is working fine so far, now when I tried to export one method from another page in another page as below ( file name on top of each snippet)</p>
  
  <p><em>src/Greeting.js</em></p>
  
  <pre><code>function UserGreeting() {
    return &lt;h1&gt;Welcome back!&lt;/h1&gt;;
  }
  
  function GuestGreeting() {
    return &lt;h1&gt;Please sign up.&lt;/h1&gt;;
  }
  
  function Greeting(props) {
      const isLoggedIn = props.isLoggedin;
      if(isLoggedIn) {
          return &lt;UserGreeting /&gt;;
      } else {
          return &lt;GuestGreeting /&gt;;
      }
  }
  
  export default Greeting;
  </code></pre>
  
  <p><em>src/LoginControl.js</em></p>
  
  <pre><code>import React from 'react';
  
  import Greeting from 'Greeting';
  
  function LoginButton(props) {
      return &lt;button onClick={props.onClick}&gt;Login&lt;/button&gt;;
  }
  
  function LogoutButton(props) {
      return &lt;button onClick={props.onClick}&gt;Logout&lt;/button&gt;;
  }
  
  class LoginControl extends React.Component {
  
  
    constructor(props) {
      super(props);
      this.handleLoginClick = this.handleLoginClick.bind(this);
      this.handleLogoutClick = this.handleLogoutClick.bind(this);
      this.state = {isLoggedIn: false};
    }
  
    handleLoginClick() {
      this.setState({isLoggedIn: true});
    }
  
    handleLogoutClick() {
      this.setState({isLoggedIn: false})
    }
  
    render() {
      const isLoggedIn = this.state.isLoggedIn;
      let button = null;
      if(isLoggedIn) {
          button = &lt;LogoutButton onClick={this.handleLogoutClick} /&gt;;
      } else {
          button = &lt;LoginButton onClick={this.handleLoginClick} /&gt;;
      }
      return (
        &lt;div&gt;
            &lt;Greeting isLoggedIn={isLoggedIn} /&gt;
            {button}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>export default LoginControl;</p>
  
  <p><em>src/index.js</em></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import LoginControl from './LoginControl';
  
  
   ReactDOM.render(
      &lt;LoginControl /&gt;,
      document.getElementById('login')
  );
  
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p><em>public/index.html</em></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;div id="login"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>but it gives below error in the browser?</p>
  
  <blockquote>
    <p>./src/LoginControl.js Module not found: Can't resolve 'Greeting' in '/opt/rqt/src'</p>
  </blockquote>
  
  <p>Why am I getting this error?  </p>
  
  <p>Do I need to create a class in Greeting.js instead of direct export a function?</p>