当我尝试导入多个组件时，react.js 中的模块构建失败答案

【问题标题】：Module Build Failed in react.js when i try to import more than one component当我尝试导入多个组件时，react.js 中的模块构建失败
【发布时间】：2022-01-03 02:47:55
【问题描述】：

我有这段代码我想在 app.jsx 文件中导入（Upgrade.jsx）
升级.jsx

import { useEffect, useState } from "react"
import './stylesheets/Upgrade.css';

class Upgrade{

    constructor(name,price){
        [this.price,setUpgradePrice()]=useState(this.price)
        
        this.style=`#test-div{
            position: absolute;
            width:18%;
            height:10%;
            right:0.5%;
            top:2%;
            border:5px solid #b40000;
            border-radius:10px
        }
        
        #test-div-text{
            position:absolute;
            width:80%;
            height:5%;
            left:2%;
            top:5%;
            margin-top:0;
        
            color:gold;
            font-size: 150%;
        }
        
        #buy-button{
            position:absolute;
            width:10%;
            height:22%;
            bottom:6%;
            right:2%;
            margin:0;
        
            border:5px solid #b40000;
            border-radius:10px;
        
            color:gold;
            text-align:center;
            font-size:100%;
        }
        
        #augments-button{
            position:absolute;
            width:25%;
            height:22%;
            bottom:6%;
            right:18%;
            margin:0;
        
            border:5px solid #b40000;
            border-radius:10px;
        
            color:gold;
            text-align:center;
            font-size:100%;
        }`

        this.jsx=(
            <div id="" className="button">
                <style>{this.style}</style>
                <p id="test-div-text">Cheese Maker</p>
                <p id="buy-button" className="button">Buy</p>
                <p id="augments-button" className="button">Augments</p>
            </div>
            )
        }
    
    getJsx(){
        return(this.jsx)
    }
}

const testButton=Upgrade("Cheese Maker",100)

function Upgrades(){
    return(
        <div>
        </div>
    )
}

export default Upgrades

App.jsx

import React from 'react';
import './App.css';
import CounterExample from './Components/CounterExample';
import Upgrade from `./Components/Upgrade`;

function App() {
  return (
    <div className="App">
      <div id="line"/>
      <CounterExample/>
      <Upgrade/>
    </div>
  );
}

export default App;

CounterExample.jsx 供参考

import { useEffect, useState } from "react"
import './stylesheets/CounterExample.css';

const placeholder = require("./images/placeholder.png")
var cheeseMade=0

function CounterExample(){

    const [count, setCount] = useState(0)
    const [cheeseComponentClass, setCheeseComponentClass] = useState("fade")
    const [cheeseOutput, setCheeseOutput] = useState(0)

    function buttonPress(){
        setCheeseComponentClass("unfade")
        setCount(count+1)
        setTimeout(()=>{setCheeseComponentClass("fade")},100);
        cheeseMade+=1
    }
    
    //What to do every 2 seconds
    useEffect(()=>{
        const interval=setInterval(()=>{
            console.log("interval triggered! Cheese made=",cheeseMade)
            setCheeseOutput(cheeseMade/2)
            cheeseMade=0
        }, 2000);
        return () => clearInterval(interval);},[]);

    return(
        <div id="cheese-component">
            <p id="cheese-count">{String(count+" Cheese")} </p>
            <img id="cheese-button" className={cheeseComponentClass} src={placeholder} onClick={buttonPress}></img>
            <p id="cheese-output">{cheeseOutput+" Cheese per second"}</p>

            <div id="test-div">
                <p id="test-div-text">Cheese Maker</p>
                <p id="buy-button" className="button">Buy</p>
                <p id="augments-button" className="button">Augments</p>
            </div>

        </div>
    )
}

export default CounterExample

当我尝试在仅导入 CounterExample 的同时运行应用程序代码时，它运行良好并且完全符合我的预期，但是当我尝试使用包含的第二个组件运行它时，我收到此错误

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\jack\Desktop\Website\Cheese Clicker Remastered\cheese-clicker-remastered-2\src\App.jsx: Unexpected token (4:20)

  2 | import './App.css';
  3 | import CounterExample from './Components/CounterExample';
> 4 | import Upgrade from `./Components/HellowWorld`;
    |                     ^
  5 |
  6 | function App() {
  7 |   return (
    at Object._raise (C:\Users\jack\Desktop\Website\Cheese Clicker Remastered\cheese-clicker-remastered-2\node_modules\@babel\parser\lib\index.js:569:17)
    at Object.raiseWithData (C:\Users\jack\Desktop\Website\Cheese Clicker Remastered\cheese-clicker-remastered-2\node_modules\@babel\parser\lib\index.js:562:17)
    at Object.raise (C:\Users\jack\Desktop\Website\Cheese Clicker Remastered\cheese-clicker-remastered-2\node_modules\@babel\parser\lib\index.js:523:17)
    at Object.unexpected (C:\Users\jack\Desktop\Website\Cheese Clicker Remastered\cheese-clicker-remastered-2\node_modules\@babel\parser\lib\index.js:3601:16)
    at Object.parseImportSource (C:\Users\jack\Desktop\Website\Cheese Clicker Remastered\cheese-clicker-remastered-2\node_modules\@babel\parser\lib\index.js:15005:32)
    at Object.parseImport (C:\Users\jack\Desktop\Website\Cheese Clicker Remastered\cheese-clicker-remastered-2\node_modules\@babel\parser\lib\index.js:14987:24)
    at Object.parseStatementContent (C:\Users\jack\Desktop\Website\Cheese Clicker Remastered\cheese-clicker-remastered-2\node_modules\@babel\parser\lib\index.js:13623:27)      
    at Object.parseStatement (C:\Users\jack\Desktop\Website\Cheese Clicker Remastered\cheese-clicker-remastered-2\node_modules\@babel\parser\lib\index.js:13521:17)
    at Object.parseStatement (C:\Users\jack\Desktop\Website\Cheese Clicker Remastered\cheese-clicker-remastered-2\node_modules\@babel\parser\lib\index.js:5344:24)
    at Object.parseBlockOrModuleBlockBody (C:\Users\jack\Desktop\Website\Cheese Clicker 
Remastered\cheese-clicker-remastered-2\node_modules\@babel\parser\lib\index.js:14110:25) @ ./src/index.js 7:0-24 11:33-36

ERROR in src\App.js
  Line 4:23:  Parsing error: Unexpected token (4:23)

src\App.jsx
  Line 4:20:  Parsing error: Unexpected token (4:20)

webpack 5.65.0 compiled with 2 errors and 1 warning in 71 ms**strong text**

我是新手，完全不知道如何修复此错误或此错误的实际含义，请帮助

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

我认为是因为路径错误试试这样

import Upgrade from `./Components/Upgrade`

不是

import Upgrade from `./Components/HellowWorld`;

【讨论】：

啊，我的错误是我在修复路径之前用不同的组件测试它时不小心留下的，但同样的问题仍然存在

【解决方案2】：

不确定你想用class Upgrade 做什么，但你必须从那个类中删除useState。 useState 只能在 React 功能组件内部使用。所以把类改成

class Upgrade {
  constructor(name, price) {
    this.state = {
      price: price
    };

    this.style = `#test-div{
            position: absolute;
            width:18%;
            height:10%;
            right:0.5%;
            top:2%;
            border:5px solid #b40000;
            border-radius:10px
        }

        #test-div-text{
            position:absolute;
            width:80%;
            height:5%;
            left:2%;
            top:5%;
            margin-top:0;

            color:gold;
            font-size: 150%;
        }

        #buy-button{
            position:absolute;
            width:10%;
            height:22%;
            bottom:6%;
            right:2%;
            margin:0;

            border:5px solid #b40000;
            border-radius:10px;

            color:gold;
            text-align:center;
            font-size:100%;
        }

        #augments-button{
            position:absolute;
            width:25%;
            height:22%;
            bottom:6%;
            right:18%;
            margin:0;

            border:5px solid #b40000;
            border-radius:10px;

            color:gold;
            text-align:center;
            font-size:100%;
        }`;

    this.jsx = (
      <div id="" className="button">
        <style>{this.style}</style>
        <p id="test-div-text">Cheese Maker</p>
        <p id="buy-button" className="button">
          Buy
        </p>
        <p id="augments-button" className="button">
          Augments
        </p>
      </div>
    );
  }

  getJsx() {
    return this.jsx;
  }
}

并使用new 调用它

const testButton = new Upgrade("Cheese Maker", 100);

如果你想创建一个合适的 react 类组件，你可以这样做

const style = `#test-div{
position: absolute;
  width:18%;
  height:10%;
  right:0.5%;
  top:2%;
  border:5px solid #b40000;
  border-radius:10px
}

#test-div-text{
  position:absolute;
  width:80%;
  height:5%;
  left:2%;
  top:5%;
  margin-top:0;

  color:gold;
  font-size: 150%;
}

#buy-button{
  position:absolute;
  width:10%;
  height:22%;
  bottom:6%;
  right:2%;
  margin:0;

  border:5px solid #b40000;
  border-radius:10px;

  color:gold;
  text-align:center;
  font-size:100%;
}

#augments-button{
  position:absolute;
  width:25%;
  height:22%;
  bottom:6%;
  right:18%;
  margin:0;

  border:5px solid #b40000;
  border-radius:10px;

  color:gold;
  text-align:center;
  font-size:100%;
}`

class Upgrade extends React.Component {

  render() {
    const {title, price} = this.props;
    return (
      <div id="" className="button">
        <style>{style}</style>
        <p id="test-div-text">{title} - {price}</p>
        <p id="buy-button" className="button">
          Buy
        </p>
        <p id="augments-button" className="button">
          Augments
        </p>
      </div>
    );
  }
}

并像使用它

const testButton = <Upgrade price={100} title={"Cheese Maker"} />;

【讨论】：

谢谢！摆脱课程似乎在很大程度上解决了我对课程的新手并做出反应，所以我不知道他们是如何使用它的