未找到模塊：無法在 React js 中解析“moduleName”

Question

在從官方文檔頁面學習 react JS 時，到目前為止一切正常，現在當我嘗試從另一個頁面中的另一個頁面導出一個方法時，如下所示（每個片段頂部的文件名）

源代碼/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;

源代碼/登錄控件.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>
    );
  }
}

導出默認登錄控件；

源代碼/索引.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'));

公共/index.html

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

但它在瀏覽器中給出了以下錯誤？

./src/LoginControl.js 未找到模塊：無法解析“/opt/rqt/src”中的“Greeting”

為什么我收到這個錯誤？

我需要在 Greeting.js 中創建一個類而不是直接導出函數嗎？

Answer 1

您收到該錯誤是因為您不正確地導入了模塊。 如果您這樣做：

import Greeting from 'Greeting';

您的編譯器將在node_modules （可能還有其他目錄，具體取決於您的配置）中查找文件。

由於它位於同一目錄中，因此必須將其導入為：

import Greeting from './Greeting';

基本上./表示該文件存在於當前工作目錄中。

Answer 2

另一種可能的解決方案

FWIW 當我在腳本中的多行中使用不同的導入語法方法從單個庫導入時遇到了這個問題。

為什么這會發生在我身上？

出現這個問題是因為我會像這樣手動import { Stuff, Things } from 'some-library' ： import { Stuff, Things } from 'some-library' ，然后在我編碼時，VS Code 會自動引入新的導入。 所以，我最終會在我的腳本中得到這個：

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

出於某種原因，當發生這種情況時，會拋出此錯誤。

技術棧

Next.js
材質界面

Answer 3

出現此錯誤的主要原因是，您尚未正確驗證相對路徑，或者您尚未提供導入項目的擴展名。

未找到模塊：無法在 React js 中解析“moduleName”

問題描述

2 個解決方案

解決方案1
4 已采納 2017-10-10 10:26:45

解決方案2
0 2021-08-11 14:51:33

另一種可能的解決方案

為什么這會發生在我身上？

技術棧

解決方案3
-1 2019-10-20 13:24:08

未找到模塊：無法在 React js 中解析“moduleName”

問題描述

2 個解決方案

解決方案1 4 已采納 2017-10-10 10:26:45

解決方案2 0 2021-08-11 14:51:33

另一種可能的解決方案

為什么這會發生在我身上？

技術棧

解決方案3 -1 2019-10-20 13:24:08

解決方案1
4 已采納 2017-10-10 10:26:45

解決方案2
0 2021-08-11 14:51:33

解決方案3
-1 2019-10-20 13:24:08