Taro 组件编译为原生自定义组件, 添加了externals配置后组件渲染异常

yiytaume  于 2个月前  发布在  其他
关注(0)|答案(1)|浏览(28)

相关平台

H5

复现仓库

https://github.com/lyqwsqk/taro-test.git
浏览器版本: Chrome
使用框架: Vue 3

复现步骤

几个项目从taro/examples/blended-taro-component-vue3 拷贝的。
taro-project和taro-project-no-externals两个项目的区别是,taro-project中的picker组件中的pinia是从h5项目下引入的, 然后在config/index.js目录下添加了externals的配置。而taro-project-no-externals的picker组件引用的是自己目录下的pinia

1.运行taro-project项目下的build:h5
2.运行h5项目下的dev:h5, 可以发现, 从taro-project引入的picker组件里的button并没有渲染成按钮
3.运行taro-project-no-externals项目下的build:h5
4.再运行h5项目下的dev:h5, 可以发现按钮正常渲染了

taro-project 的picker组件

taro-project 的 config/index.js文件

taro-project-no-externals 的picker组件

H5运行taro-project 的picker组件效果

H5运行taro-project-no-externals的picker组件效果

期望结果

1.自定义组件中的状态可以和引用项目的状态共享
2.使用externals配置,自定义组件可以正常渲染

实际结果

使用externals配置后,自定义组件中的按钮渲染异常

环境信息

👽 Taro v3.6.24

  Taro CLI 3.6.24 environment info:
    System:
      OS: macOS 13.0.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
      Yarn: 1.22.19 - /opt/homebrew/bin/yarn
      npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.19 => 3.6.19 
      @tarojs/components: 3.6.19 => 3.6.19 
      @tarojs/extend: ^3.6.22 => 3.6.24 
      @tarojs/helper: 3.6.19 => 3.6.19 
      @tarojs/plugin-framework-vue3: 3.6.19 => 3.6.19 
      @tarojs/plugin-html: 3.6.0 => 3.6.0 
      @tarojs/plugin-platform-alipay: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-h5: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-jd: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-qq: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-swan: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-tt: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-weapp: 3.6.19 => 3.6.19 
      @tarojs/runtime: 3.6.19 => 3.6.19 
      @tarojs/shared: 3.6.19 => 3.6.19 
      @tarojs/taro: 3.6.19 => 3.6.19 
      @tarojs/taro-loader: 3.6.19 => 3.6.19 
      @tarojs/webpack5-runner: 3.6.19 => 3.6.19 
      babel-preset-taro: 3.6.19 => 3.6.19 
      eslint-config-taro: 3.6.19 => 3.6.19
vuktfyat

vuktfyat1#

另外官方demo里的examples/blended-taro-component-vue3,taro-project编译后到h5-html打开的按钮也是样式不对,也无法点击

相关问题