dangerouslySetInnerHTML 渲染视频报错

[wangxiaocuo]

相关平台

微信小程序

复现仓库

https://github.com/wangxiaocuo/bugs-colllection/tree/main/taro3-dangerouslySetInnerHTML
小程序基础库: 2.17.0
使用框架: React

复现步骤

dangerouslySetInnerHTML 属性中放入 video 标签会报错，渲染不出。

<View
  dangerouslySetInnerHTML={{
    __html: `<video src="https://photo.wm-motor.com/recommend_drive_img/prod/1619600124882_%E9%80%A0%E8%BD%A6%E8%89%BA%E6%9C%AF.mp4" controls="controls" style="width: 100%;"></video>`,
  }}
></View>

关键是同样的版本同样的小程序，昨天还能正常渲染，今天打包就渲染不了了，我很迷。。。

报错信息：

WXMLRT_$gwx:./base.wxml:template:205:16: Template `tmpl_0_video` not found.


[WXML Runtime warning] ./base.wxml
 Template `tmpl_0_video` not found.
  203 | 
  204 | <template name="tmpl_2_container">
> 205 |   <template is="{{xs.a(2, i.nn, l)}}" data="{{i:i,cid:2,l:xs.f(l,i.nn)}}" />
      |                ^
  206 | </template>
  207 | 
  208 | <template name="tmpl_3_catch-view">

期望结果

正常渲染视频

实际结果

报错

环境信息

Taro v3.2.10


  Taro CLI 3.2.10 environment info:
    System:
      OS: macOS 11.3.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.17.0 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.13 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.2.10 => 3.2.10
      @tarojs/mini-runner: 3.2.10 => 3.2.10
      @tarojs/react: 3.2.10 => 3.2.10
      @tarojs/runtime: 3.2.10 => 3.2.10
      @tarojs/taro: 3.2.10 => 3.2.10
      @tarojs/webpack-runner: 3.2.10 => 3.2.10
      babel-preset-taro: 3.2.10 => 3.2.10
      eslint-config-taro: 3.2.10 => 3.2.10
      react: ^17.0.0 => 17.0.2
    npmGlobalPackages:
      typescript: 4.2.4

---

补充信息

不光以上测试的最新的版本，实际项目的版本也报错

👽 Taro v3.0.29


  Taro CLI 3.0.29 environment info:
    System:
      OS: macOS 11.3.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.17.0 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.13 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.29 => 3.0.29 
      @tarojs/components: 3.0.29 => 3.0.29 
      @tarojs/mini-runner: 3.0.29 => 3.0.29 
      @tarojs/react: 3.0.29 => 3.0.29 
      @tarojs/runtime: 3.0.29 => 3.0.29 
      @tarojs/taro: 3.0.29 => 3.0.29 
      @tarojs/webpack-runner: 3.0.29 => 3.0.29 
      babel-preset-taro: 3.0.29 => 3.0.29 
      eslint-config-taro: 3.0.29 => 3.0.29 
      react: ^16.10.0 => 16.14.0 
      taro-ui: ^3.0.0-alpha.10 => 3.0.0-alpha.10 
    npmGlobalPackages:
      typescript: 4.2.4

[sanmmm]

貌似找到了原因。就是如果video组件没有被显式引入的话，taro打包weapp的时候不会把相应的模板代码打包进来。所以应该在外层把 @tarojs/components 里面的video组件引进来。

[wangxiaocuo]

貌似找到了原因。就是如果video组件没有被显式引入的话，taro打包weapp的时候不会把相应的模板代码打包进来。所以应该在外层把 @tarojs/components 里面的video组件引进来。

我试了，好像不行

[wangxiaocuo]

貌似找到了原因。就是如果video组件没有被显式引入的话，taro打包weapp的时候不会把相应的模板代码打包进来。所以应该在外层把 @tarojs/components 里面的video组件引进来。

我又去琢磨尝试了，你说的方法可行的，需要手动引入一个 Video，但是节点必须得渲染出来

render() {
  return (
    <>
      <View dangerouslySetInnerHTML={{ __html: '<video></video>' }} />

      {/* 这样可以 */}
      <Video style='width: 0; height: 0; opacity: 0;' />

      {/* 这样不行 */}
      {
        false && <Video />
      }
    </>
  )
}