Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
liu-peiyu opened this issue Jan 9, 2020 · 43 comments
Assignees

Comments

@liu-peiyu
Copy link

liu-peiyu commented Jan 9, 2020

问题描述

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
Copy link

taro-bot bot commented Jan 9, 2020

CC @Chen-jj

@taro-bot
Copy link

taro-bot bot commented Jan 9, 2020

欢迎提交 Issue~

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

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

Good luck and happy coding~

@liu-peiyu
Copy link
Author

经过反复测试,复现过程如下:用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
Copy link

PlutoCA commented Jan 11, 2020

+1

@PlutoCA
Copy link

PlutoCA commented Jan 12, 2020

都木有人来看下啥情况嘛

@Garfield550
Copy link
Collaborator

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

@shenghanqin
Copy link
Collaborator

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

@PlutoCA
Copy link

PlutoCA commented Jan 13, 2020

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

@luckyadam
Copy link
Member

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

@taro-bot
Copy link

taro-bot bot commented Jan 13, 2020

CC @luckyadam

@taro-bot
Copy link

taro-bot bot commented Jan 13, 2020

Hello~

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

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

Good luck and happy coding~

@liu-peiyu
Copy link
Author

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

@Garfield550
Copy link
Collaborator

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

@PlutoCA
Copy link

PlutoCA commented Jan 13, 2020

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

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

@Garfield550
Copy link
Collaborator

image
image

我这边默认模版和 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/[email protected] taro-ui

@Garfield550
Copy link
Collaborator

image

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

@PlutoCA
Copy link

PlutoCA commented Jan 13, 2020

image
image

@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
Copy link
Author

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

@PlutoCA
Copy link

PlutoCA commented Jan 13, 2020

或者试试window环境?

@Garfield550
Copy link
Collaborator

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

@liu-peiyu 老李是 @luckyadam 哈。

@liu-peiyu
Copy link
Author

是的,我是windows

@Garfield550
Copy link
Collaborator

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

@PlutoCA
Copy link

PlutoCA commented Jan 13, 2020

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

@liu-peiyu 老李是 @luckyadam 哈。

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

@Garfield550
Copy link
Collaborator

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

@PlutoCA
Copy link

PlutoCA commented Jan 13, 2020

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

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
Copy link

PlutoCA commented Jan 13, 2020

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

ok
img

@yunsii
Copy link

yunsii commented Jan 13, 2020

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

@1uckyneo
Copy link

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

Taro 版本:taro2.0.0-beta.13

@Garfield550
Copy link
Collaborator

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

@luckyadam
Copy link
Member

大家好,是 @tarojs/mini-runner 依赖的 resolve 包版本问题,升级到最新的 resolve 版本可以解决,可以手动进入项目 node_modules/@tarojs/mini-runner 目录下直接安装,或者等 taro 升级
9480496

@1uckyneo
Copy link

1uckyneo commented Jan 13, 2020

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

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

截屏2020-01-13下午10 28 05

截屏2020-01-13下午10 29 25

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

@liu-peiyu
Copy link
Author

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

@Garfield550
Copy link
Collaborator

2.0.1 发布了,试一下?

@yunsii
Copy link

yunsii commented Jan 15, 2020

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

@Garfield550
Copy link
Collaborator

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

@yunsii
Copy link

yunsii commented Jan 15, 2020

#4837 (comment)

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

@shenghanqin
Copy link
Collaborator

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

这个有什么表现吗?

@yunsii
Copy link

yunsii commented Jan 16, 2020

是一个问题,装一下 [email protected] 就解决了,升级文档改一下,避免还有人踩坑就行了

@Garfield550
Copy link
Collaborator

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

@yunsii
Copy link

yunsii commented Jan 16, 2020

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

image

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

@Garfield550
Copy link
Collaborator

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

$ yarn remove @tarojs/async-await

@yunsii
Copy link

yunsii commented Jan 16, 2020

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

还是不行的 😂

@taro-bot taro-bot bot removed the to be closed label Jan 28, 2020
@taro-bot taro-bot bot closed this as completed Jan 28, 2020
@huanz
Copy link
Contributor

huanz commented Feb 17, 2020

最新的 Taro 2.0.3 也不行啊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants