CODEWITHSUNDEEP
javascriptreactjs
xkeshav
xkeshav

Reputation: 54016

Module not found: can't resolve 'moduleName' in react js

While learning react JS from official documentation 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)

src/Greeting.js

function UserGreeting() {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting() {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
    const isLoggedIn = props.isLoggedin;
    if(isLoggedIn) {
        return <UserGreeting />;
    } else {
        return <GuestGreeting />;
    }
}

export default Greeting;

src/LoginControl.js

import React from 'react';

import Greeting from 'Greeting';

function LoginButton(props) {
    return <button onClick={props.onClick}>Login</button>;
}

function LogoutButton(props) {
    return <button onClick={props.onClick}>Logout</button>;
}

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 = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
        button = <LoginButton onClick={this.handleLoginClick} />;
    }
    return (
      <div>
          <Greeting isLoggedIn={isLoggedIn} />
          {button}
      </div>
    );
  }
}

export default LoginControl;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import LoginControl from './LoginControl';


 ReactDOM.render(
    <LoginControl />,
    document.getElementById('login')
);


ReactDOM.render(<App />, document.getElementById('root'));

public/index.html

<body>
    <div id="root"></div>
    <div id="login"></div>
</body>

but it gives below error in the browser?

./src/LoginControl.js Module not found: Can't resolve 'Greeting' in '/opt/rqt/src'

Why am I getting this error?

Do I need to create a class in Greeting.js instead of direct export a function?

Upvotes: 0

Views: 16092

Answers (2)

Davis Jones
Davis Jones

Reputation: 1882

Another Possible Solution

FWIW I had this issue when I was importing from a single library using different import syntax approaches on more than one line in my script.

Why did this happen to me?

This problem happened because I would import like this by hand: import { Stuff, Things } from 'some-library', then as I was coding, VS Code would automatically bring in new imports. So, I'd end up with this in my script:

import { Stuff, Things } from 'some-library'
...
import Code from 'some-library/Code'

For some reason, when this occurs, this error would get thrown.

Tech Stack

  • Next.js
  • Material UI

Upvotes: 1

Chris
Chris

Reputation: 59491

You are getting that error because you are importing the module incorrectly. If you do:

import Greeting from 'Greeting';

Your compiler will look for the file in node_modules (and possibly other directories, depending on your configuration).

Since it's in the same directory, you have to import it as:

import Greeting from './Greeting';

Basically ./ means that the file exists at the current working directory.

Upvotes: 9

Related Questions