search

jin-yufeng / mp-html

小程序富文本组件，支持渲染和编辑 html，支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用
https://jin-yufeng.gitee.io/mp-html
MIT License
3.26k stars 479 forks source link

taro 3.6.5 使用 mp-html 异常 #511

Closed InfernalAzazel closed 1 year ago

InfernalAzazel commented 1 year ago

使用环境

平台: 微信 基础库版本 : 2.30.3 taro vue3: 3.6.5

问题描述

Vue warn]: Failed setting prop "content" on <mp-html>: value <div>Hello World!</div> is invalid. TypeError: Cannot set property content of #<TaroElement> which has only a getter
    at patchDOMProp (._node_modules_.pnpm_@vue+runtime-dom@3.2.40_node_modules_@vue_runtime-dom_dist_runtime-dom.esm-bundler.js:260)
    at patchProp (._node_modules_.pnpm_@vue+runtime-dom@3.2.40_node_modules_@vue_runtime-dom_dist_runtime-dom.esm-bundler.js:394)
    at mountElement (._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5171)
    at processElement (._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5145)
    at patch (._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5065)
    at mountChildren (._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5252)
    at mountElement (._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5162)
    at processElement (._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5145)
    at patch (._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5065)
    at ReactiveEffect.componentUpdateFn [as fn] (._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5605) 
  at <Index tid="pages/index/index?$taroTimestamp=1682587829087" option= {} > 
  at <Anonymous key="pages/index/index?$taroTimestamp=1682587829087" > 
  at <App>
warn @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:38
patchDOMProp @ ._node_modules_.pnpm_@vue+runtime-dom@3.2.40_node_modules_@vue_runtime-dom_dist_runtime-dom.esm-bundler.js:265
patchProp @ ._node_modules_.pnpm_@vue+runtime-dom@3.2.40_node_modules_@vue_runtime-dom_dist_runtime-dom.esm-bundler.js:394
mountElement @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5171
processElement @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5145
patch @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5065
mountChildren @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5252
mountElement @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5162
processElement @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5145
patch @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5065
componentUpdateFn @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5605
run @ ._node_modules_.pnpm_@vue+reactivity@3.2.40_node_modules_@vue_reactivity_dist_reactivity.esm-bundler.js:185
instance.update @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5712
setupRenderEffect @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5726
mountComponent @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5508
processComponent @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5466
patch @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5068
mountChildren @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5252
mountElement @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5162
processElement @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5145
patch @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5065
mountChildren @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5252
processFragment @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5425
patch @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5061
componentUpdateFn @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5605
run @ ._node_modules_.pnpm_@vue+reactivity@3.2.40_node_modules_@vue_reactivity_dist_reactivity.esm-bundler.js:185
instance.update @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5712
setupRenderEffect @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5726
mountComponent @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5508
processComponent @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5466
patch @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5068
patchKeyedChildren @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5868
patchChildren @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5775
processFragment @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5455
patch @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5061
componentUpdateFn @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5678
run @ ._node_modules_.pnpm_@vue+reactivity@3.2.40_node_modules_@vue_reactivity_dist_reactivity.esm-bundler.js:185
instance.update @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:5712
callWithErrorHandling @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:155
flushJobs @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:388
Promise.then (async)
queueFlush @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:280
queueJob @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:274
i.f.i.f @ ._node_modules_.pnpm_@vue+runtime-core@3.2.40_node_modules_@vue_runtime-core_dist_runtime-core.esm-bundler.js:3052
updateAppInstance @ .._src_runtime_connect.ts:154
mount @ .._src_runtime_connect.ts:145
mount @ .._src_dsl_common.ts:159
(anonymous) @ .._src_dsl_common.ts:176
(anonymous) @ WASubContext.js?t=wechat&s=1682587341583&v=2.30.3:1
c.__callPageLifeTime__ @ WASubContext.js?t=wechat&s=1682587341583&v=2.30.3:1
(anonymous) @ WASubContext.js?t=wechat&s=1682587341583&v=2.30.3:1
(anonymous) @ WASubContext.js?t=wechat&s=1682587341583&v=2.30.3:1
(anonymous) @ WASubContext.js?t=wechat&s=1682587341583&v=2.30.3:1
(anonymous) @ WASubContext.js?t=wechat&s=1682587341583&v=2.30.3:1
(anonymous) @ WASubContext.js?t=wechat&s=1682587341583&v=2.30.3:1
(anonymous) @ WASubContext.js?t=wechat&s=1682587341583&v=2.30.3:1
Sr @ WASubContext.js?t=wechat&s=1682587341583&v=2.30.3:1
(anonymous) @ WASubContext.js?t=wechat&s=1682587341583&v=2.30.3:1
Lt.emit @ WAServiceMainContext.js?t=wechat&s=1682587341583&v=2.30.3:1
emit @ WAServiceMainContext.js?t=wechat&s=1682587341583&v=2.30.3:1
(anonymous) @ WAServiceMainContext.js?t=wechat&s=1682587341583&v=2.30.3:1
(anonymous) @ WAServiceMainContext.js?t=wechat&s=1682587341583&v=2.30.3:1
Lt.emit @ WAServiceMainContext.js?t=wechat&s=1682587341583&v=2.30.3:1
emit @ WAServiceMainContext.js?t=wechat&s=1682587341583&v=2.30.3:1
(anonymous) @ WAServiceMainContext.js?t=wechat&s=1682587341583&v=2.30.3:1
(anonymous) @ WAServiceMainContext.js?t=wechat&s=1682587341583&v=2.30.3:1
emit @ WAServiceMainContext.js?t=wechat&s=1682587341583&v=2.30.3:1
c @ VM9 asdebug.js:1
d @ VM9 asdebug.js:1
(anonymous) @ VM9 asdebug.js:1
g @ VM9 asdebug.js:1
f @ VM9 asdebug.js:1
(anonymous) @ VM9 asdebug.js:1
_ws.onmessage @ VM9 asdebug.js:1
Show 43 more frames
[pages/index/index] Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./components/mp-weixin/node/node.wxss:4:26379)
WASubContext.js?t=wechat&s=1682587341583&v=2.30.3:1 [Component] property "content" of "components/mp-weixin/index" received type-uncompatible value: expected <String> but get null value. Use empty string instead.

复现方式

  1. 启动用插件 
    /**
* @fileoverview 配置文件
*/
module.exports = {
/**
* @description 需要的插件列表
*/
plugins: [
// 按需打开注释即可
// 'audio',     // 音乐播放器
// 'editable',  // 内容编辑
// 'emoji',     // 小表情
'highlight', // 代码高亮
'markdown',  // 解析 md
'latex',     // 解析 latex
//'search',    // 关键词搜索
// 'style',     // 解析 style 标签
//'txv-video', // 使用腾讯视频
// 'img-cache'  // 图片缓存
],
.....省略
}
  2. pnpm run build:weixin 
    
> gulp build --mp-weixin

[17:18:50] Using gulpfile ~\Desktop\code\mp-html\gulpfile.js [17:18:50] Starting 'build'... [17:18:50] Starting 'clean'... [17:18:50] Finished 'clean' after 82 ms [17:18:50] Starting 'packComp'... [17:18:53] mp-weixin 包生成完毕 all files 383 kB [17:18:53] Finished 'packComp' after 2.78 s [17:18:53] Finished 'build' after 2

3. 复制 mp-weixin 到 项目的 src/components/mp-weixin
4. 在项目的 src\pages\index\index.config.ts 配置组件
```ts
export default definePageConfig({
  navigationBarTitleText: '首页',
  usingComponents: {
    'mp-html': '../../components/mp-weixin/index',
  }
})
  1. 使用mp-html 在项目 src\pages\index\index.vue 
    
<template>
<view class="h-screen">
<!-- <wemark :md="markedDownContent" link highlight type="wemark" /> -->
<mp-html :content="markedDownContent" />
<h2>高度自定义，拉伸</h2>
<h2>{{ globalState.user }}</h2>
<view class="fixed w-screen shadow-inner" :style="{ bottom: '35px' }">
  <nut-row
    style="padding-top: 10px"
    gutter="10"
    type="flex"
    justify="center"
    align="center"
  >
    <nut-col :span="2">
      <IconFont style="margin-left: 5px" name="ask" size="24"></IconFont>
    </nut-col>
    <nut-col :span="17">
      <nut-textarea v-model="value" autosize />
    </nut-col>
    <nut-col :span="5">
      <nut-button type="info" @click="onSend">发送</nut-button>
    </nut-col>
  </nut-row>
</view>
</view>
</template>
LovesLolita commented 1 year ago

唉 希望直接支持taro,每次改太麻烦了

623034345 commented 1 year ago

唉 希望直接支持taro,每次改太麻烦了

hello 有这个问题的解决方案吗，能贴一下吗

jin-yufeng commented 1 year ago

@InfernalAzazel @623034345 知道原因了 https://github.com/NervJS/taro/issues/13146 需要把 content 属性名改一下或者调用组件实例上的 setContent 方法应该也可以

623034345 commented 1 year ago

@InfernalAzazel @623034345 知道原因了 NervJS/taro#13146 需要把 content 属性名改一下或者调用组件实例上的 setContent 方法应该也可以

非常感谢！