![](/img/trans.png)
[英]I'm using Mamp so I can use phpAdmin for my react native project. How can I fix the root folder
[英]Recieving an influx of errors when trying to complie my react project. I quite literally have no idea what it means or how to begin to fix it
錯誤消息如下,
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
(雖然這只是其中的兩個錯誤,但有 22 個類似的錯誤。我無法上傳它,因為 StackOverflow 拋出了一個奇怪的錯誤。)這個問題僅在我嘗試導入 web3 時出現。 我整天都在對這個奇怪的 web3、webpack 動態進行故障排除和工作。
./src/App.js 如下。
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;
是的,我也試圖建立一個反應項目,直到最近兩天我遇到了和你一樣的問題,最后我設法找到了答案。 顯然,由於某種原因,react-scripts 5.0.0 不能很好地與 web3 配合使用(我不知道為什么,也許有人能說出來),所以將版本降級到 4.0.3 為我解決了這個問題。 所以這里是如何解決的: -> 在你的 package.json 文件中檢查你的 react-scripts 版本。 如果是 5.0.0,在終端輸入“yarn upgrade react-scripts@4.0.3”。 我希望這可以解決您的問題,因為找到解決方案真的很煩人。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.