在"npx create-react-app“"npm start”失败后出现以下错误: TypeError:无法读取未定义的属性'split‘

问题描述：在使用命令"npx create-react-app"创建React应用后，运行"npm start"命令失败，并出现以下错误信息：TypeError: 无法读取未定义的属性 'split'。

解决方法：该错误通常是由于依赖项未正确安装或版本不兼容引起的。以下是一些可能的解决方法：

更新Node.js版本：确保使用的是最新版本的Node.js，可以通过在命令行中运行"node -v"命令来检查当前安装的Node.js版本。如果版本较旧，建议升级到最新版本。
清除npm缓存：运行以下命令清除npm缓存，并尝试重新运行"npm start"命令。

npm cache clean --force

删除node_modules文件夹和package-lock.json文件：在项目根目录下，删除node_modules文件夹和package-lock.json文件，然后运行以下命令重新安装依赖项。

npm install

检查依赖项版本：打开package.json文件，确保其中列出的所有依赖项的版本号是正确的。可以通过运行以下命令更新依赖项的版本。

npm outdated
npm update

尝试使用yarn代替npm：如果使用npm仍然无法解决问题，可以尝试使用yarn作为包管理器。首先确保已经安装了yarn，然后运行以下命令重新创建React应用。

npx create-react-app my-app
cd my-app
yarn start

检查React版本兼容性：确保使用的React版本与其他依赖项兼容。可以在React官方文档中查找React与其他库的兼容性信息。
检查代码错误：如果以上方法仍然无法解决问题，可能是代码中存在错误导致的。请检查代码并修复错误。

针对这个问题，腾讯云提供了云开发（CloudBase）服务，它是一项集云函数、云数据库、云存储和云托管等能力于一体的云原生应用开发平台。使用云开发，可以更方便地进行前后端开发、部署和运维工作。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云开发（CloudBase）：https://cloud.tencent.com/product/tcb
腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
腾讯云云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云云托管（CloudBase Hosting）：https://cloud.tencent.com/product/sch

相关·内容

React菜鸟进阶史之构建项目

可是在create-react-app 中没有多余的选项，通过一行命令就能创建前端项目。...1.1 安装及卸载 create-react-app 通过以下命令来安装 create-react-app： npm install -g create-react-app 通过以下命令来卸载create-react-app...： npm uninstall -g create-react-app # 或 yarn global remove create-react-app 1.2 构建前端项目构建前端项目有以下2种方式:...create-react-app my-app # 或 npx create-react-app my-app 如果要使用typescript模板有以下2种方式: yarn create react-app...报 TypeError: this.getOptions is not a function 错误，为了避免此问题安装时需要指定版本。

7064 0

用于构建用户界面的JavaScript库---＞React

进入命令行工具后，输入下面的命令： npx create-react-app react-demo01 命令解读： npx create-react-app 是固定命令，create-react-app...npx 命令会帮助我们临时安装create-react-app包，然后初始化项目完成之后会自自动删掉，所以不需要全局安装create-react-app。...cd react-demo01 输入启动命令： yarn start 或 npm start 启动成功后，你就可以看到下面的界面： 3、项目目录说明调整现在我们使用开发工具打开我们刚刚下载的项目，大家可以使用...') fn() 注意： JSX 自身也是 JS 表达式注意：JS 中的对象是一个例外，一般只会出现在 style 属性中注意：不能在{}中出现语句（比如：if/for 等），if 语句/ switch-case...效果：注意： key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用渲染列表时应该添加 key 属性，key 属性的值要保证唯一如果列表中有像 id 这种的唯一值

1.3K1 0

React 基础

react-basic npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称 react-basic 表示项目名称，可以修改启动项目...：yarn start or npm start npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用原始：1 全局安装npm i -g create-react-app...2 在通过脚手架的命令来创建 React 项目现在：npx 调用最新的 create-react-app 直接创建 React 项目项目目录结构说明和调整说明： src 目录是我们写代码进行项目开发的目录...JSX JSX的基本使用 createElement的问题繁琐不简洁不直观，无法一眼看出所描述的结构不优雅，开发体验不好 JSX简介 JSX是JavaScript XML的简写，表示了在Javascript...{/* 这是jsx中的注释 */} 推荐快键键 ctrl + / 不要出现语句，比如if for 条件渲染在react中，一切都是javascript，所以条件渲染完全是通过js来控制的

2.1K2 0

每次启动项目的服务，电脑竟然乖乖的帮我打开了浏览器，100行源码揭秘！

使用 2.1 在 webpack 中使用 devServer.open[2] 告诉 dev-server[3] 在服务器启动后打开浏览器。将其设置为 true 以打开您的默认浏览器。...2.2 在 vue-cli 使用 npx @vue/cli create vue3-project # 我的 open-analysis 项目中 vue3-project 文件夹 # npm i -g...使用 npx create-react-app react-project # 我的 open-analysis 项目中 react-project 文件夹 # npm i -g yarn # 默认自动打开了浏览器...原理在 npm 之王 @sindresorhus[8] 的 open README文档[9]中，英文描述中写了为什么使用它的几条原因。为什么推荐使用 open 积极维护。支持应用参数。...https://lxchuan12.gitee.io windows start 文档[10] open包描述信息：open[11] 在这里可以看到有哪些 npm 包依赖了 open[12] 我们熟悉的很多

5714 0

前端反卷计划-组件库-01-环境搭建

这也是前端反卷计划中的一项。在接下来的日子，我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容：图片图片目前这些内容持续更新到了我的学习文档中。感兴趣的欢迎一起学习！...q=curry-design图片从结果可以看到，这个名字没有其他包在用，所以我可以使用这个名字作为组件库的包名。如果你起的名字，在npm里面查询到，则需要换个名字。...创建项目使用create-react-app创建项目在终端执行如下命令: npx create-react-app curry-design --template typescript执行后，就会下载成功..."npm run format"npx husky add .husky/pre-commit "git add ."...错误commit: 提交失败图片正确commit：提交正常图片持续更新目前这些内容持续更新到了我的学习文档中。感兴趣的欢迎一起学习！

2553 0

13 个 npm 快速开发技巧

符号通常用于表示应用程序的根目录，npm术语中的应用程序入口点，即package.json中指定为“main”的值 { "main": "index.js" } 这个快捷方式也可以用于像npx create-react-app...这样的命令。因此，可以运行npx create-react-app .，而不是使用 npx create-react-app my-app 创建一个新的my-app目录。 2...." 要检查是否正确添加了这些属性，在终端输入 npm config edit查看配置文件信息。...在客户机目录中)和后端(在服务器目录中)运行 npm start。...1.1.0 npm version major // 2.0.0 根据更新应用程序的频率，可以通过在每次部署时增加版本号来节省时间，使用以下脚本: { "predeploy": "npm version

1.5K5 0

Angular 工具篇之npx及angular-cli-ghpages

npx 安装首先执行以下命令查看当前 npm 的版本： $ npm --version 在我?...当然你也可以运行下面的命令，进行进一步确认： $ which npx /Users/fer/.nvm/versions/node/v9.11.0/bin/npx 如果发现本地无法直接使用 npx，我们需要以全局的方式安装一下...npx： $ npm install -g npx 简化本地库的调用一般情况下，如果你希望运行本地项目非全局安装的第三方依赖库，你需要使用以下方式执行命令： $ node_modules/.bin/...下面是使用 create-react-app 开启一个新的 React 项目，这里的 create-react-app 可以不需要在本机上安装过： $ npx create-react-app best-todo-app-ever...或者使用以下命令： $ ng build --prod --base-href "/REPOSITORY_NAME/" 在项目构建完成后，就可以通过以下的命令自动地把本地项目发布到 Github Pages

1.9K2 0

10 种 JavaScript 最常见的错误

当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。您可以很容易的在 Chrome 开发者控制台中进行测试。 ?...2、 TypeError: ‘undefined’ is not an object 这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。...3、 TypeError: null is not an object 这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。...8、 TypeError: Cannot read property ‘length’ 这是因为读取未定义变量的长度属性而发生的错误。您可以在 Chrome 开发者控制台中进行测试。 ?...当你认真读过《你不知道的 JavaScript》上卷后，这些错误基本就不会再出现了。归根结底是对 JavaScript 基础知识掌握的不扎实。

8.6K2 0

React 入坑第一弹

前言一直念叨前端三大框架，React、Vue、Angular，可我实际中用的只有Vue，Angular在刚毕业那会儿用过点皮毛，基本上就是照葫芦画瓢，现在也忘得一干二净。...接下来就是记录我学习React遇到的问题、踩过的坑。 1. 全局安装脚手架报错报错提示：create-react-app: command not found不存在该命令。...解决方法1：首先，查看用户环境变量（win10右键我的电脑 => 属性 => 高级系统设置 => 高级 => 环境变量 => 用户变量，其他系统自行百度哈）里的npm路径，例如："C:/Users/...解决方法2：使用npm -v查看你的npm版本，如果你的npm版本为5.2+（包含5.2）则可以直接运行下面命令 npx create-react-app my-app cd my-app npm...start 如果npm版本小于5.2 npm install -g create-react-app create-react-app my-app 如果出现create-react-app: command

5583 0

Cypress 10.x 组件测试指南

选好后，点击Next，你会看到下面这个图：根据图中提示，在目录下，执行上图命令行命令。...npx create-react-app my-ap 然后，你的项目文件夹会变成这个样： ---- my-app就是我们刚刚创建好的一个react web app。...然后我们把这个app运行起来： // 先到my-app文件夹下 cd my-app // 启动 npm start 浏览器访问：http://localhost:3000/，你将看到我们的app启动了...这样符合这个pattern的便都是Component 测试。把你的Component测试文件移到src下。跟你要测试的组件同目录。避免无法导入。...疑惑点如果框架使用的是create-react-app，那么你在组件测试导入时，必须保证导入的路径在src下。

1.2K2 0

【译】npx简介：一种npm包的执行器

npx是一个旨在提升npm包的使用体验——就像npm极大地提升了我们安装和管理包依赖的体验，npx让npm包中的命令行工具和其他可执行文件在使用上变得更加简单。...当做完这些事情后，已安装的包不会出现在你的全局安装中，所以不用担心长期使用所带来的全局污染。这个特性同样也适用于generators这样的工具。...通过npm it就像在全局环境是node@6下安装和测试当前的包。我自己总是用到这个功能——在最近的一个项目中我甚至不得不大量的使用这个功能，因为我一个正在测试的库无法运行在node@8下面。...这玩意儿真是救了我的命，而且我发现在这种情况下，这个功能比那些我总是会错误配置的版本管理工具要好用得多。用交互的方式开发npm的run-script !...通过安装npm@5.2.0或以上版本，你现在就能得到npx——或者，如果你不想使用npm，你也可以安装npx的独立版本！因为任何对npm的使用都是在它内部的操作，所以它跟其他包管理器是完全兼容滴。

1.7K2 0

React基础(1)-create-react-app

应用),它是一个通过npm发布的安装包,也是一个命令,在安装好nodejs后,在命令终端下执行npm或者cnpm命令,全局安装create-react-app这个脚手架工具 D:\公开课\2019 npm...方式四:npx create-react-app 应用名称,与方式一是等价的,当你运行npx create-react-app my-app时，它会自动安装最新版本的Create React App,...创建项目 D:\公开课\2019 npx create-react-app 应用名称以上的命令可以创建react项目应用,在这个目录下回自动的创建一个应用框架的代码结构当使用npx create-react-app...命令创建react应用失败,更改淘宝镜像,替换成国内下载，更改完后,在使用npm或者cnpm以及一些其他命令时,下载依赖包会快很多查看npm的镜像源你可以在src中创建子目录。...,这也是个技术当一切就绪好后,执行npm start命令会启动一个本地开发模式的服务,同时会自动的打开一个网页,指向本地地止http://localhost:3000 如下图所示：接下来用你喜欢的代码编辑器打开项目

1.6K7 1

React学习(一)-create-react-app

应用),它是一个通过npm发布的安装包,也是一个命令,在安装好nodejs后,在命令终端下执行npm或者cnpm命令,全局安装create-react-app这个脚手架工具 D:\公开课\2019 npm...方式四: npx create-react-app 应用名称,与方式一是等价的,当你运行 npx create-react-app my-app时，它会自动安装最新版本的Create React App...命令创建react应用失败,更改淘宝镜像,替换成国内下载，更改完后,在使用npm或者cnpm以及一些其他命令时,下载依赖包会快很多查看npm的镜像源 D:\公开课\2019 npm config get.../registry.npm.taobao.org create-react-app创建项目 D:\公开课\2019 npx create-react-app 应用名称以上的命令可以创建react项目应用...工具,这也是个技术当一切就绪好后,执行npm start命令会启动一个本地开发模式的服务,同时会自动的打开一个网页,指向本地地止http://localhost:3000 如下图所示,以你自己启动的端口号为准

1.4K2 0

react开发环境搭建

以下是使用 create-react-app 工具的标准步骤，这是最常用的方法：使用 create-react-app 创建 React 项目确保你已安装 Node.js 和 npm 你可以通过以下命令检查是否安装了...使用 create-react-app 创建一个新的项目，替换 my-app 为你想要的项目名称： npx create-react-app my-app npx 是 npm 5.2.0 及更高版本随附的工具...进入项目目录进入你创建的项目文件夹： cd my-app 启动开发服务器启动项目的开发服务器： npm start 默认情况下，开发服务器会在 http://localhost:3000 运行。...以下是对这些文件和目录的详细讲解： 1. 项目根目录 node_modules/ 存放项目依赖的第三方库和模块。这个目录是由 npm 自动生成的，不需要手动管理。...在最新版本的 create-react-app 中，这个文件可能被移除或不推荐使用。

481 0

1000多个项目中的十大JavaScript错误以及如何避免

当你读取一个属性或调用一个未定义对象的方法时，Chrome 中就会报出这样的错误。 [image.png] 导致这个错误发生的原因有很多，常见的一种情况是在渲染 UI 组件时，不正确地初始化状态。...这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误，这与 Chrome 的上述错误基本相同，只是 Safari 使用不同的错误消息。...[image.png] TypeError: Null Is Not an Object (evaluating...) 这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。...TypeError: Cannot Read Property ‘length’ 这是 Chrome 中发生的错误，因为读取了未定义长度属性的变量。...我们也无法获取或设置 undefined 的任何属性。在这种情况下，应用程序将抛出“Uncaught TypeError cannot set property of undefined”。

6.2K3 0

【Scratch入门到精通】使用CRA搭建项目

$ npx create-react-app scratch-example --template typescript 2.2....定制CRA配置 react-app-rewired 可以在不 ‘eject’ 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置，然后你将拥有...create-react-app 的一切特性，且可以根据你的需要去配置 webpack 的 plugins, loaders 等。...自定义loader 由于create-react-app默认的webpack配置中，有规则会使scratch-render加载vert/frag文件时出现错误，经过分析对比，最终使用自定义vert-frag-loader.js...错误问题表象启动项目后，在浏览器端会出现twgl.js报错。

1.5K2 0

create-react-app入门教程

Quick Start（快速入门）全局安装首先确保你电脑上安装最新的 # 全局安装 npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app...my-app cd my-app # 启动编译当前的React项目，并自动打开 http://localhost:3000/ npm start 以上命令执行完成后，则自动打开： http://localhost...│ ├── logo.svg │ └── serviceWorker.js └── yarn.lock 默认的npm的脚本启动开发 npm start # or yarn start 启动测试...那么以下配置：配置HTTPS的环境变量为true然后再用npm start启动dev server就是HTTPS的了。..."test": "react-scripts test", 那么就可以运行以下命令进行分析最终打包的情况了： npm run build npm run analyze 其他react的默认配置直接可以使用

2.4K2 1

React 入门手册

在这里查看我的 npx 指南：https://flaviocopes.com/npx/ 从 5.2 版的 npm 开始，增加了 npx 命令。...当你执行 npx create-react-app 命令时，npx 首先会下载最新版的 create-react-app，然后再运行它，运行结束后会把它从你的系统中删除。...所以你可以即刻进入到新创建的应用目录下，运行 npm start 命令来启动 app。 ? 默认情况下，这个命令会在你本地的 3000 端口启动 app，并打开浏览器，为你展示欢迎界面： ?...一个组件可以有它自己的 state（状态），这就是说它可以封装一些其他组件无法访问的属性，除非它把这些 state 暴露给应用中的其他组件。...当出现语法错误、标签没有正确闭合或者匹配时，浏览器会尽可能的解析 HTML，而不是中断解析过程。这是 Web 的一个核心特点，它非常宽松。但是 JSX 并不宽松。

6.4K1 0

TypeScript学习进程（一）

脚手架安装 create一个TypeScript+React应用 npx create-react-app my-app --template typescript 完成了这一步，你可以用VsCode...引入修改 npm start报错1 解决方法： npm i web-vitals --save-dev ---- 搞完了？...安装redux和对应的react-redux npm install redux react-redux --save 安装axios npm install axios ---- TS start...TS的编译过程首先要知道，ts的编译和c++这些语言的编译是不一样的过程从图里可以看到，ts没有所谓的编译失败，即便报错那也能生成js文件，ts的编译目标是js代码。...TS是在变量后以：的形式进行类型注解类型与集合的关系图注不算清晰，下边这张应该是更为清晰

4801 0

JavaScrip最容易犯的十大错误及其避免方法（）

Uncaught TypeError: Cannot read property 如果你是一个javascript开发者，你肯定看到过此错误读取属性或调用方法的对象的未定义 这可能由于许多原因而发生，...反过来，这意味着ItemList将项目定义为未定义，并且您在控制台中收到错误 - “Uncaught TypeError：无法读取未定义的属性’map’”。这很容易解决。...TypeError: Object doesn’t support property 当您调用未定义的方法时，这是在IE中发生的错误。...Uncaught TypeError: Cannot set property 当我们尝试访问未定义的变量时，它总是返回undefined，我们无法获取或设置undefined的任何属性。...在这种情况下，应用程序将抛出“Uncaught TypeError无法设置未定义的属性”。 10.

1621 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云