[taro react] 【run dev:h5】 报错 Uncaught ReferenceError: $RefreshSig$ is not defined

这是一篇踩坑篇,因为目前没有好的文章,所以这边做一个记录。

公司想做多端,我今天有空就准备预习了一下taro 这个框架,谁知刚创建了项目就卡主了,一直提示一个报错: Uncaught ReferenceError: $RefreshSig $ is not defined。一开始还以为是我创建项目的时候哪里配置使用不对的问题,重新创建了两遍项目后就排除了这个可能。一片白的页面,一直报红的控制台:
Uncaught ReferenceError: $RefreshSig $ is not defined
我眉头紧锁,因为我知道:我碰到事儿了!
debug流程启动! 第一步:百度、google。尝试了一个多小时,方案都不行。启动plan B
debug流程    第二步:社区。到github 里找到了open中的issues。 底下有这样的一个方案:在config/dev.js中加入了isWatch:true
在这里插入图片描述

如上图加到代码中再重新run一下项目就跑通了。
此bug为taro 3.5.7的版本bug,后期说是会修复。这里要补充一下就是taro的更新比较多,且经常出一些莫名其妙的bug。所以,如果准备使用taro开发的话,建议最好锁一下版本号,避免项目在运行时出现一些意料之外的情况。

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
这个错误通常是因为 `this` 上下文对象出现了问题。你可以尝试将 `showShareMenu` 方法改为箭头函数,这样可以确保方法里的 `this` 指向正确。 修改后的代码如下: ```jsx import Taro from '@tarojs/taro' import { Canvas, View } from '@tarojs/components' class ShareImage extends Taro.Component { state = { canvasImage: '' } // 绘制背景图片 drawBgImage = (ctx, bgImage) => { return new Promise(resolve => { Taro.getImageInfo({ src: bgImage, success: res => { const { width, height } = res const canvasWidth = Taro.pxTransform(750) // 画布宽度,这里设置为750rpx const canvasHeight = canvasWidth * height / width // 画布高度,根据背景图片等比例缩放 // 绘制背景图片 ctx.drawImage(bgImage, 0, 0, width, height, 0, 0, canvasWidth, canvasHeight) resolve() } }) }) } // 绘制文字 drawText = (ctx, text) => { return new Promise(resolve => { ctx.setFillStyle('#333') // 设置文字颜色 ctx.setFontSize(Taro.pxTransform(32)) // 设置文字大小,这里设置为32rpx ctx.setTextAlign('center') // 设置文字居中 ctx.fillText(text, Taro.pxTransform(375), Taro.pxTransform(400)) // 绘制文字,这里设置在画布中间位置 resolve() }) } // 获取海报图片 getPoster = async () => { const ctx = Taro.createCanvasContext('canvas', this.$scope) // 绘制背景图片 await this.drawBgImage(ctx, '背景图片链接') // 绘制文字 await this.drawText(ctx, '需要绘制的文字') // 将 canvas 转换为临时文件路径 const res = await Taro.canvasToTempFilePath({ canvasId: 'canvas', quality: 1 }, this.$scope) return res.tempFilePath } // 显示分享菜单 showShareMenu = async () => { // 获取海报图片 const tempFilePath = await this.getPoster() // 显示分享菜单 Taro.showShareImageMenu({ imageUrl: tempFilePath, success: () => { console.log('分享成功') }, fail: () => { console.log('分享失败') } }) } render() { return ( <View> <Canvas canvasId='canvas' style={{ width: '100%', height: '100%' }} /> <Button onClick={() => this.showShareMenu()}>分享图片</Button> </View> ) } } export default ShareImage ``` 你可以尝试将 `showShareMenu` 方法改为箭头函数,如果还有问题,请提供完整的代码和报错信息给我,我会尽力帮助你解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值