解决npm error create-react-app my-app 报错

最新推荐文章于 2024-05-19 17:36:55 发布
原创 最新推荐文章于 2024-05-19 17:36:55 发布 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#npm #react #前端

本文介绍了初次使用create-react-app创建React项目时遇到的问题，包括因使用淘宝npm源导致的错误及如何切换到国外源下载react、react-dom和react-scripts。通过设置npm registry为npm官方源并全局安装所需包，成功创建项目。同时，提供了快速切换回淘宝源的方法，以便后续下载加速。对于后续创建React项目，只需切换npm源和执行create-react-app命令。

第一次创建react项目报错

本人刚开始用淘宝镜像代理下载的 react、react-dom包，后面才换的国外的npm下载的 react-scripts

淘宝镜像：

npm config set registry https://registry.npm.taobao.org

执行：

npm install -g react
npm install -g react-dom

更换国外代理：

npm config set registry https://registry.npmjs.org/

执行：

npm install -g react-scripts

最后重新创建！

create-react-app  first-demo

成功！

Happy hacking!

为了以后下别的包快一点，可以再换回淘宝代理

npm config set registry https://registry.npm.taobao.org

以后创建react项目

除了第一次创建react项目要全局安装上述的三个包之外，后面创建react项目只执行这两句就可以了

npm config set registry https://registry.npmjs.org/
create-react-app my-app

参考连接
React使用create-react-app 创建项目失败，解决方法

创建create-react-app myapp项目报错
qq_41538764的博客
05-30 1284
创建create-react-app myapp项目报错 error An unexpected error occurred: “https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz: connect ETIMEDOUT 104.16.21.35:443”. 查看yarn是否安装好 yarn -v 如果安装好执行 npm use taobao ...
创建新的react应用时（npx create-react-app my-app）报错：You are running `create-react-app` 4.0.3, which is
p_plum的博客
10-15 899
创建新的react应用时（npx create-react-app my-app） 报错： You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1). We no longer support global installation of Create React App.
执行 npx create-ol-app失败的解决办法
silent1的专栏
08-12 1185
按照这个教程https://openlayers.org/en/latest/doc/tutorials/bundle.html搭建openlayer application，执行“npx create-ol-app”命令的时候失败了： [root@localhost olapp]# npx create-ol-app npx: 9 安装成功，用时 3.298 秒 > msgpackr-extract@1.0.13 install /root/olapp/node_modules/msgpackr
00.OpenLayers快速开始
weixin_45213317的博客
05-19 1249
介绍了如何使用OpenLayers创建一个基本的Web地图应用程序。通过设置新项目，包括HTML标记、JavaScript和CSS样式，您可以快速开始构建地图应用。文档提供了创建项目、组成部分和部署应用的步骤，包括示例代码和说明。通过npm命令创建项目，导入OpenLayers模块，设置地图视图和图层，以及部署应用。最后，通过npm run build命令进行应用程序的构建。
使用npx create-react-app my-app 报错
weixin_43990297的博客
05-27 2260
在项目搭建初始化对的时候，使用react官网上的命令创建项目的时候，发现报如下错误 经过噼里啪啦一顿度娘，找到一个有效的方法 解决方案： “更换node cache 路径” 在项目目录下面运行： #npm config set cache “C:\Users\登录windows的用户名\AppData\Roaming\npm-cache”–global 切记目录和“–global”之间没有空格。 原文链接：https://blog.youkuaiyun.com/wszxg8866/article/details/835
npx create-react-app my-app报错
qq_39541995的博客
08-31 346
npx create-react-app my-app报错 报错详情 解决 切换成华为源，再次执行 npm config set registry https://mirrors.huaweicloud.com/repository/npm/ npm config get registry 参考链接 https://www.v2ex.com/t/507460
[ react app环境搭建 ] ---- 使用npx create-react-app my-app 报错
weixin_41697323的博客
12-02 3764
问题简述 根据react文档上安装命令行npx create-react-app my-app, 但是出现报错信息。信息如下 解决方法, 先全局安装create-react-app脚手架，然后再执行官网三 npm install -g create-react-app npx create-react-app my-app cd my-app npm start ...
create-react-app创建项目报错
clh386的博客
02-23 1232
错误代码如下： npm ERR! code ERR_SOCKET_TIMEOUT npm ERR! network Socket timeout npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! network npm ERR! netwo
npm的疑难杂症：create-react-app报错
all_might1的博客
07-21 3465
-------------------------------------------------------------------------解决方案分割线--------------------------------------------------------------------------- 解决方案 第一步：用管理员身份打开命令行 第二步：查看npm安装是否完好 C:\Windows\system32>npm -v 之后出现版本号则安装无误 第三步：...
利用create-react-app搭建react项目的基本流程
weixin_50643343的博客
10-22 3260
create-react-app是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具
npm run eject后的create-react-app项目自定义eslint配置方式
winne雪
05-10 1141
前言： 当我们需要对create-react-app项目的配置进行高度修改的时候，我们需要npm run eject，把配置文件都暴露出来。 这时候如果我们想要在项目中配置自定义eslint，可以参照以下步骤进行。 一、首先检查是否安装了 eslint和babel-eslint 查看package.json文件，一般npm run eject之后都会看到已经安装了。 如果尚未安装，则需要安装。 全局安装： npm install eslint babel-eslint -g 当前项目安装（推荐）： npm
React脚手架
m0_45136861的博客
03-21 597
React脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServer…） 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack + es6 + eslint 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化 第一步，全局安装：npm i -g create-react-app
通过 npm 创建 React App 项目
weixin_34008805的博客
06-04 460
2019独角兽企业重金招聘Python工程师标准>>> ...
create-react-app报错
Panda0218的博客
07-10 414
执行"npx create-react-app my-app"时，报错：“A template was not provided. This is likely because you’re using an outdated version of create-react-app.” 翻译：未提供模板。这可能是因为您使用的是过时版本的create-react-app。 解决办法 1、首先卸载掉旧版本，并且要确保卸载成功了 npm uninstall -g create-react-app rm -rf /
npx create-react-app my-app 安装报错
qq_29088015的博客
10-24 4314
问题简述  根据react文档上安装命令行npx create-react-app my-app,但是出现报错信息。信息如下 dell@dell-PC MINGW64 /e/demo $ npx create-react-app my-app npm ERR! code ENOLOCAL npm ERR! Could not install from "Files\nodejs\node_cach...
react 【npx create-react-app my-app】执行错误
qq_28976959的博客
11-26 767
错误提示： npm ERR! code ENOLOCAL Could not install from "Files\nodejs\node_cache\_npx\29476"as it does not contain a package.json file. 原因： node路径带有空格 打开DOS窗口，执行 npm config get cache 显示：C:\ProgramFiles...
create-react-app 创建react项目
y1s2y3的博客
08-03 221
1. 搭建好react的环境 2. 创建react的项目 create-react-app demo 3. 在package.json里添加"homepage"./" (注意后面的双引号里面的点号，----这个点花费了我很长的时间才弄对。) 4. 使用yarn start启动项目或者yarn build打包项目 ...
create-react-app搭建react项目
马娟的博客
09-11 2953
1.全局安装create-react-app npm install -g create-react-app 2.创建项目 create-react-app 项目文件夹名 3.进入项目 3.1 cd 项目文件夹名 创建之后的项目目录 3.2运行项目 npm start 或npm run start 打开http://localhost:3000/查看运行成功后...
npx create-react-app my-app --template typescript报错
最新发布
12-28
### 解决 `npx create-react-app my-app --template typescript` 报错 当执行命令 `npx create-react-app my-app --template typescript` 遇到错误时，可能的原因涉及权限不足、缓存配置不当以及特定依赖包版本缺失等问题。 #### 权限问题 如果遇到类似于 `npm ERR! Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs'` 的错误提示，则表明当前操作缺乏必要的文件系统访问权限。建议尝试以管理员身份重新启动终端并再次运行该命令[^1]。 #### 缓存路径设置不合理 对于由于存在空格而导致无法正常工作的缓存路径（如 `Gao\AppData\Roaming\npm-cache_npx\18376`），可以通过修改全局NPM缓存位置来规避此问题。具体做法如下： ```bash npm config set cache "D:\node_cache" ``` 这里假设选择了磁盘上的某个不含空格字符的新目录作为新的缓存地址。 #### 版本兼容性冲突 有时会因为某些第三方库指定的版本号过高而引发找不到合适版本的情况，比如 `@typescript-eslint/scope-manager@5.32.0` 就是一个例子。此时可以考虑更新本地Node.js及相关工具链至最新稳定版，确保所使用的软件栈保持同步；另外也可以通过调整项目的package.json中的依赖项声明方式绕过这个问题，例如锁定较低版本范围内的依赖关系[^2]。 #### 开发环境组件缺失 部分情况下还需要额外安装Visual Studio 或者 Python 等开发工具才能顺利完成构建过程。这是因为 Create React App 默认集成了针对不同场景优化过的Webpack配置，在处理一些特殊类型的资源编译任务时可能会调用这些外部程序。因此按照官方指引完成相应IDE/解释器的部署也是解决问题的关键之一[^3]。 综上所述，面对上述报错情况可以从以下几个方面入手排查： - 使用管理员权限执行命令； - 修改NPM缓存路径避免路径中含有空格； - 更新Node.js 和其他相关工具到最新版本； - 如果有必要的话，根据实际需求安装Visual Studio或其他必需的支持软件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值