尝试编译我的反应项目时收到大量错误。 我完全不知道这意味着什么或如何开始修复它

Question

Error message follows as such,

WARNING in ./node_modules/@ethersproject/abi/lib.esm/_version.js
Module Warning (from ./node_modules/react-scripts/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\seana\NewReact Folder\my-a 
pp\node_modules\@ethersproject\abi\src.ts\_version.ts' file: Error: ENOENT: no such file or 
directory, open 'C:\Users\seana\NewReact Folder\my- 
app\node_modules\@ethersproject\abi\src.ts\_version.ts'
 @ ./node_modules/@ethersproject/abi/lib.esm/fragments.js 6:0-37 7:26-33
 @ ./node_modules/@ethersproject/abi/lib.esm/index.js 3:0-117 6:0-204 6:0-204 6:0-204 6:0-204 
 6:0-204 6:0-204
 @ ./node_modules/web3-eth-abi/lib/index.js 28:21-59 30:16-55
 @ ./node_modules/web3-eth/lib/index.js 47:10-33
 @ ./node_modules/web3/lib/index.js 34:10-29
 @ ./src/App.js 16:0-24
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/xhr2-cookies/dist/xml-http-request-upload.js
Module Warning (from ./node_modules/react-scripts/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\seana\NewReact Folder\my-app\node_modules\xhr2- 
cookies\xml-http-request-upload.ts' file: Error: ENOENT: no such file or directory, open 
'C:\Users\seana\NewReact Folder\my-app\node_modules\xhr2-cookies\xml-http-request-upload.ts'
 @ ./node_modules/xhr2-cookies/dist/xml-http-request.js 51:32-68
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
Module Warning (from ./node_modules/react-scripts/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\seana\NewReact Folder\my-app\node_modules\xhr2- 
cookies\xml-http-request.ts' file: Error: ENOENT: no such file or directory, open 
'C:\Users\seana\NewReact Folder\my-app\node_modules\xhr2-cookies\xml-http-request.ts'
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/web3-providers-http/lib/index.js 27:11-49
 @ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
 @ ./node_modules/web3-core/lib/index.js 23:23-58
 @ ./node_modules/web3/lib/index.js 32:11-31
 @ ./src/App.js 16:0-24
 @ ./src/index.js 7:0-24 11:33-36

22 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.65.0 compiled with 22 warnings in 298 ms

(Though these are only two of the errors, there are 22 similar errors. I couldn't upload it because StackOverflow was throwing a weird error.) This problem only arises when I attempt to import web3. I've been troubleshooting and working through this strange web3, webpack dynamic for the whole day.

./src/App.js is as follows.

import React, { useState } from 'react'
import { createTheme, ThemeProvider, makeStyles } from '@material-ui/core/styles';
import { Box, Typography, Button, IconButton } from '@material-ui/core';
import NavBar from './components/NavBar';
import './App.css';
import gif from "./images/gif.gif";
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import Borg from './borg.mp4';
import { Web3ReactProvider } from '@web3-react/core'
import Web3 from 'web3'

// function getLibrary (provider){
//   return new Web3(provider)
// }

document.body.style = 'background: black;';


const theme = createTheme({
  palette: {
    primary: {
      main: "#FFFFFF",
    },
    secondary: {
      main: "#e1ba8d",
    },
  },
  typography: {
    h1: {
      fontFamily: 'Oswald',
      fontWeight: 1000,
      fontSize: 40,
      lineHeight: '2rem',
    },
    h2: {
      fontFamily: 'Roboto Condensed',
      fontWeight: 500,
      fontSize: 18,
      lineHeight: '2rem',
    },
    h3: {
      fontFamily: 'Oswald',
      fontWeight: 500,
      fontSize: 30,
      lineHeight: '5rem',
    },
    h4: {
      fontFamily: 'Roboto Condensed',
      fontWeight: 1000,
      fontSize: 20,
      lineHeight: '.3rem',
    },
  },
});

const styles = makeStyles({
  root: {
  },
  wrapper: {
    display: 'flex',
    margin: "5em",
  },
  leftSide: {
    textAlign: "start",
    width: '50%'
  },
  rightSide: {
    color: "white",
    width: '50%'
  },
  headerRight: {
    textAlign: 'center',
    marginBottom: '25px'
  },
  boxDesign: {
    display: 'flex',
    alignItems: 'center',
    border: '3px gray solid',
    borderRadius: "10px",
    justifyContent: "space-between",
    padding: '11px',
    width: '70%',
    margin: "0 auto"
  },
  boxDesignTwo: {
    marginTop: '15px',
    display: 'flex',
    alignItems: 'center',
    border: '3px gray solid',
    borderRadius: "10px",
    justifyContent: "space-between",
    padding: '11px',
    width: '70%',
    margin: "0 auto",
    background: 'rgba(255, 255, 255, 0.4)'
  },
  buttonCorlor: {
    color: 'white'
  },
  boxDesignThree: {
    marginTop: '15px',
    display: 'flex',
    alignItems: 'center',
    borderTop: '3px gray solid',
    borderBottom: '3px gray solid',
    justifyContent: "space-between",
    padding: '5px',
    width: '72%',
    margin: "0 auto"
  },
  boxDesignFour: {
    marginTop: '15px',
    display: 'flex',
    padding: '5px',
    width: '73%',
    margin: "0 auto"
  },
  buttonStyle: {
    width: "100%",
    marginBottom: "15px"
  },
  boxDesignFive: {
    textAlign: 'center'
  }
})

function NewlineText(props) {
  const text = props.text;
  return text.split('\n').map(str => <p>{str}</p>);
}



function App() {
  const classes = styles();
  // const classesMint = stylesMint();
  const [total, setTotal] = useState(1);
  return (
    // <Web3ReactProvider> 
    <div>
      <div className = "App">
            <video
            autoPlay
            loop
            muted
            style= {{position: "absolute",
          width: "100%",
          left: "50%",
        top: "50%",
      height: "100%",
    objectFit: "cover",
    transform: "translate(-50%, -50%)",
    zIndex: "-1"
   }}
            >
                <source src= {Borg} type  = "video/mp4"/>
            </video>
        </div>
      <ThemeProvider theme={theme}>
        <NavBar />
        <div className={classes.wrapper}>
          <div className={classes.leftSide}>
            <Typography variant="h1" className={classes.red} color="primary">
              Info
            </Typography>
            <Typography variant="h2" color="secondary">
              December 28th
            </Typography>
            <Typography
              variant="h3" color="primary">
              Limited Mint Date
            </Typography>
            <Typography variant="h4" color="primary">
              December 28 - 5pm EST
            </Typography>
            <Typography variant="h3" color="primary">
              Supply
            </Typography>
            <Typography variant="h4" color="primary">
              777
            </Typography>
            <Typography variant="h3" color="primary">
              Price
            </Typography>
            <Typography variant="h4" color="primary">
              0.08 ETH
            </Typography>
            <Typography variant="h3" color="primary">
              Max
            </Typography>
            <Typography variant="h4" color="primary">
              5 per Wallet
            </Typography>
          </div>
          <div className={classes.rightSide}>
            <Typography variant="h1" className={classes.headerRight} color="primary">
              Limited Sale
            </Typography>
            <Box className={classes.boxDesign}>
              <Box>
                <img src={gif} alt="" width='80px' />
              </Box>
              <Box>
                <Typography color="secondary">
                  Price per NFT
                </Typography>
                <Typography variant="h4" style={{marginTop: '12px'}} color="primary">
                  0.08 ETH Each
                </Typography>
              </Box>
            </Box>
            <Box className={classes.boxDesignTwo}>
              <Box>
                <IconButton onClick={()=>{
                    if (total > 1) {
                      setTotal(total-1)
                    }
                }} 
                aria-label="add" className={classes.buttonCorlor}>
                  <RemoveIcon fontSize="medium" />
                </IconButton>
                {total}
                <IconButton 
                onClick={()=>{
                  if (total < 5) {
                    setTotal(total+1)
                  }
              }} 
                aria-label="add" className={classes.buttonCorlor}>
                  <AddIcon fontSize="medium" />
                </IconButton>
              </Box>
              <Box>
                <Typography variant="h6" color="primary">
                  5 Max
                </Typography>
              </Box>
            </Box>
            <Box className={classes.boxDesignThree}>
              <Box>
              <Typography variant="h6" color="primary">
                  Total
                </Typography>
              </Box>
              <Box>
                <Typography variant="h6" color="primary">
                  {total * 0.08} ETH
                </Typography>
              </Box>
            </Box>
            <Box className={classes.boxDesignFour}>
              <Button className={classes.buttonStyle} variant="contained">Mint Now</Button>
            </Box>
            <Box className={classes.boxDesignFive}>
            <Typography variant="h6" color="primary">
                  765 / 777
                </Typography>
            </Box>
          </div>
        </div>
      </ThemeProvider>
    </div>
  // {/* </Web3ReactProvider> */}
  );
}

export default App;

Answer 1

Yeah, I was trying to set up a react project too until I had the exact problem as you since the last 2 days, finally i managed to find an answer. Apparently, react-scripts 5.0.0 doesn't work well with web3 for some reason (I have no idea why, maybe someone can tell), so downgrading the version to 4.0.3 solved the problem for me. So here's how to solve: -> Check your react-scripts version in your package.json file. If it's 5.0.0, type "yarn upgrade react-scripts@4.0.3" to the terminal. I hope this solves your problem, since it was really annoying to find a solution to this.