Reactjs 未找到模块：Can'；t解析'/导航栏'；在react中编译时出错

我正在完成一个应用程序的教程，在前端工作时，我为导航栏制作了一个单独的文件：

import React, { Component } from 'react'


class Navbar extends Component {

 
  render() {
    return (
     <nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
          <a
            className="navbar-brand col-sm-3 col-md-2 mr-0"
            href="http://www.dappuniversity.com/bootcamp"
            target="_blank"
            rel="noopener noreferrer"
          >
            EthSwap
          </a>
        </nav>
    );
  }
}

export default Navbar;

保存并重新加载网页时，出现以下错误：

./src/components/App.js 未找到模块：无法解析“C:\Users\34632\eth\u swap1\src\components”中的“./Navbar”

我不确定问题是什么，因为我昨天已经顺利通过了这一点，现在问题依然存在。有人知道这里发生了什么吗

这是我的目录

这是App.js文件

import React, { Component } from 'react'
import Web3 from 'web3'
import from ' ./Navbar'
import './App.css'


class App extends Component {

  async componentWillMount()  {
    await this.loadWeb3()
    await this.loadBlockchainData()


  }

  async loadBlockchainData() {
    const web3 = window.web3

    const accounts = await web3.eth.getAccounts()
    this.setState({ account: accounts[0] })

    const ethBalance = await web3.eth.getBalance(this.state.account)
    this.setState({ ethBalance })
    console.log(this.state.ethBalance)

  }

  async loadWeb3() {
    if (window.ethereum) {
      window.web3 = new Web3(window.ethereum)
      await window.ethereum.enable()
    }
    else if (window.web3) {
      window.web3 = new Web3(window.web3.currentProvider)
    }
    else {
      window.alert('Non-Ethereum browser detected. You should consider trying Metamask!')
    }
  }

  constructor(props) {
    super(props)
    this.state = {
      account: '',
      ethBalance: '0'
       

    }

  }

  render() {
    console.log(this.state.account)
    return (
      <div>
        <Navbar />
        <div className="container-fluid mt-5">
          <div className="row">
            <main role="main" className="col-lg-12 d-flex text-center">
              <div className="content mr-auto ml-auto">
                <a
                  href="http://www.dappuniversity.com/bootcamp"
                  target="_blank"
                  rel="noopener noreferrer"
                >
              
                </a>
                <h1>Hello World!</h1>
               
              </div>
            </main>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”
从“Web3”导入Web3
从“/Navbar”导入
导入“./App.css”
类应用程序扩展组件{
异步组件willmount（）{
等待此消息。loadWeb3（）
等待此消息。loadBlockchainData（）
}
异步loadBlockchainData（）{
const web3=window.web3
const accounts=wait web3.eth.getAccounts（）
this.setState（{account:accounts[0]}）
const ethBalance=wait web3.eth.getBalance（this.state.account）
this.setState（{ethBalance}）
console.log（this.state.ethBalance）
}
异步加载web3（）{
if（window.ethereum）{
window.web3=新的web3（window.ethereum）
等待window.ethereum.enable（）
}
else if（window.web3）{
window.web3=新的web3（window.web3.currentProvider）
}
否则{
窗口。警报（“检测到非EnthUM浏览器。您应该考虑尝试元代码！”）
}
}
建造师（道具）{
超级（道具）
此.state={
帐户：“”，
帐户余额：“0”
}
}
render（）{
console.log（this.state.account）
返回(
你好，世界！
);
}
}
导出默认应用程序；

从导入中删除空格

发件人：

致：

---

你能更新你的目录结构吗？完成。这就是您想要的吗？我在尝试以下操作时遇到此错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查

App

的渲染方法。▶ 29个堆栈帧被折叠。您能给我们看一下您的

应用程序
组件吗？当然，您想让我给您看什么？我将发布整个应用程序。您缺少导入的名称，请将
import from./Navbar'
更改为
import Navbar from./Navbar'在你的App.js中
import React, { Component } from 'react'
import Web3 from 'web3'
import from ' ./Navbar'
import './App.css'


class App extends Component {

  async componentWillMount()  {
    await this.loadWeb3()
    await this.loadBlockchainData()


  }

  async loadBlockchainData() {
    const web3 = window.web3

    const accounts = await web3.eth.getAccounts()
    this.setState({ account: accounts[0] })

    const ethBalance = await web3.eth.getBalance(this.state.account)
    this.setState({ ethBalance })
    console.log(this.state.ethBalance)

  }

  async loadWeb3() {
    if (window.ethereum) {
      window.web3 = new Web3(window.ethereum)
      await window.ethereum.enable()
    }
    else if (window.web3) {
      window.web3 = new Web3(window.web3.currentProvider)
    }
    else {
      window.alert('Non-Ethereum browser detected. You should consider trying Metamask!')
    }
  }

  constructor(props) {
    super(props)
    this.state = {
      account: '',
      ethBalance: '0'
       

    }

  }

  render() {
    console.log(this.state.account)
    return (
      <div>
        <Navbar />
        <div className="container-fluid mt-5">
          <div className="row">
            <main role="main" className="col-lg-12 d-flex text-center">
              <div className="content mr-auto ml-auto">
                <a
                  href="http://www.dappuniversity.com/bootcamp"
                  target="_blank"
                  rel="noopener noreferrer"
                >
              
                </a>
                <h1>Hello World!</h1>
               
              </div>
            </main>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

import Navbar from ' ./Navbar'

import Navbar from './Navbar';