react-native 新项目bundling failed,TransformError:babel-preset-react-native组件错误

最新推荐文章于 2024-08-31 10:21:59 发布
最新推荐文章于 2024-08-31 10:21:59 发布
阅读量3.8k 收藏
点赞数
分类专栏： react-native

init完新项目遭遇了一个错误


Bundling index.ios.js [development, non-minified, hmr disabled] 0.0% (0/1), failed.

error: bundling failed: "TransformError: /Users/Janmy/Desktop/demo/AwesomeProject/index.ios.js: Unexpected token ) (While processing preset: "/Users/Janmy/Desktop/demo/AwesomeProject/node_modules/babel-preset-react-native/index.js")"


错误提示就能看出是babel-preset-react-native这个组件出了问题，尝试卸载重装该组件解决。

命令行进入项目目录，依次运行

$ npm uninstall babel-preset-react-native
$ npm install babel-preset-react-native@2.1.0

























 


                

        

        

    

  


    

      

        

            

              
                
                  lzm150
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
babel-preset-react-native-stage-0:在React Native中使用Stage-0 Babel功能

				
			

			

				

					03-29
				

			

		

		

			
				
babel预设React本机阶段0
 尝试同时使用babel-preset-react-native和babel-preset-stage-0时，您在React Native中遇到奇怪的错误吗？ 对于使用RN上最新和最出色的Babel功能有多么困难，您是否通常感到困惑和沮丧？ 该预设适合您！
安装
npm install babel-preset-react-native-stage-0 --save
用法
只需向您的React Native项目添加一个.babelrc文件，如下所示：
 {
  "presets" : [ "react-native-stage-0" ]
}
 您是否需要实验性的传统装饰器支持（由）？ 使用它作为您的.babelrc：
 {
  "presets" : [ "react-native-stage-0/decorator-support" ]
}
故障排除


			
		

	



                

            
              



	

		

			

				
					
react-native-error-boundary:一个简单可重用的 React-Native 错误边界组件 :bug:

				
			

			

				

					07-23
				

			

		

		

			
				
 一个简单可重用的 React-Native 组件 :bug: 安装 yarn add react-native-error-boundary 用法 该组件在其子组件树中的任何位置捕获。 不处理本机错误。  使用这个组件非常简单。 首先，您必须导入ErrorBoundary组件...

			
		

	



              


  
              

                


	

		

			

				
					
cannot find module ‘babel-preset-react-native‘

				
			

			

				

					weixin_45656048的博客
				

				

					09-28
					
					938
					
				

			

		

		

			
				
运行yarn run android 报错cannot find module ‘babel-preset-react-native’ from '文件夹’解决办法
link.
npm install --save-dev babel-cli babel-preset-react-native
记录一下



			
		

	





	

		

			

				
					
前端工程化之Babel详解和实战

					
最新发布

				
			

			

				

					weixin_47588164的博客
				

				

					08-31
					
					1698
					
				

			

		

		

			
				
Babel 是一个广泛使用的 JavaScript 编译器，主要功能是将 ECMAScript 2015+版本的代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版本的浏览器或环境中运行。它出现的原因是 JavaScript 语言快速发展，新的语言特性不断加入，但这些新特性并不总是被所有的浏览器或环境所支持。Babel 使得开发者可以使用最新的 JavaScript 特性，而不必担心兼容性问题。它通过转换新语法和实现新特性来实现这一点。

			
		

	



		

			
		



	

		

			

				
					
Fix babel-preset-react-native TransformError

				
			

			

				

					Wang的专栏
				

				

					08-20
					
					2487
					
				

			

		

		

			
				
错误环境新版本存在不兼容，在运行  react-native run-android 的时候，发生的错误分析：
babel-preset-react-native version : @3.0.0 
$ react-native -v :react-native-cli: 2.0.1
react-native: 0.47.1$node -v : v7.8.0
$ npm -v :4.4.4
解决方案

			
		

	





	

		

			

				
					
error: bundling failed: NotFoundError: Cannot find entry file index.ios.js in any of the roots:

				
			

			

				

					何-马的博客
				

				

					04-03
					
					730
					
				

			

		

		

			
				
RN运行时android调试正常,在ios运行时终端报错,Build编译是正常的
  error: bundling failed: NotFoundError: Cannot find entry file index.ios.js in any of the roots: ["/Users/hld/Desktop/project/RN/ZRApp"]
        at Dependency...

			
		

	





	

		

			

				
					
ReactNative教程 — Hello React Native

				
			

			

				

					踩姑凉的小蘑菇
				

				

					10-31
					
					2360
					
				

			

		

		

			
				
ReactNative教程 — Hello React Native

			
		

	





	

		

			

				
					
react-native-yz-vlcplayer：VLC播放器，用于react-native

				
			

			

				

					02-05
				

			

		

		

			
				
 组件，用于react-native此项目引用 ， ，   VLCPlayer支持各种格式（mp4，m3u8，flv，mov，rtsp，rtmp等），具体参见 示例项目 Xcode10 +的一些问题 （1）libstdc ++。6.0.9.tbd找到在Xcode10中，libstdc ++。6.0.9...

			
		

	





	

		

			

				
					
react-native-amap3d：react-native高德地图组件，使用最新的3D SDK，支持Android + iOS

				
			

			

				

					02-05
				

			

		

		

			
				
 react-native高德地图组件，使用最新的3D SDK，支持Android + iOS，受启发，提供功能丰富且易用的接口。 相关项目推荐： 关联文档： :  功能 地图模式切换（常规，卫星，导航，夜间）  3D建筑，路况，室内地图 内置...

			
		

	





	

		

			

				
					
react-native-blur：React Native Blur组件

				
			

			

				

					02-05
				

			

		

		

			
				
@react-native-community/blur  一种UIVisualEffectView的iOS上的模糊和活力的效果，和组件在Android上。 内容 安装 使用Yarn安装库：  yarn add @react-native-community/blur 或npm：  npm install --save @react-...

			
		

	





	

		

			

				
					
React Native 配置遇到的错误：TransformError

					
热门推荐

				
			

			

				

					陈陈陈技术博客
				

				

					01-28
					
					1万+
					
				

			

		

		

			
				
按照http://bbs.reactnative.cn/topic/10/%E5%9C%A8windows%E4%B8%8B%E6%90%AD%E5%BB%BAreact-native-android%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/2配置的，在执行：react-native
 start 后，打开网址：http://localhost:8081/inde

			
		

	





	

		

			

				
					
React Native iOS 的 TransformErrorerror错误(.babelrc.stage)

				
			

			

				

					月十二
				

				

					02-25
					
					1841
					
				

			

		

		

			
				
打开终端

找到工程所在的目录  

1.打开   cd  node_modules/

2.打开 cd react-deep-force-update/

3.输入  ls -al  显示所有文件，找到 .babelrc 文件

4.输入命令   rm -rf .babelrc 删除 .babelrc 文件







关闭工程，关闭终端，再次command

			
		

	





	

		

			

				
					
ios 原生集成ReactNative错误总结2之TransformError

				
			

			

				

					weixin_40200876的博客
				

				

					11-01
					
					219
					
				

			

		

		

			
				
TransformError:/xx/xx/Desktop/RNDemo/RN/index.ios.js: /xx/xx/Desktop/package.json: Error while parsing JSON - Unexpected token \\ in JSON at position 1"

 



解决方法:

cd到rn目录下，执行如下命令

yarn/npm remove b...

			
		

	





	

		

			

				
					
解决升级React Native0.57.7时报错问题: Couldn't find preset "module:metro-react-native-babel-preset"

				
			

			

				

					SemperChan的博客
				

				

					11-29
					
					3393
					
				

			

		

		

			
				
ReactNative版本升级教程：https://reactnative.cn/docs/upgrading/

 

执行react-native-git-upgrade命令升级React Native0.57.7时可能出现的错误：An error occurred during upgrade: git-upgrade ERR! Error: Couldn't find preset "mo...

			
		

	





	

		

			

				
					
如何在React Native中使用Babel宏

				
			

			

				

					cumian9828的博客
				

				

					07-25
					
					563
					
				

			

		

		

			
				
by Karan Thakkar 由Karan Thakkar 
 如何在React Native中使用Babel宏 (How to use Babel macros with React Native)
 使用codegen.macro解决i18n问题的实际用例 (A practical use case for solving an i18n problem using codegen.mac...

			
		

	





	

		

			

				
					
react-native   TransformError   错误处理

				
			

			

				

					m0_37829185的博客
				

				

					08-18
					
					651
					
				

			

		

		

			
				
错误原因是打包的index.android.bundle 文件有错误，可能是版本问题。
处理方法：


1.打开你工程文件  
cd  node_modules/

2.打开 cd

React-deep-force-update/

3.输入  ls -al  显示所有文件，找到 .babelrc 文件
4.输入命令   rm -rf .babelrc 删除 .babel

			
		

	





	

		

			

				
					
react-native start 的时候出现TransformError

				
			

			

				

					ypxu87的专栏
				

				

					02-23
					
					3286
					
				

			

		

		

			
				
昨天开始了学习react native，真是坎坎坷坷，按照 react native 中文网上的教程（http://reactnative.cn/docs/0.20/getting-started.html），一开始一切都走的很顺利，但是运行app的时候出现unable to download JS bundle的问题。
看react-native start的log，发现有TransformE

			
		

	





	

		

			

				
					
Cannot find module ‘@babel/preset-react‘ from ‘D:\学习\React相关\02.xxxxxt‘【转载】

				
			

			

				

					ysfscdn的博客
				

				

					08-18
					
					4805
					
				

			

		

		

			
				
在学习React过程中，发现在index.js文件中的JSX语法不能被识别。

刚开始报错的提示信息是“Support for the experimental syntax 'jsx' isn't currently enabled”。接着第二次又报“Cannot find module '@babel/preset-react' from 'D:\学习\React相关\02.xxxxxt'”错误。按照网上查的资料修改Babel文件，没有效果，终于在一篇博客上找到了解决办法，亲测有效。

问题产生的原因


			
		

	





	

		

			

				
					
React Native 开发中常见问题

				
			

			

				

					muranfei的博客
				

				

					09-12
					
					489
					
				

			

		

		

			
				
报500错误

 
在运行ReactNative项目的时候，手机上经常会出现这种错误，解决办法：  
在当前项目的路径下分别运行以下命令：

npm uninstall babel-preset-react-native

npm install babel-preset-react-native@2.1.0 —save

如果你是用的yarn的话，需要将npm修改为yarn：



yarn r...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值