React学习中的BUG与解决(不断更新)
1.创建react项目时报错:
参照来源
报错信息摘录:
npm ERR! Unexpected end of JSON input while parsing near '....0.5","gitdown":"^3.1'
解决方法:
第一步:
npm cache clean --force
第二步:
npm set registry https://registry.npmjs.org/
2.npm start 中出现 的webpack版本问题
参考来源
报错信息:
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.42.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
C:\Users\LXC\node_modules\webpack (version: 4.43.0)
Manually installing incompatible versions is known to cause hard-to-debug
issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
报错原因:
react项目依赖webpack版本为4.42.0,而我安装的是4.43.0,所以导致失败。
解决方法:
进入系统CMD(不是Vscode中)
- 删除全局webpack-cli:
npm uninstall -g webpack-cli
- 删除本地(局部)webpack-cli
npm uninstall webpack-cli
- 删除全局webpack
npm uninstall -g webpack
- 删除本地webpack
npm un webpack
安装webpack:
安装你需要的版本:
npm install --save-dev webpack@<version>
安装webpack-cli:
npm install --save-dev webpack-cli
检查webpack是否安装成功
使用cd进入出错的文件夹下的bin:
c:\...\node_modules/.bin/webpack -v
3.报错 Expected an assignment or function call and instead saw an expression no-unused-express
报错内容
Failed to compile
./src/pages/home/component/Recommend.js
Line 13: Expected an assignment or function call and instead saw an expression no-unused-expressions
Search for the keywords to learn more about each error.
错误代码
class Recommend extends Component {
render() {
const { list } = this.props;
return (
<RecommendWrapper>
{
list.map((item) => {
<RecommendItem
key={item.get('id')}
className={item.get('class')}
>
{item.get('content')}
</RecommendItem>
})
}
</RecommendWrapper>
)
}
}
解决办法
法一
class Recommend extends Component {
render() {
const { list } = this.props;
return (
<RecommendWrapper>
{
list.map((item) => {
return (
<RecommendItem
key={item.get('id')}
className={item.get('class')}
>
{item.get('content')}
</RecommendItem>
)
})
}
</RecommendWrapper>
)
}
}
法二
class Recommend extends Component {
render() {
const { list } = this.props;
return (
<RecommendWrapper>
{
list.map((item) =>
<RecommendItem
key={item.get('id')}
className={item.get('class')}
>
{item.get('content')}
</RecommendItem>
})
}
</RecommendWrapper>
)
}
}
4.npm ERR! notarget No matching version found for XXXX@x.x.x.
报错详情:
解决方法:
// 查看此模块的注册信息
npm view rewired
安装对应插件:
运行成功!
参考。