NervJS / taro

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.57k stars 4.79k forks source link

生成的base.wxml文件,在开启skyline的情况下报错 #16462

Open ShaoGongBra opened 2 months ago

ShaoGongBra commented 2 months ago

相关平台

微信小程序

小程序基础库: 3.5.6 使用框架: React

复现步骤

开启skyline,之后主要的问题有三个 1 block不支持id data-sid属性,需要删除 2 audio模板存在重复 id 属性 3 slot模板在seykline下的报错是 Error: child nodes are not allowed for this element

期望结果

正常编译

实际结果

报错

环境信息

Taro CLI 3.6.35 environment info:
    System:
      OS: macOS 14.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.20.3 - /var/folders/rf/gd60z12164z72bny7z_0d4f80000gn/T/yarn--1725449725979-0.31281094491222805/node
      Yarn: 1.22.22 - /var/folders/rf/gd60z12164z72bny7z_0d4f80000gn/T/yarn--1725449725979-0.31281094491222805/yarn
      npm: 10.7.0 - ~/.nvm/versions/node/v18.20.3/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.35 => 3.6.35 
      @tarojs/components: 3.6.35 => 3.6.35 
      @tarojs/helper: 3.6.35 => 3.6.35 
      @tarojs/plugin-framework-react: 3.6.35 => 3.6.35 
      @tarojs/plugin-platform-alipay: 3.6.35 => 3.6.35 
      @tarojs/plugin-platform-h5: 3.6.35 => 3.6.35 
      @tarojs/plugin-platform-jd: 3.6.35 => 3.6.35 
      @tarojs/plugin-platform-qq: 3.6.35 => 3.6.35 
      @tarojs/plugin-platform-swan: 3.6.35 => 3.6.35 
      @tarojs/plugin-platform-tt: 3.6.35 => 3.6.35 
      @tarojs/plugin-platform-weapp: 3.6.35 => 3.6.35 
      @tarojs/rn-runner: 3.6.35 => 3.6.35 
      @tarojs/runtime: 3.6.35 => 3.6.35 
      @tarojs/shared: 3.6.35 => 3.6.35 
      @tarojs/taro: 3.6.35 => 3.6.35 
      @tarojs/taro-rn: 3.6.35 => 3.6.35 
      @tarojs/webpack5-runner: 3.6.35 => 3.6.35 
      babel-preset-taro: 3.6.35 => 3.6.35 
      eslint-config-taro: 3.6.35 => 3.6.35 
      expo: ~48.0.19 => 48.0.21 
      react: ^18.2.0 => 18.3.1 
      react-native: ~0.71.11 => 0.71.19
ShaoGongBra commented 2 months ago

这是patch,可以参考下,不过我把NativeSlot注释掉会引起其他的问题,也没有去研究这里

diff --git a/node_modules/@tarojs/shared/dist/template.js b/node_modules/@tarojs/shared/dist/template.js
index d1eafbe..0a6fa28 100644
--- a/node_modules/@tarojs/shared/dist/template.js
+++ b/node_modules/@tarojs/shared/dist/template.js
@@ -194,7 +194,7 @@ const Navigator = {
     bindComplete: NO_DEFAULT_VALUE
 };
 const Audio = {
-    id: NO_DEFAULT_VALUE,
+    // id: NO_DEFAULT_VALUE,
     src: NO_DEFAULT_VALUE,
     loop: DEFAULT_FALSE,
     controls: DEFAULT_FALSE,
@@ -286,7 +286,7 @@ const internalComponents = {
     Map: MapComp,
     Slot,
     SlotView,
-    NativeSlot,
+    // NativeSlot,
     Script,
 };
 new Set([
@@ -1061,11 +1061,11 @@ ${this.buildXsTemplate()}
 </template>

 <template name="tmpl_${level}_${nodeAlias}_focus">
-  <${nodeName} ${this.buildAttribute(comp.attributes, nodeName)} id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">${children}</${nodeName}>
+  <${nodeName} ${this.buildAttribute(comp.attributes, nodeName)}${nodeName === "block" ? "" : ' id="{{i.uid||i.sid}}" data-sid=" {{i.sid}}"'}>${children}</${nodeName}>
 </template>

 <template name="tmpl_${level}_${nodeAlias}_blur">
-  <${nodeName} ${this.buildAttribute(attrs, nodeName)} id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">${children}</${nodeName}>
+  <${nodeName} ${this.buildAttribute(attrs, nodeName)}${nodeName === "block" ? "" : ' id="{{i.uid||i.sid}}" data-sid="{{i.sid}}"'}>${children}</${nodeName}>
 </template>
 `;
         if (isFunction(this.modifyTemplateResult)) {
@@ -1100,7 +1100,7 @@ ${this.buildXsTemplate()}
         }
         let res = `
 <template name="tmpl_${level}_${nodeAlias}">
-  <${nodeName} ${this.buildAttribute(comp.attributes, comp.nodeName)} id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">${children}</${nodeName}>
+  <${nodeName} ${this.buildAttribute(comp.attributes, comp.nodeName)}${nodeName === "block" ? "" : ' id="{{i.uid||i.sid}}" data-sid="{{i.sid}}"'}>${children}</${nodeName}>
 </template>
 `;
         if (isFunction(this.modifyTemplateResult)) {
@@ -1123,7 +1123,7 @@ ${this.buildXsTemplate()}
             if (compName === 'custom-wrapper') {
                 template += `
 <template name="tmpl_${level}_${compName}">
-  <${compName} i="{{i}}" l="{{l}}" id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">
+  <${compName} i="{{i}}" l="{{l}}"${compName === "block" ? "" : ' id="{{i.uid||i.sid}}" data-sid="{{i.sid}}"'}>
   </${compName}>
 </template>
   `;
@@ -1144,7 +1144,7 @@ ${this.buildXsTemplate()}
   `;
                 template += `
 <template name="tmpl_${level}_${compName}">
-  <${compName} ${this.buildThirdPartyAttr(attrs, this.thirdPartyPatcher[compName] || {})} id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">${children}</${compName}>
+  <${compName} ${this.buildThirdPartyAttr(attrs, this.thirdPartyPatcher[compName] || {})}${compName === "block" ? "" : ' id="{{i.uid||i.sid}}" data-sid="{{i.sid}}"'}>${children}</${compName}>
 </template>
   `;
             }
ShaoGongBra commented 2 months ago

slot 节点的子节点是无效的,没有含义。skyline 使用的 glass-easel 编译器会直接视为编译错误

这是官方回复

TheKonka commented 1 month ago

这 3个组件你是都用到了吗? 如果没用到应该不会报错吧?

ShaoGongBra commented 1 month ago

这 3个组件你是都用到了吗? 如果没用到应该不会报错吧?

audio这个我肯定没有用到呀

ShaoGongBra commented 1 month ago

slot的话,我不知道什么情况下算用到

TheKonka commented 1 month ago

我也用了 skyline,3个组件都没有用到,base.wxml 里面只有模板自带的 block 组件,并且都没看到你说的那3个问题

ShaoGongBra commented 1 month ago

我也用了 skyline,3个组件都没有用到,base.wxml 里面只有模板自带的 block 组件,并且都没看到你说的那3个问题

看看是不是没有开启 glass-easel,我是开了这个

这是官方的回复 https://developers.weixin.qq.com/community/develop/doc/0008a8e4d78898624212ffe0561000

TheKonka commented 1 month ago

image

你能给个复现这些问题的demo吗,我试了 audio 组件,模板确实id 重复了,但是这个组件已经弃用了,正常来说不用的话就没有影响。

block不支持id data-sid属性我这边没看到报错。

slot 正常也不会有,我知道的就是混合开发中 原生传子元素到 Taro 组件中可以会用到,https://docs.taro.zone/docs/taro-in-miniapp#%E4%BD%BF%E7%94%A8-slot

image 但是我直接用 NativeSlot 报错跟你的也不一样,不过删掉 slot 的 children 内容确实就不报错了

ShaoGongBra commented 1 month ago

image

你能给个复现这些问题的demo吗,我试了 audio 组件,模板确实id 重复了,但是这个组件已经弃用了,正常来说不用的话就没有影响。

block不支持id data-sid属性我这边没看到报错。

slot 正常也不会有,我知道的就是混合开发中 原生传子元素到 Taro 组件中可以会用到,https://docs.taro.zone/docs/taro-in-miniapp#%E4%BD%BF%E7%94%A8-slot

image ~但是我直接用 NativeSlot 报错跟你的也不一样~,不过删掉 slot 的 children 内容确实就不报错了

使用这个命令创建一个项目 npx duxapp-cli create testDuxui

1 选择duxui模板 2导航到 configs/duxuiExample/index.js 取消下面这段代码的注释

renderer: 'skyline',
    lazyCodeLoading: 'requiredComponents',
    componentFramework: 'glass-easel',
    rendererOptions: {
      skyline: {
        defaultDisplayBlock: false
      }
    },

3 使用命令 yarn dev:weapp --app=duxuiExample 启动编译,编译后打开就会看到了

这是我最近更新到Taro4的,也是同样的问题

ShaoGongBra commented 1 month ago

block不支持id data-sid属性我这边没看到报错。

这个就是大一堆 invalid attribute 报错,我删掉blick的这两个属性他就好了

TheKonka commented 1 month ago

image

我启动后webview报这个错误,把 base.wxml 中的 slot 注释掉才正常渲染

image

这是打开 skyline 的效果

image

目前看主要问题就是 slot 组件里面带了children 导致报错,你用了 taro-charts 这个库,这个库会把 taro-components 中所有组件都引入,也就包含了 audio 和 slot

ShaoGongBra commented 1 month ago

image

我启动后webview报这个错误,把 base.wxml 中的 slot 注释掉才正常渲染

image

这是打开 skyline 的效果

image

目前看主要问题就是 slot 组件里面带了children 导致报错,你用了 taro-charts 这个库,这个库会把 taro-components 中所有组件都引入,也就包含了 audio 和 slot

taro-charts这个有问题吗,我去研究下怎么改一下,block上添加属性报错这个你没遇到吗