taro项目安装报错babel-plugin-react-com

问题描述

使用pnpm安装taro项目时，且没有lock文件时，会报一个错

img_v3_02ff_e0998f29-2513-4b06-ba6e-a0f6ddb41b0g.jpg

仔细看是babel-plugin-react-compiler报的，react-compiler是新出的react编译器，而项目是好早之前就搭建了的，那个时候react-compiler都没出来，也不可能被taro项目使用

看这个报错，是安装时执行了babel-plugin-react-compiler的一个postinstall的hook，然后hook里执行一个sh文件报的错

我们点进去看这个包

image.png

可以看到postinstall执行了一个.sh文件，但是仔细看这个包里面，哪来的scripts目录呀，啥也没有，都找不到这个文件。

我们再找找其他的包，是不是也这样，随便找了一个包点进去看，是有对应的文件的

image.png

所以看起来就像是babel-plugin-react-compiler这个包发的有问题

思路一下子清晰了一点

1. 安装的时候，不知道为啥会安装到babel-plugin-react-compiler这个包
2. 安装babel-plugin-react-compiler包时，这个包看起来像是有问题的，就导致了安装报错

初步原因

项目里使用了公司内部的组件库，组件库里面的peerDependencies依赖了"@tarojs/taro-rn": ">=3"，pnpm安装的时候，会把peerDependencies里的也给安装上

项目里面没有显式指定@tarojs/taro-rn这个包，只有公司内部组件库的package.json中的peerDependencies有指定，看lock文件，这个包同时出现在peerDependencies和dependencies里

image.png

这里贴的图是解决后的，因为没解决的话安装报错，没法产生lock文件

所以现在把@tarojs/taro-rn的版本固定成最初项目搭建的版本即可，虽然项目里面没指定，但是依赖的包可能会有

解决

使用resolutions字段
在项目的package.json中加入

  "resolutions": {
    "@tarojs/taro-rn": "3.6.19"
  }

把@tarojs/taro-rn的版本固定住即可

总结整理原因

1. pnpm自动装上了某个组件库peer里的@tarojs/taro-rn，然后就引发了一系列的问题
2. @tarojs/taro-rn 有一个叫expo的依赖是这么写的，"expo": "~51.0.5"，~表示自动升级到第三位的最新版
   image.png

3. expo的依赖里面也有一个依赖是 "babel-preset-expo": "~11.0.15", 也是升级到第三位最新版

   
   image.png

4. babel-preset-expo最新版本里面有个依赖，才是babel-plugin-react-compiler

   
   image.png

5. 然后babel-plugin-react-compiler，因为包里面没有带着.sh文件一起发布，所以导致找不到sh文件报错?windows上乱码，没法看到报错原因是啥，只能先这么猜测了

验证pnpm猜想

验证下是pnpm安装造成的，我们在安装成功后再试下

1. 使用pnpm why @tarojs/taro-rn 可以看到哪个包引用了这个@tarojs/taro-rn

   
   image.png
   

   可以看到只有公司内部组件库的peer使用了

2. 把公司内部组件库的包从package.json里给删了，再重新安装，结果为安装成功，没有报错，没有babel-plugin-react-compiler的安装

3. 直接使用yarn安装，安装成功，没有报错，没有babel-plugin-react-compiler的安装

查询相关文档后发现
pnpm文档里默认配置为auto-install-peers=true，也就是说确实会自动安装依赖，

image.png