NervJS / taro

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

usingComponents 引用无效 #9038

Closed xuxiaoxiao312 closed 3 years ago

xuxiaoxiao312 commented 3 years ago

相关平台

微信小程序

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

复现步骤

taro 3.2.0引入自定义组件后重新编译下自定义节点就无效了。直接拷贝的taro-sample-weapp的index页面,拷贝过来后自动编译后是有正确的节点。npm run dev:weapp 重新编译后节点内容消失。

此处是自动编译后的页面节点情况: image

此处是重新编译后的页面节点情况 image

期望结果

正确引入自定义组件

实际结果

无法正确引入自定义组件

环境信息

👽 Taro v3.2.0

  Taro CLI 3.2.0 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.13.0 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.12.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.2.0 => 3.2.0 
      @tarojs/components: 3.2.0 => 3.2.0 
      @tarojs/mini-runner: 3.2.0 => 3.2.0 
      @tarojs/react: 3.2.0 => 3.2.0 
      @tarojs/runtime: 3.2.0 => 3.2.0 
      @tarojs/taro: 3.2.0 => 3.2.0 
      @tarojs/webpack-runner: 3.2.0 => 3.2.0 
      babel-preset-taro: 3.2.0 => 3.2.0 
      eslint-config-taro: 3.2.0 => 3.2.0 
      eslint-plugin-taro: 3.2.0 => 3.2.0 
      react: ^17.0.2 => 17.0.2 
      taro-ui: ^3.0.0-alpha.7 => 3.0.0-alpha.10 
    npmGlobalPackages:
      typescript: 4.1.2
Chen-jj commented 3 years ago

@xuxiaoxiao312 复现的操作步骤再描述得清晰一些

xuxiaoxiao312 commented 3 years ago

在npm run dev:weapp 正在运行时的情况下,新增一个indexC页面:

// indexC.jsx

import Taro from '@tarojs/taro'
import React from 'react'
import { View, Text, Button } from '@tarojs/components'

export default class Index extends React.Component {
  gotoWxParse() {
    Taro.navigateTo({
      url: '/pages/wxParse/wxParse'
    })
  }

  gotoEcharts() {
    Taro.navigateTo({
      url: '/pages/echarts/echarts'
    })
  }

  gotoNative() {
    Taro.navigateTo({
      url: '/pages/native/native'
    })
  }

  tabEvent(e) {
    console.log(e)
  }

  render() {
    return (
      <View className='index'>
        <tab onMyevent={this.tabEvent} myProperty='This is tab' />
        <View className='title'>与小程序原生融合的各种示例</View>
        <View className='main'>
          <View className='wrapper'>
            <Button type='primary' onClick={this.gotoWxParse}>
              wxParse 示例
            </Button>
          </View>
          <View className='wrapper'>
            <Button type='primary' onClick={this.gotoEcharts}>
              echarts-for-weixin 示例
            </Button>
          </View>
          <View className='wrapper'>
            <Button type='primary' onClick={this.gotoNative}>
              混写原生页面示例
            </Button>
          </View>
        </View>
      </View>
    )
  }
}
// indexC.config.js

export default {
  navigationBarTitleText: '首页',
  usingComponents: {
    tab: '../../components/tab/tab'
  }
}

添加到app.config.js

export default {
  pages: ['pages/index/index', 'pages/index/publicNumber', 'pages/index/indexC'],
  ...

此时添加的页面自动编译到dist/,在模拟器上可以看到引入的自定义组件,以及具体的节点信息。 image 此时ctrl+c退出自动编译的状态,再执行npm run dev:weapp 重新编译整个项目,tab组件就没有了 image

之前正常的组件,在重新编译之后目前都不可以用了。之前使用的是3.0.18,试验过全面升级到3.2.0还是不行。

xuxiaoxiao312 commented 3 years ago

@xuxiaoxiao312 复现的操作步骤再描述得清晰一些

麻烦看一下🙇‍♀️

Chen-jj commented 3 years ago

@xuxiaoxiao312 试了 taro-sample-weapp 这个包,Taro 3.2.0,没有复现。重启一下开发者工具试试吧,同样的代码每次编译的结果应该都是一样的。

如果还有问题,提供一下完整可复现的 demo 吧。

tianxing0923 commented 3 years ago

我碰到的问题是在 pages/index/index.config.ts配置的usingComponents无效,在其他页面配置usingComponents是正常的,我把文件夹名称改成home如pages/home/index.config.ts后就正常了,不知道啥原因,难道pages/index比较特殊?

Chen-jj commented 3 years ago

我碰到的问题是在 pages/index/index.config.ts配置的usingComponents无效,在其他页面配置usingComponents是正常的,我把文件夹名称改成home如pages/home/index.config.ts后就正常了,不知道啥原因,难道pages/index比较特殊?

@tianxing0923 这种情况没遇到过,升级到最新版本再试试,如果还有问题可以新开一个 issue,附上完整可复现的 demo。