通过yarn link使用本地源码包中的组件会导致应用中的Button、Text等渲染不出来

cpocar commented 4 years ago

复现仓库

源代码依赖码包：git@github.com:cpocar/taro-demo-pkg.git 项目仓库： git@github.com:cpocar/taro-demo-app.git 小程序基础库: 2.11.3 使用框架: React

复现步骤

1 git clone git@github.com:cpocar/taro-demo-pkg.git 拉下代码包 2 cd taro-demo-pkg && yarn && yarn build && yarn link 3 git clone git@github.com:cpocar/taro-demo-app.git 拉下项目代码 4 cd taro-demo-app && yarn && yarn link taro-demo-pkg && yarn dev:weapp 5 使用微信开发者工具将 taro-demo-app/dist 导入到项目中，发现 pages/index/index 中的Button无法渲染， base.xml 报错

期望结果

taro-demo-app可正常使用taro-demo-pkg 中的高阶组件

实际结果

taro-demo-app使用taro-demo-pkg 中的高阶组件（withAny）会导致taro-demo-app中的Button无法渲染

环境信息

👽 Taro v3.0.3

  Taro CLI 3.0.3 environment info:
    System:
      OS: macOS 10.15.5
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.5.0 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.5 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.0.3 => 3.0.3 
      @tarojs/mini-runner: 3.0.3 => 3.0.3 
      @tarojs/react: 3.0.3 => 3.0.3 
      @tarojs/runtime: 3.0.3 => 3.0.3 
      @tarojs/taro: 3.0.3 => 3.0.3 
      @tarojs/webpack-runner: 3.0.3 => 3.0.3 
      babel-preset-taro: 3.0.3 => 3.0.3 
      eslint-config-taro: 3.0.3 => 3.0.3 
      react: 16.13.1 => 16.13.1 
    npmGlobalPackages:
      typescript: 3.7.4

补充信息

1 代码包taro-demo-pkg 中高阶组件withAny中只要用View把WrappedComp包上，项目 taro-demo-app中的Button就会渲染不出来，不用View包裹，就没有问题 2 项目 taro-demo-app中直接使用项目中一模一样的高阶组件withAny，不用代码包taro-demo-pkg 中的高阶组件withAny，Button可以正常渲染

cpocar commented 4 years ago

Taro 3.0.4有相同的问题

cpocar commented 4 years ago

后来发现，不止高阶组件，普通的wrapper组件也会导致Text， Button等组件渲染失败。举个例子：

taro-demo-pkg 中导出组件WithView：

export default WithView = (props) => {
    return <View>{props.children}</View>
}

taro-demo-app 中使用组件WithView：

export default Index = () => {
   return (
      <WithView>
        <View>View</View>
        <Text>Text</Text>
        <Button>Button</Button>
      </WithView>
    )
}

会发现，View可以正产渲染出来， Text， Button则渲染失败。

cncolder commented 4 years ago

@cpocar 这个问题很早就存在了 https://github.com/NervJS/taro/issues/6007 具体原因是不能存在两个 @tarojs/xxx 包

实在要解决可以这样:

// app.js

import { Button, Text } from '@tarojs/components';

// 只要源码里出现过就会打包.
Button;
Text;

cpocar commented 4 years ago

@cpocar 这个问题很早就存在了 #6007 具体原因是不能存在两个 @tarojs/xxx 包

实在要解决可以这样:
// app.js

import { Button, Text } from '@tarojs/components';

// 只要源码里出现过就会打包.
Button;
Text;

感谢！基本看懂了你说的问题，我的项目按这种方式在3.0.2是没问题的，升级到3.0.3及后续版本之后就出了上述问题。并且很奇特的是View可以正常渲染，Text， Button则不行。

目前我的项目部分公共组件做成了库，并且3.X版本的Taro取消了build --ui [#6514], 按照 @yuche 的指导，直接用源码进行依赖。开发阶段是使用yarn link

基于以上：是否可以考虑出个相对正式的方案解决这类问题呢？非常感谢

cncolder commented 4 years ago

@cpocar 按照官方的解释, 即使你绕过 @tarojs 包的重复问题, 也会遇到 react 包重复问题. 也就是说这些框架类的包, 都会有一些内置的全局变量, 当出现两个包的时候, 这些全局变量也会出现两份, 导致失灵. 例如两个 react 包会导致 hooks 报警.

cpocar commented 4 years ago

感谢回复，是否我可以这样理解：3.x的Taro是不支持自己搞组件库（像2.x build --ui 一样）的，组件必须全放项目里面？

cpocar commented 4 years ago

@cncolder

cpocar commented 4 years ago

补充说明：

我尝试过config/index/js 中配置别名：'@tarojs/components': path.resolve('./node_modules/@tarojs/components') 来解决这个重复问题，但是发现会无法启动，报一堆：" '@tarojs/components' does not contain an export named 'View'.

附环境信息：

$ taro info
👽 Taro v3.0.5

  Taro CLI 3.0.5 environment info:
    System:
      OS: macOS 10.15.6
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.5.0 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.5 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.5 => 3.0.5 
      @tarojs/components: 3.0.5 => 3.0.5 
      @tarojs/mini-runner: 3.0.5 => 3.0.5 
      @tarojs/react: 3.0.5 => 3.0.5 
      @tarojs/runtime: 3.0.5 => 3.0.5 
      @tarojs/taro: 3.0.5 => 3.0.5 
      @tarojs/webpack-runner: 3.0.5 => 3.0.5 
      babel-preset-taro: 3.0.5 => 3.0.5 
      eslint-config-taro: 3.0.5 => 3.0.5 
      react: 16.13.1 => 16.13.1 
    npmGlobalPackages:
      typescript: 3.7.4

cncolder commented 4 years ago

@cpocar 倒不是说不能搞组件库, 只是不能出现这样的目录结构

node_modules
├── @tarojs
│   ├── components
├── my-ui
│   └── node_modules
│       └── @tarojs
│           └── components

cpocar commented 4 years ago

@cpocar 倒不是说不能搞组件库, 只是不能出现这样的目录结构
node_modules
├── @tarojs
│   ├── components
├── my-ui
│   └── node_modules
│       └── @tarojs
│           └── components

@cncolder 非常感谢你的回复：

1 关于搞UI组件库这块是否可以给我们提一些建议或者最佳实践? 2 使用rollup打包组件库的方式我也尝试过，使用起来有一些问题（我遇到 React is not define）,关于使用rollup等打包工具打包组件库的方式是否可以提供一些最佳实践，这也有利于基于Taro V3的物料市场的生态发展。望贵团队能够重视。

非常感谢！

cncolder commented 4 years ago

@cpocar 我不是官方人员, 我只是跟你描述我自己碰到的问题, 至于 rollup 如何打包, 可以参考一下 taro-ui alpha 版.

我自己做的 ui 库只是使用 tsc 编译一下, 没有打包.

link 问题确实给开发造成困难, 而且这个问题是从 beta4 开始出现的, 与官方人员讨论过无果.

cpocar commented 4 years ago

@yuche @luckyadam @Chen-jj @Pines-Cheng 官方人员是否可以讨论讨论

FredZeng commented 4 years ago

同问，3.x 之后如何搞 UI 库

Chen-jj commented 4 years ago

@FredZeng https://github.com/NervJS/taro-uilib-react

cpocar commented 4 years ago

@FredZeng https://github.com/NervJS/taro-uilib-react

棒棒哒！！

gjc9620 commented 3 years ago

@cpocar 这个问题很早就存在了 #6007 具体原因是不能存在两个 @tarojs/xxx 包

实在要解决可以这样:
// app.js

import { Button, Text } from '@tarojs/components';

// 只要源码里出现过就会打包.
Button;
Text;

你太棒了

NervJS / taro