首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >找不到模块:在react中编译时无法解析‘./Navbar’错误

找不到模块:在react中编译时无法解析‘./Navbar’错误
EN

Stack Overflow用户
提问于 2021-04-22 10:21:39
回答 1查看 127关注 0票数 0

我正在完成一个应用程序的教程,在前端工作时,我为导航栏创建了一个单独的文件:

代码语言:javascript
运行
AI代码解释
复制
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;

我已将此文件导入到我的App.js文件中:

代码语言:javascript
运行
AI代码解释
复制
import React, { Component } from 'react'
import Web3 from 'web3'
import Navbar from ' ./Navbar'
import './App.css'

当我保存并重新加载网页时,我得到以下错误:

./src/components/App.js模块找不到:无法解析'C:\Users\34632\eth_swap1\src\components‘中的’./Navbar‘

我不确定是什么问题,因为我昨天没有任何问题地通过了这一点,现在问题仍然存在。有人知道这是怎么回事吗?

这是我的目录。

这是App.js文件

代码语言:javascript
运行
AI代码解释
复制
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;
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-22 10:46:08

从导入中删除空间

发自:

代码语言:javascript
运行
AI代码解释
复制
import Navbar from ' ./Navbar'

至:

代码语言:javascript
运行
AI代码解释
复制
import Navbar from './Navbar';
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67211357

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档