React Native babel编译异常问题

3,153 阅读2分钟

最近以React Native技术开发App应用,搭建项目时遇到坑颇多,网上查找解决方法费时,费精力,总结一些问题,希望能对读者有所帮助。

我的个人博客

这次遇见的问题是babel编译ES6源码时,抛出的异常,导致无法启动项目,执行react-native run-ios,启动模拟器后报错:

RN bundling error babel

可以看到,有用的信息:Error bundling Cannot find module @babel/core,而使用react-native-cli创建的React Native App应用使用的是babel预设方案:babel-preset-react-native,这是它的最新版本的一个bug,我们可以将其版本退回至2.1.0,首先删除它(使用yarn或npm进行安装包管理皆可):

yarn remove babel-preset-react-native
or
npm unstall babel-preset-react-native

然后安装指定版本:

yarn add --dev babel-preset-react-native@2.1.0
or
npm install --save-dev babel-preset-react-native@2.1.0

最后,再次启动应用:

react-native run-ios
or 
react-native run-android

应用正常运行。

React Native 版本问题

当然也许你还会遇到一个异常:

No Bundle Url Present

这个问题是由于最新React Native版本,需要Xcode版本大于9,Mac OS大于11,所以可以将React Native版本将至0.53.3

react-native init myApp --version 0.53.3

Babel preset版本问题

前面对于babel编译问题,指出将版本回降至2.1.0,正常是没有问题的,但是如果使用了ES6新语法generator时,需要注意,下面这种export导出写法,将会报错:

export default function * root () {
  yield ...
}

Babel preset error

需要改成如下导出方式,先赋值再导出:

const root = function * root () {
  yield ...
}
export default root;

当然,如果不希望修改代码,则需要将babel-preset-react-native版本降至2.0.0:

rm -rf ./node_modules
yarn cache clean or npm cache clean
yarn add --dev babel-preset-react-native@2.0.0
yarn install
watchman watch-del-all // 如果使用了watchman

然后杀掉上次应用启动的进程,重新启动应用,即可正常编译,运行:

react-native run-ios

可以参考How to clear the react native packager