引入组件无法渲染出视图

[vfiee]

相关平台

微信小程序

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

复现步骤

地址:https://github.com/VFiee/mini-ui
1.clone项目
2.切换到dev分支
3.执行yarn example
4.微信小程序开发工具打开example/dist/weapp

期望结果

正常渲染组件

实际结果

无法正常渲染组件

环境信息

Taro CLI 3.0.14 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.13.0 - ~/.nvm/versions/node/v14.13.0/bin/node
      Yarn: 1.22.4 - ~/.yarn/bin/yarn
      npm: 6.14.8 - ~/.nvm/versions/node/v14.13.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.14 => 3.0.14 
      @tarojs/components: 3.0.14 => 3.0.14 
      @tarojs/mini-runner: 3.0.14 => 3.0.14 
      @tarojs/react: 3.0.14 => 3.0.14 
      @tarojs/runtime: 3.0.14 => 3.0.14 
      @tarojs/taro: 3.0.14 => 3.0.14 
      @tarojs/webpack-runner: 3.0.14 => 3.0.14 
      babel-preset-taro: 3.0.14 => 3.0.14 
      eslint-config-taro: 3.0.14 => 3.0.14 
      react: ^16.10.0 => 16.14.0

[vfiee]

更新: 2020-11-04
之前控制台没有开启warn level的log,并没有发现[WXML Runtime warning]
截图如下:

[Chen-jj]

@vfiee 是不是漏了 import { Button } from "@tarojs/components";，demo 里哪个页面有问题?

[vfiee]

@vfiee 是不是漏了 import { Button } from "@tarojs/components";，demo 里哪个页面有问题?

前三个页面都有问题

[vfiee]

@vfiee 是不是漏了 import { Button } from "@tarojs/components";，demo 里哪个页面有问题?

Button是在另外一个组件里引用的,你说的这个页面是第二个/pages/authorize/index

[Chen-jj]

@vfiee 直接 yarn add @vyron/mini-ui 安装 @vyron/mini-ui，没有发现问题：

目测你是使用了 npm link 之类，taro-components 这个包不能 link 过来使用（3.1 可以）。

因为我们会在 taro 这个 chunk 中分析引用到的组件，link 后 taro-components 就去到 common 这个 chunk 了，所以没有命中分析逻辑。

taro/packages/taro-mini-runner/src/plugins/TaroLoadChunksPlugin.ts

Lines 60 to 73 in 3dc07ac

	commonChunks = chunks.filter(chunk => this.commonChunks.includes(chunk.name)).reverse()
	for (const chunk of commonChunks) {
	Array.from((chunk.modulesIterable as Set<NormalModule>)).some(m => {
	if (m.rawRequest === taroJsComponents) {
	const includes = componentConfig.includes
	if (Array.isArray(m.usedExports)) {
	m.usedExports.map(toDashed).map(includes.add.bind(includes))
	} else {
	componentConfig.includeAll = true
	}
	return true
	}
	})
	}

debug 一下上述 webpack 插件的代码，看看有没有成功分析出使用到的组件，问题应该出在这里。