taro2.0.0+taro-ui2.2.4编译之后，微信客户端预览提示 Cannot read property 'defaultProps' of undefined

liu-peiyu commented 4 years ago

问题描述

taro版本2.0.0 taro-ui版本2.2.4 编译可以正常通过，进到开发者工具预览会提示 Cannot read property 'defaultProps' of undefined

复现步骤

import Taro, { Component } from "@tarojs/taro"
import { View } from "@tarojs/components"

import { AtNavBar, AtIcon } from 'taro-ui'
@observer
class Index extends Component {
 return <View>
            <AtNavBar fixed color='#FFFFFF'  title='首页' >
            </AtNavBar>
</View>
}

{
  "name": "taro-app",
  "version": "1.0.0",
  "private": true,
  "description": "jiubenpao",
  "templateInfo": {
    "name": "mobx",
    "typescript": false,
    "css": "sass"
  },
  "scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch",
    "clean:weapp": "rm -rf dist/weapp",
    "clean:tt": "rm -rf dist/tt"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@tarojs/components": "2.0.0",
    "@tarojs/components-qa": "2.0.0",
    "@tarojs/mini-runner": "^2.0.0",
    "@tarojs/mobx": "2.0.0",
    "@tarojs/mobx-h5": "2.0.0",
    "@tarojs/router": "2.0.0",
    "@tarojs/taro": "2.0.0",
    "@tarojs/taro-alipay": "2.0.0",
    "@tarojs/taro-h5": "2.0.0",
    "@tarojs/taro-qq": "2.0.0",
    "@tarojs/taro-quickapp": "2.0.0",
    "@tarojs/taro-rn": "2.0.0",
    "@tarojs/taro-swan": "2.0.0",
    "@tarojs/taro-tt": "2.0.0",
    "@tarojs/taro-weapp": "2.0.0",
    "mobx": "4.8.0",
    "nerv-devtools": "^1.5.6",
    "nervjs": "^1.5.6",
    "sta": "^0.5.0",
    "stat": "^0.0.5",
    "taro-ui": "^2.2.4"
  },
  "devDependencies": {
    "@tarojs/plugin-babel": "2.0.0",
    "@tarojs/plugin-csso": "2.0.0",
    "@tarojs/plugin-sass": "2.0.0",
    "@tarojs/plugin-uglifyjs": "2.0.0",
    "@tarojs/webpack-runner": "2.0.0",
    "@types/react": "^16.4.6",
    "@types/webpack-env": "^1.13.6",
    "babel-eslint": "^8.2.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-jsx-stylesheet": "^0.6.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-runtime": "^6.26.0",
    "eslint": "^5.16.0",
    "eslint-config-taro": "2.0.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-react-hooks": "^1.6.1",
    "eslint-plugin-taro": "2.0.0",
    "prop-types": "^15.7.2",
    "stylelint": "9.3.0",
    "stylelint-config-taro-rn": "2.0.0",
    "stylelint-taro-rn": "2.0.0",
    "webpack-bundle-analyzer": "^3.6.0"
  }
}

期望行为

taro-ui的组件可以正常预览

报错信息

vendors.js:3401 Uncaught TypeError: Cannot read property 'defaultProps' of undefined at Object.createComponent (vendors.js:3401) at Object.node_modules_taroUi224TaroUiDistWeappComponentsNavBarIndexJs (index.js:212) at __webpack_require__ (runtime.js:80) at checkDeferredModules (runtime.js:46) at Array.webpackJsonpCallback [as push] (runtime.js:33) at index.js:1 at require (VM8202 WAService.js:1) at :44:7 at HTMLScriptElement.scriptLoaded (appservice?t=1578552796094:1379) at HTMLScriptElement.script.onload (appservice?t=1578552796094:1422)

系统信息

$ taro info �👽 Taro v2.0.0

Taro CLI 2.0.0 environment info: System: OS: Windows 10 Binaries: Node: 10.16.0 - D:\Deploy\node-10.16\node.EXE npm: 6.9.0 - D:\Deploy\node-10.16\npm.CMD

taro-bot[bot] commented 4 years ago

CC @Chen-jj

taro-bot[bot] commented 4 years ago

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

liu-peiyu commented 4 years ago

经过反复测试，复现过程如下：用taro2.0.0新建一个项目，增加taro-ui依赖，在index.jsx页面直接引入taro-ui组件，编译预览即可重现问题

npm install -g @tarojs/cli 2.0.0
taro init myApp
cd ./myApp
npm install -S taro-ui

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

import { AtNavBar } from 'taro-ui'

import './index.scss'

class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  render () {
    return (
      <View className='index'>
        <AtNavBar>首页</AtNavBar>
      </View>
    )
  }
}

export default Index

PlutoCA commented 4 years ago

+1

PlutoCA commented 4 years ago

都木有人来看下啥情况嘛

Garfield550 commented 4 years ago

周末啦，让老李他们休息一下吧

shenghanqin commented 4 years ago

@PlutoCA 你可以理解为issue周期为15天，况且赶上周末，回复会慢一些。

PlutoCA commented 4 years ago

😂我不是催哈，我只是想看看有木有碰到相同问题的小伙伴，他们有没有解决，是如何解决的😂

luckyadam commented 4 years ago

我创建了一个项目，添加了一个 Taro UI 组件，着实没有复现啊

taro-bot[bot] commented 4 years ago

CC @luckyadam

taro-bot[bot] commented 4 years ago

Hello~

您的问题我们无法复现。如果有空的话还请拔冗提供一个简单的复现 demo，否则这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

liu-peiyu commented 4 years ago

https://github.com/liu-peiyu/taro-issues-demo.git 问题复现demo，bug环境微信小程序和头条小程序

Garfield550 commented 4 years ago

@liu-peiyu 除了 MobX 模版外，默认模版有没有问题呢？

PlutoCA commented 4 years ago

@liu-peiyu 除了 MobX 模版外，默认模版有没有问题呢？

有，我前天晚上尝试用默认模板，也是直接报错

Garfield550 commented 4 years ago

我这边默认模版和 MobX 模版都没有复现

➜  GitHub npx @tarojs/cli init taro-ui-test-mobx
👽 Taro v2.0.0

Taro即将创建一个新项目!
Need help? Go and open issue: https://github.com/NervJS/taro/issues/new

✔ 拉取远程模板仓库成功！
? 请输入项目介绍！ taro-ui-test-mobx
? 是否需要使用 TypeScript ？ Yes
? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass
? 请选择模板 mobx

✔ 创建项目: taro-ui-test-mobx
✔ 创建文件: taro-ui-test-mobx/.editorconfig
✔ 创建文件: taro-ui-test-mobx/.eslintrc
✔ 创建文件: taro-ui-test-mobx/.gitignore
✔ 创建文件: taro-ui-test-mobx/global.d.ts
✔ 创建文件: taro-ui-test-mobx/package.json
✔ 创建文件: taro-ui-test-mobx/project.config.json
✔ 创建文件: taro-ui-test-mobx/tsconfig.json
✔ 创建文件: taro-ui-test-mobx/config/dev.js
✔ 创建文件: taro-ui-test-mobx/config/index.js
✔ 创建文件: taro-ui-test-mobx/config/prod.js
✔ 创建文件: taro-ui-test-mobx/src/app.scss
✔ 创建文件: taro-ui-test-mobx/src/app.tsx
✔ 创建文件: taro-ui-test-mobx/src/index.html
✔ 创建文件: taro-ui-test-mobx/src/store/counter.ts
✔ 创建文件: taro-ui-test-mobx/src/pages/index/index.scss
✔ 创建文件: taro-ui-test-mobx/src/pages/index/index.tsx

✔ cd taro-ui-test-mobx, 执行 git init

~/Projects/GitHub/taro-ui-test-mobx [master +9 ~0 -0 !]> yarn add -D @tarojs/cli@2.0.0 taro-ui

Garfield550 commented 4 years ago

@liu-peiyu 你的 Demo 也没有复现。

PlutoCA commented 4 years ago

@Garfield550 要不试一下npm 安装看下，我这边默认模板必现😂

  Taro CLI 2.0.0 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.13.1 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.8.0 - C:\Program Files\nodejs\npm.CMD

liu-peiyu commented 4 years ago

@Garfield550 我本地只要一运行，肯定会出现，奇怪了，微信群里隔壁老李是你吗？

PlutoCA commented 4 years ago

或者试试window环境？

Garfield550 commented 4 years ago

@liu-peiyu @PlutoCA 两位都是 Windows 环境吗？

@liu-peiyu 老李是 @luckyadam 哈。

liu-peiyu commented 4 years ago

是的，我是windows

Garfield550 commented 4 years ago

我试一下 macOS 用 NPM 运行你的 Demo，如果没有复现应该跟 Windows 有关。

PlutoCA commented 4 years ago

@liu-peiyu @PlutoCA 两位都是 Windows 环境吗？

@liu-peiyu 老李是 @luckyadam 哈。

我家里和公司都有这个问题，都是win10，我看@liu-peiyu 老哥也是

Garfield550 commented 4 years ago

macOS 下用 NPM 没有复现，可能与 Windows 有关。@luckyadam 老李正在测试 Windows 下的情况，有什么进展会在这里回复你们的哈。

PlutoCA commented 4 years ago

我这边试着用win的 linux子系统跑了一遍好像还是有这个问题 npm 安装依赖（我这边yarn有点问题，不好测试）

Taro CLI 2.0.0 environment info:
    System:
      OS: Linux 4.4 Ubuntu 18.04.2 LTS (Bionic Beaver)
      Shell: 4.4.19 - /bin/bash
    Binaries:
      Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
      Yarn: 1.19.1 - /mnt/c/Program Files (x86)/Yarn/bin/yarn
      npm: 6.13.6 - ~/.nvm/versions/node/v12.13.1/bin/npm
    npmPackages:
      @tarojs/components-qa: 2.0.0 => 2.0.0 
      @tarojs/router: 2.0.0 => 2.0.0 
      @tarojs/taro: 2.0.0 => 2.0.0 
      @tarojs/taro-alipay: 2.0.0 => 2.0.0 
      @tarojs/taro-h5: 2.0.0 => 2.0.0 
      @tarojs/taro-qq: 2.0.0 => 2.0.0 
      @tarojs/taro-quickapp: 2.0.0 => 2.0.0 
      @tarojs/taro-rn: 2.0.0 => 2.0.0 
      @tarojs/taro-swan: 2.0.0 => 2.0.0 
      @tarojs/taro-tt: 2.0.0 => 2.0.0 
      @tarojs/taro-weapp: 2.0.0 => 2.0.0 
      eslint-plugin-taro: 2.0.0 => 2.0.0 
      nerv-devtools: ^1.5.5 => 1.5.6 
      nervjs: ^1.5.5 => 1.5.6 
      stylelint-config-taro-rn: 2.0.0 => 2.0.0 
      stylelint-taro-rn: 2.0.0 => 2.0.0

import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtButton } from "taro-ui"
import './index.scss'

export default class Index extends Component {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <AtButton>测试</AtButton>
      </View>
    )
  }
}

PlutoCA commented 4 years ago

macOS 下用 NPM 没有复现，可能与 Windows 有关。@luckyadam 老李正在测试 Windows 下的情况，有什么进展会在这里回复你们的哈。

ok

yunsii commented 4 years ago

windows ，同样的情况 _(:3J∠)_

1uckyneo commented 4 years ago

计算机系统：macOS Cataline 10.15.2版本同样的情况

Taro 版本：taro2.0.0-beta.13

Garfield550 commented 4 years ago

@Norbert-Nayman Taro2.0.0-beta.13 已经不受支持了，升级到 2.0.0 吧

luckyadam commented 4 years ago

大家好，是 @tarojs/mini-runner 依赖的 resolve 包版本问题，升级到最新的 resolve 版本可以解决，可以手动进入项目 node_modules/@tarojs/mini-runner 目录下直接安装，或者等 taro 升级 https://github.com/NervJS/taro/commit/94804969688ab448f72f485e8783055acb0304ec

1uckyneo commented 4 years ago

@Norbert-Nayman Taro2.0.0-beta.13 已经不受支持了，升级到 2.0.0 吧

还是出现了这个问题另外我把相关taro-ui 代码注释以后其他的 taro 插件的 npm 也出现了这个defaultProps

加班辛苦了希望明天能看一下

liu-peiyu commented 4 years ago

@luckyadam @Garfield550 问题已经解决，给力

Garfield550 commented 4 years ago

2.0.1 发布了，试一下？

yunsii commented 4 years ago

ok 了，但是 async-await 不行了 _(:3J∠)_

Garfield550 commented 4 years ago

@theprimone 提一个新 Issue 吧，描述一下问题并带上复现。

yunsii commented 4 years ago

https://github.com/NervJS/taro/issues/4837#issuecomment-574099197

这儿已经在激情讨论了:joy:

shenghanqin commented 4 years ago

ok 了，但是 async-await 不行了 (:3J∠)

这个有什么表现吗？

yunsii commented 4 years ago

是一个问题，装一下 regenerator-runtime@0.11.1 就解决了，升级文档改一下，避免还有人踩坑就行了

Garfield550 commented 4 years ago

@theprimone 更高版本的会出错吗？还是会遇到其他什么问题？

yunsii commented 4 years ago

直接用 2.0 初始化项目是没有问题了，如果从 1.3 升级的话就有问题了，如下，如果不安装 0.11.1 的话，就只有 0.13.3 了

@shenghanqin 说的可能是 postcss-loader 导致的

Garfield550 commented 4 years ago

@theprimone 你在从 1.x 升级 2.0.0 的时候有没有删除 @tarojs/async-await?

$ yarn remove @tarojs/async-await

yunsii commented 4 years ago

删除 node_modules
从 package.json 中移除 @tarojs/async-await
npm cache clear --force
安装依赖

还是不行的 :joy:

huanz commented 4 years ago

最新的 Taro 2.0.3 也不行啊

NervJS / taro