使用create-react-app遇到问题解决方案汇总
使用create-react-app时遇到Module not found问题
本来项目跑的好好地,然后install了一个axios,然后项目就挂了。 各种Module not found,路径不对。 期初以为是可能丢包了,又重新install还是不行,根据错误提示一个个删一个个重新install。 最后干脆重新建了个项目,但仍然不行。 这时候意识到了问题应该是出在create-react-app上:
根据这个猜想,清空了packge卸载了全部model,重新install才解决问题。原因我现在也还不知道什么情况会触发这个bug,欢迎指教。
上代码:
- npm install rimraf -g //安装删除指令
- rimraf node_modules //卸载node库
- npm install //重装
npm WARN deprecated fsevents windows
更新下 使用yarn貌似会帮助跳过这个问题:
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
===
有需要下载了一个模板项目,安装ui部分失败,提示:
npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetch
ing binaries from AWS, smaller package size
npm ERR! Unexpected end of JSON input while parsing near '...LNCxGNsOAHRWRMGoXrtcI'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2019-12-06T07_31_31_687Z-debug.log
单独提出来安装:
$ npm install fsevents
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Valid OS: darwin
npm ERR! notsup Valid Arch: any
npm ERR! notsup Actual OS: win32
npm ERR! notsup Actual Arch: x64
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\neoliu6\AppData\Roaming\npm-cache\_logs\2019-12-06T07_33_23_843Z-debug.log
原因明了了,这个包是在mac系统中的,windows没有。查了下资料,大概是windows也不需要,不用安装。
解决方法是,把fsevents依赖放到可选依赖中:
vi package.json
"optionalDependencies": {
"fsevents": "*"
}
重新执行安装(有个坑,需要删除package_lock.json,否则标记会失效,所有依赖都将被安装):
1
|
npm install -- no -optional |
参考资料:
https://stackoverflow.com/questions/41570364/npm-install-not-working-in-windows#
But it says it is optional so I ran $npm install --no-optional and that error went away but I still can't install.
https://github.com/npm/npm/issues/17633
I'm seeing this today with npm 5.3.0. npm install --no-optional
works IIF a package-lock.json does not exist. If the package-lock.json file exists, then the flag is ignored and all dependencies get installed.
3.撤换taobao源后,使用create-reat-app命令生成的app,默认package.json文件中不带运行脚本命令如下:
(node: ver2.13.1 npm ver:6.12.1)
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
}
}
需要手动添加运行脚本代码如下:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
} 还有public,src等目录需要自己添加,当然业务代码需要自己编写哦
然后才能通过npm run start 命令才能运行项目。 使用系统默认源的配置信息如下:
npm config list
npm config list
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.12.1 node/v12.13.1 win32 x64"
; userconfig C:\Users\Administrator\.npmrc
cache = "c:\\tmp\\node_cache"
prefix = "c:\\tmp\\node_global"
如果使用taobo源,使用npm config list 查看配置信息如下:
; cli configs
metrics-registry = "https://registry.npm.taobao.org/"
scope = ""
user-agent = "npm/6.12.1 node/v12.13.1 win32 x64"
; userconfig C:\Users\Administrator\.npmrc
cache = "c:\\tmp\\node_cache"
disturl = "https://npm.taobao.org/dist"
prefix = "c:\\tmp\\node_global"
registry = "https://registry.npm.taobao.org/"
经过测试对比发现,现在通过create-react-app命令生成的APP,没有原来带小卫星转的演示代码,现在只有
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
的库及其依赖库,可能是新版本取消原来的模板了,知道的网友请指教,谢谢。
如果生成的app是web应用程序,需要指定服务启动端口,可以在在package.json文件中配置"scripts“项中的start修改为如下
"scripts": {
"start": "SET PORT & react-scripts start",
。。。。。。
即可改变默认服务器启动端口。
使用create-react-app遇到问题解决方案汇总的更多相关文章
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
- create react app 项目部署在Spring(Tomcat)项目中
网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...
随机推荐
- Python入门篇-文件操作
Python入门篇-文件操作 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.文件IO常用操作 open:打开 read:读取 write:写入 close:关闭 readlin ...
- springcloud中微服务的优雅停机(已验证)
大部分项目部署中,为了方便,可能都直接使用kill -9 服务的pid来停掉服务. 但是由于Eureka采用心跳的机制来上下线服务,会导致服务消费者调用此已经kill的服务提供者然后出错. 可以采用以 ...
- 【POJ3714】Raid:平面最近点对
Description After successive failures in the battles against the Union, the Empire retreated to its ...
- Apache虚拟主机&伪静态配置
Apache基本操作 安装:yum install httpd 启动:systemctl start httpd 查看进程:ps -ef | grep httpd 查看端口:sudo netstat ...
- 异常检测(Anomaly detection): 异常检测算法(应用高斯分布)
估计P(x)的分布--密度估计 我们有m个样本,每个样本有n个特征值,每个特征都分别服从不同的高斯分布,上图中的公式是在假设每个特征都独立的情况下,实际无论每个特征是否独立,这个公式的效果都不错.连乘 ...
- 36大数据和about云的文章总结
36大数据: 白话机器学习 http://www.36dsj.com/archives/78385 基于Hadoop的数据仓库Hive 基础知识(写的很好) http://www.36dsj.com/ ...
- EntityFramework6 学习笔记(二)
使用EF对数据库进行操作,整个过程就像操作数组一样,我们只管修改或向集合中添加值,最后通知EF保存修改后的结果就可以了. 准备工作 为了演示,我在数据库中建了两张表.class表用于表示班级,clas ...
- LeetCode 721. Accounts Merge
原题链接在这里:https://leetcode.com/problems/accounts-merge/ 题目: Given a list accounts, each element accoun ...
- prisma mongodb 试用
prisma 已经支持mongodb了,我们需要做的就是安装新版本的prisma cli,后然初始化项目使用 环境准备 安装cli 注意使用新版本(prisma/1.32.2) 低版本有坑 npm i ...
- 学生管理系统(Nodejs)
一.项目介绍 ①使用nodejs+bootstrap开发 ②对文件进行合理的模块化 ③实现基本的增删改查功能 二.思路 ①处理模块,处理模块,配置开发静态资源,配置模块引擎 ②路由设计,提取路由模块 ...