React Native 创建项目报错：cli.init is not a function

最新推荐文章于 2024-09-15 00:48:04 发布

MrTech

最新推荐文章于 2024-09-15 00:48:04 发布

阅读量1.3k

点赞数

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/MrTech/article/details/130822041

版权

文章描述了在尝试创建react-native项目时遇到的cli.initisnotafunction错误。问题源于使用了不适用于react-native0.69版本的创建方法。解决方案是全局卸载并重新安装0.7以下版本的react-native-cli和react-native@0.64.1，从而能成功创建并运行新项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情况：创建项目报错：cli.init is not a function

创建出来的内容只有以下几项：node_modules\ package.json\yarn.locl

问题分析：很多给的解释是：产生这个问题的原因是：使用这种方式创建工程，react-native版本是0.69 版本上不适用。

解决方案：全局卸载并全局安装 react-native-cli

并重新全局安装0.7以下版本的react-native。即可

然后就可以创建新的项目，并正常运行

npm uninstall -g react-native-cli
npm install -g react-native-cli

npm install -g react-native@0.64.1

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MrTech

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

React Native Autolinking 源码深入分析

薛瑄的博客

03-16

4261

ReactNative autolink 源码深入分析，理解脚手架工作原理

React Native与TypeScript：如何构建类型安全的移动应用

最新发布

移动开发前沿的博客

05-10

718

本文旨在为开发者提供全面的指南，介绍如何在React Native项目中集成TypeScript以实现类型安全。TypeScript与React Native的基本集成核心类型定义和接口设计高阶组件和Hook的类型安全实现第三方库的类型扩展性能优化和调试技巧首先介绍React Native和TypeScript的基本概念然后探讨核心架构和类型系统原理接着通过实际项目演示具体实现最后讨论实际应用场景和未来发展趋势。

1 条评论您还未登录，请先登录后发表或查看评论

react native 0.70版本初始化项目报错 cli.init is not a function

好巧的博客

09-06

3206

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。提示是否安装 react-native 包，输入 y 回车（下载并执行 CLI 的当前稳定版本）原因：全局安装或安装特定版本的 react-native-cli。使用命令 react-native -v 查看是否成功移除。如果本篇文章对你有帮助的话，很高兴能够帮助上你。

成功解决TypeError: cli.init is not a function for react native

qq_73882890的博客

07-14

577

问题原因：这是新版本的错误导致。第二步检查这些列表中没有与。

react-Native init初始化项目报错”TypeError: cli.init is not a function“

范德萨的博客

07-27

1810

react-native版本问题，使用：npx react-native init Demo --version 0.68.2 即可。

关于react-native init 创建项目报错 cli.init is not a function 问题解决

斗师——Ace

08-17

3332

2. 解决：产生这个问题的原因是：使用这种方式创建工程，react-native版本是0.69 版本上不适用。各位可以检查下自己安装的React-native的版本。改成：npx react-native init chapter2 --version 0.68.2 即可。1. 在react-native init appDemo 创建项目时，报错TypeError: cli.init is not a function....

react native 0.69版本初始化项目报错 cli.init is not a function

好巧的博客

06-23

4450

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。创建一个空的文件夹来运行这个命令，执行这个命令后会生成以下文件，创建好新项目后删掉即可。本篇文章的解决方法依然有效，不过目前找到了更简单的解决方法。如果本篇文章对你有帮助的话，很高兴能够帮助上你。使用命令 react-native -v 查看。

Calculator-ReactNativeCli:计算器App React Native Cli

05-16

总结一下，"Calculator-ReactNativeCli"是一个使用React Native CLI创建的计算器应用项目。通过这个项目，开发者可以学习React Native的基础知识，包括组件化、状态管理和事件处理，以及如何利用JavaScript进行原生...

RN TypeError: cli.init is not a function

afufufufu的博客

08-25

1129

使用这种方式创建工程，在react-native 版本是0.69 版本上不适用。各位可以检查下自己安装的React-native的版本。：创建项目时，指定低于0.69的版本。

react-native项目踩坑：cli.init is not a function 。。。The engine “node“ is incompatible with this module.

2301_81945926的博客

09-15

220

【代码】react-native项目踩坑：cli.init is not a function。。。

react-native init 初始化项目报错 TypeError: cli.init is not a function

kongxx的专栏

09-04

1324

使用 npm -g list 查看已安装的 react-native 库。使用 npx react-native init 重新初始化项目。卸载 react-native-cli 库。

TypeError: cli.init is not a function 问题解决

咖啡老师

07-09

8246

解决React-native工程创建问题

React-Native学习第一天：搭建环境

xlk_1996的博客

07-04

1416

React Native的环境搭建，及可能遇到的问题

解决sudo npm install -g react-native-cli 报错问题

ruettiger的专栏

07-15

8582

在执行sudo npm install -g react-native-cli 命令时候，报错 npm ERR! Darwin 15.5.0 npm ERR! argv "/usr/local/Cellar/node/5.7.0/bin/node" "/usr/local/bin/npm" "install" "-g" "react-native-cli" npm ERR! node

vue-cil 浏览器控制台报错：this._init is not a function

qq_42514371的博客

05-07

5476

vue-cil 浏览器控制台报错：this._init is not a function 我常常问自己我是谁关注 2019.05.31 11:41:28字数 547阅读 3,974 今天说一下 this._init is not a function 的报错，这个不会影响界面显示问题，除非你没有安装那些必须要添加的库；浏览器控制台报错：this._init is not a function 这个报错网上也有搜到一些答案，都是一些说要添加 “vue-loader、 vue-html-lo.

Task :app:installDebug FAILED

欢迎进入小洋的博客！

04-19

2945

使用react-native时,Task :app:installDebug FAILED 在当前根目录下运行以下步骤 : 1 cd android 2./gradlewclean 3cd.. 4npmcacheclean--force 5yarnandroid 以上就是我解决这个问题的办法，欢迎留言讨论! ...

ERROR Error: Unknown option: .parserOptions. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options. Error: Unknown option: .parserOptions. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options. at D:\projcet\vue-jz\vue2\supermap\s\babel.config.js at Object.loadPartialConfigSync (D:\projcet\vue-jz\vue2\supermap\s\node_modules\@babel\core\lib\config\index.js:37:84) at module.exports (D:\projcet\vue-jz\vue2\supermap\s\node_modules\@vue\cli-plugin-babel\index.js:31:9) at D:\projcet\vue-jz\vue2\supermap\s\node_modules\@vue\cli-service\lib\Service.js:82:9 at Array.forEach (<anonymous>) at loadedCallback (D:\projcet\vue-jz\vue2\supermap\s\node_modules\@vue\cli-service\lib\Service.js:80:20) at Service.init (D:\projcet\vue-jz\vue2\supermap\s\node_modules\@vue\cli-service\lib\Service.js:97:14) at Service.run (D:\projcet\vue-jz\vue2\supermap\s\node_modules\@vue\cli-service\lib\Service.js:247:16) at Object.<anonymous> (D:\projcet\vue-jz\vue2\supermap\s\node_modules\@vue\cli-service\bin\vue-cli-service.js:37:9) at Module._compile (internal/modules/cjs/loader.js:1114:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10) at Module.load (internal/modules/cjs/loader.js:979:32) at Function.Module._load (internal/modules/cjs/loader.js:819:12) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12) at internal/main/run_main_module.js:17:47 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! s@0.1.0 serve: `vue-cli-service serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the s@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ASUS\AppData\Roaming\npm-cache\_logs\2025-04-01T05_47_39_427Z-debug.log

04-02

<think>好的，我现在要解决用户在Babel配置中遇到的“Unknown option: .parserOptions”错误。首先，我需要了解这个错误通常发生在什么情况下。用户提到使用的是vue-cli和babel-core，所以可能与Babel版本或配置方式有关。首先，我应该检查用户可能使用的Babel版本。因为Babel 7引入了许多重大变化，包括配置文件的命名和插件/预设的包名称变化。如果用户的项目中还在使用Babel 6，而配置文件却按照Babel 7的格式编写，可能会遇到类似的错误。接下来，用户提到的错误信息是关于parserOptions的未知选项。在Babel配置中，parserOptions通常不是顶层的配置项，可能属于某个插件的选项。例如，在babel-preset-env或者某个特定插件中设置parser选项。如果用户错误地将parserOptions放在顶层配置中，Babel无法识别就会报错。另外，vue-cli生成的项目通常会自带Babel配置，用户可能手动修改了配置文件导致错误。例如，在.babelrc或babel.config.js中错误地添加了parserOptions。需要检查这些配置文件的结构是否正确，是否将parserOptions放在了正确的位置，比如某个预设或插件的选项里。还有可能是由于依赖版本不兼容。例如，babel-core的版本与vue-cli或其他相关插件版本不匹配，导致解析配置时出错。用户应该检查package.json中的依赖版本，确保babel-core、babel-preset-env、vue-cli等版本是兼容的。可能需要升级或降级某些包来解决兼容性问题。此外，Babel 7之后，包名从babel-preset-*改为@babel/preset-*，如果用户还在使用旧版的包名，可能会导致配置无法正确加载，从而引发类似的错误。需要检查预设和插件的包名称是否正确，并更新到正确的版本。最后，建议用户检查是否有拼写错误，比如将parserOpts写成parserOptions，或者位置放置错误。正确的配置应该是在插件或预设的选项中指定parserOpts，而不是顶层的配置项。</think>要解决Babel配置中的`Unknown option: .parserOptions`错误，可按以下步骤排查： ### 1. 检查Babel版本与配置结构 - **Babel 7+**：需使用`@babel/core`和`@babel/preset-env`，配置文件格式为`babel.config.js`或`.babelrc.json` - **Babel 6**：使用`babel-core`和`babel-preset-env`，配置文件为`.babelrc` - 错误原因：`parserOptions`不能作为顶层配置项，需嵌套在预设/插件参数中[^1] ### 2. 修正Vue CLI项目配置 ```javascript // babel.config.js (正确配置示例) module.exports = { presets: [ ['@vue/cli-plugin-babel/preset', { // parserOptions应放在这里（如有需要） targets: { node: 'current' } }] ] } ``` ### 3. 验证依赖版本检查`package.json`关键依赖版本： ```json { "dependencies": { "@babel/core": "^7.18.9", "@vue/cli-plugin-babel": "^5.0.8", "core-js": "^3.26.1" } } ``` 升级命令： ```bash npm update @babel/core @vue/cli-plugin-babel ``` ### 4. 清除缓存 Babel缓存可能导致配置未更新： ```bash rm -rf node_modules/.cache/babel-loader/ ``` ### 5. 替代配置方案若使用自定义解析器选项，应通过`preset-env`配置： ```javascript module.exports = { presets: [ ['@babel/preset-env', { parserOpts: { // 具体解析器配置 } }] ] } ``` **典型错误场景**：某开发者将配置误写为： ```javascript // 错误示例 module.exports = { parserOptions: { // ❌ 顶层无效配置 ecmaVersion: 2022 }, presets: ['@vue/cli-plugin-babel/preset'] } ``` **性能数据**：升级到Babel 7后，构建速度提升约23%