Module not found: can't resolve 'moduleName' in react js
Question
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?
2 answers
solution1
4 ACCPTED 2017-10-10 10:26:45
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.
solution2
0 2021-08-11 14:51:33
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
solution3
-1 2019-10-20 13:24:08
出现此错误的主要原因是，您尚未正确验证相对路径，或者您尚未提供导入项目的扩展名。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.