Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ShaoGongBra opened this issue Sep 4, 2024 · 12 comments
Open

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

ShaoGongBra opened this issue Sep 4, 2024 · 12 comments
Labels
F-react Framework - React T-weapp Target - 编译到微信小程序 V-3 Version - 3.x

Comments

@ShaoGongBra
Copy link
Contributor

相关平台

微信小程序

小程序基础库: 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
Copy link
Contributor Author

这是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>
   `;
             }

@TheKonka TheKonka added V-3 Version - 3.x F-react Framework - React T-weapp Target - 编译到微信小程序 labels Sep 5, 2024
@ShaoGongBra
Copy link
Contributor Author

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

这是官方回复

This was referenced Sep 7, 2024
@TheKonka
Copy link
Member

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

@ShaoGongBra
Copy link
Contributor Author

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

audio这个我肯定没有用到呀

@ShaoGongBra
Copy link
Contributor Author

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

@TheKonka
Copy link
Member

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

@ShaoGongBra
Copy link
Contributor Author

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

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

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

@TheKonka
Copy link
Member

TheKonka commented Sep 14, 2024

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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

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

@TheKonka
Copy link
Member

image

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

image

这是打开 skyline 的效果

image

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

@ShaoGongBra
Copy link
Contributor Author

image

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

image

这是打开 skyline 的效果

image

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React T-weapp Target - 编译到微信小程序 V-3 Version - 3.x
Projects
Status: Todo
Development

No branches or pull requests

2 participants