记录从Taro2迁移到Taro3遇到的问题

最新推荐文章于 2024-12-21 21:51:52 发布

西瓜味牛奶

最新推荐文章于 2024-12-21 21:51:52 发布

阅读量3.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： npm reactjs

本文链接：https://blog.csdn.net/weixin_43567670/article/details/118440749

本文记录了作者在将项目从Taro 2升级到Taro 3过程中遇到的挑战，包括mobx版本调整、组件导入方式变化、报错修复及TSLint转ESLint等问题，提供了解决方案和关键步骤。

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

该说不说，没想到2021年了我才开始受taro迁移的苦。
项目用的是Taro+React+Taro-ui+mobx。

过程

老老实实地打开了官方文档从旧版本迁移到 Taro Next，并跟着上面写的一步一步操作，然后就开始了无穷无尽的报错(泪目。其实也没有，只是一开始以为Taro3完全不支持mobx了，要改用redux了。大概看了一下教程，对重写的工作量望而却步，最后发现还是能用的，改成mobx-react就好了，这段花了我一个下午)。

一顿操作之后，我发现了Taro升级这个神仙分享。和我遇到的问题有很高的重合度，而且新建一个Taro3项目来参考这种操作也太聪明了。

其它问题

1.报错信息：
\taro-ui\dist\weapp\common\component.tsx: Unexpected token, expected ","
看到taro-ui，觉得估计就是它的问题。搜了一下发现是taro-ui 2.x 跟 taro 3.x 不兼容，需要安装 3.x 的 taro-ui
taro3-不使用-typescript-的情况下使用-taro-ui-时报错

2.报错信息
taro3 does not contain an export named
这个是翻了别的Taro3项目才发现的，之前我引入自定义组件一般是这样

import { XxxxxXxxx } from '../../component/xxxxxx'

改成这样就好了

import XxxxxXxxx from '../../component/xxxxxx'

3.报错信息：
’mobx’ does not contain an export named ‘_allowStateReadsStart’或者’mobx’ does not contain an export named '_xxxxxxxxxxxx’
一长排
一开始我疯狂删除node_modules文件夹和package-lock.js，还有npm clean cache --force。
但是没用’mobx’ does not contain an export named '_allowStateReadsStart’这条报错始终在。
我疯狂搜索相关issue，企图找到答案。终于让我看到了它mobx-react 依赖版本中的不一致
然后我就去看了看之前新建的Taro3项目，发现人家package.json里写的版本是

"mobx": "^4.15.7",
"mobx-react": "^6.1.4",

而我"mobx-react": “^7.2.x”，于是我按照它把版本改成了6.1.4的，果然没报错了。

4.很离谱，我被折磨得要放弃了之后打算还是直接用新建的那个Taro3项目，结果npm i之后报错
tslint@6.1.3: TSLint has been deprecated in favor of ESLint
我开始怀疑人生，把这个项目删了之后重新taro init myApp，还是报了相同的错误。
报错上显示了一个链接Roadmap: TSLint -> ESLint #4534，点进去看得我有点迷茫，但是还是按照上面写的把TSLint换成了Eslint就好了。这个报错弄明白之后命令行里终于没有报错了，打开微信开发者工具又开始第二轮报错。有一部分是我的乌龙操作导致的，那些就不写了。

5.报错信息：chunk common [mini-css-extract-plugin]
解决方法：编译警告 chunk common [mini-css-extract-plugin] #7907

6.报错信息：TypeError: Cannot call a class as a function
这个问题我挠了会头，报错信息搜一搜发现可能导致这个报错的原因有很多，最后根据这个报错的文件路径推测出可能还是mobx的问题。
还是看了新建的Taro3项目，发现之前是这么用的

@inject((stores, props) => ({
  xxxx: stores.xxxxx
}))
@observer

const { xxxx } = this.props
xxxx.xxxx()

现在应该是这样

@inject('store')
@observer

const { xxxx } = this.props.store

最后

当时问题都没有一一记下来，这些都是翻浏览器历史记录找出来的，所以报错信息都不是很完整。

最新Taro UI组件SwipeAction引用无效，解决办法这条给我看哭了