Taro: [taro-2.0.1]使用异步变成async/await关键字报错

Created on 17 Jan 2020  ·  29Comments  ·  Source: NervJS/taro

问题描述

taro是最新的2.0.1，根据文档直接生成的，也是对比config/index.js里的plugin与文档一致
同样没有开启小程序开发工具的ES6转ES5等配置

/**
 * 这段注释后可以贴代码
 * 提供完整可复现的代码和整理好代码格式，有助于我们快速定位问题，节省你我时间
 * 代码提供不全或代码格式混乱的 issues 【有可能会被忽略】
 * 
 * 查看如何插入代码：https://coding.net/help/doc/project/markdown.html#i-5
 */
===============config.js==================
const config = {
  projectName: 'testApp',
  date: '2020-1-17',
  designWidth: 750,
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  babel: {
    sourceMap: true,
    presets: [
      ['env', {
        modules: false
      }]
    ],
    plugins: [
      'transform-decorators-legacy',
      'transform-class-properties',
      'transform-object-rest-spread',
      ['transform-runtime', {
        'helpers': false,
        'polyfill': false,
        'regenerator': true,
        'moduleName': 'babel-runtime'
      }
      ]
    ]
  },
  defineConstants: {
  },
  mini: {
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
          browsers: [
            'last 3 versions',
            'Android >= 4.1',
            'ios >= 8'
          ]
        }
      },
      pxtransform: {
        enable: true,
        config: {

        }
      },
      url: {
        enable: true,
        config: {
          limit: 10240 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
          browsers: [
            'last 3 versions',
            'Android >= 4.1',
            'ios >= 8'
          ]
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}
===========package.json=============
{
  "name": "testApp",
  "version": "1.0.0",
  "private": true,
  "description": "test",
  "templateInfo": {
    "name": "redux",
    "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"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@tarojs/components": "2.0.1",
    "@tarojs/components-qa": "2.0.1",
    "@tarojs/redux": "2.0.1",
    "@tarojs/redux-h5": "2.0.1",
    "@tarojs/router": "2.0.1",
    "@tarojs/taro": "2.0.1",
    "@tarojs/taro-alipay": "2.0.1",
    "@tarojs/taro-h5": "2.0.1",
    "@tarojs/taro-qq": "2.0.1",
    "@tarojs/taro-quickapp": "2.0.1",
    "@tarojs/taro-swan": "2.0.1",
    "@tarojs/taro-tt": "2.0.1",
    "@tarojs/taro-weapp": "2.0.1",
    "babel-runtime": "^6.26.0",
    "nervjs": "^1.5.5",
    "nerv-devtools": "^1.5.5",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@types/react": "^16.4.8",
    "@types/webpack-env": "^1.13.6",
    "@tarojs/mini-runner": "2.0.1",
    "@tarojs/webpack-runner": "2.0.1",
    "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-eslint": "^8.2.3",
    "eslint": "^5.16.0",
    "eslint-config-taro": "2.0.1",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-react-hooks": "^1.6.1",
    "eslint-plugin-import": "^2.12.0",
    "stylelint": "9.3.0",
    "stylelint-config-taro-rn": "2.0.1",
    "stylelint-taro-rn": "2.0.1",
    "eslint-plugin-taro": "2.0.1"
  }
}

========src/pages/index/index.jsx============
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { connect } from '@tarojs/redux'

import { add, minus, asyncAdd } from '../../actions/counter'

import './index.scss'


@connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  add () {
    dispatch(add())
  },
  dec () {
    dispatch(minus())
  },
  asyncAdd () {
    dispatch(asyncAdd())
  }
}))
class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount () {
    this._test()
  }

  componentDidShow () { }

  componentDidHide () { }

  _test = async () => {
    const res = await Taro.showModal({ title: 'test' })
    console.log(res);
  }

  render () {
    return (
      <View className='index'>
        <Button className='add_btn' onClick={this.props.add}>+</Button>
        <Button className='dec_btn' onClick={this.props.dec}>-</Button>
        <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
        <View><Text>{this.props.counter.num}</Text></View>
        <View><Text>Hello, World</Text></View>
      </View>
    )
  }
}

export default Index

期望行为

报错信息


微信图片_20200117164958

系统信息


👽 Taro v2.0.1

Taro CLI 2.0.1 environment info:
System:
OS: Windows 10
Binaries:
Node: 10.15.1 - C:\Program Files\nodejs\node.EXE
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

question
Source
picture Cicada7year

Most helpful comment

@shenghanqin npm i -S [email protected] 装了这个包就可以了！！

请有问题的朋友，安装下这个依赖包，并且必须是 0.11.1 版本

picture luckyadam on 19 Jan 2020
👍3

All 29 comments

CC @Chen-jj

taro-bot[bot] picture taro-bot[bot] on 17 Jan 2020

欢迎提交 Issue~

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

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

Good luck and happy coding~

taro-bot[bot] picture taro-bot[bot] on 17 Jan 2020

你的app.js里面删掉了@tarojs/async-await了吧？

shenghanqin picture shenghanqin on 17 Jan 2020

你的app.js里面删掉了@tarojs/async-await了吧？

import ‘@tarojs/async-await’吗？压根就没装这个包呀，2.0不是不用装这个了吗

Cicada7year picture Cicada7year on 17 Jan 2020

为啥会在componentWillUnmount执行这个方法呢？默认模板这么写的？
页面都卸载了，toast的回调可能就迟了吧？
componentWillUnmount () {
this._test()
}

shenghanqin picture shenghanqin on 17 Jan 2020

为啥会在componentWillUnmount执行这个方法呢？默认模板这么写的？
页面都卸载了，toast的回调可能就迟了吧？
componentWillUnmount () {
this._test()
}

无论在哪执行都是一样的，只要用了async/await就是报这个错误呢

Cicada7year picture Cicada7year on 17 Jan 2020

@shenghanqin 有办法搞吗大佬？在线等，挺急的

Cicada7year picture Cicada7year on 17 Jan 2020

@Cicada7year 我去掉了一点代码，是跑通的。我也仔细对比了package.json和config/index.js，跟我的差不多。

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

// import { add, minus, asyncAdd } from '../../actions/counter'

// import './index.scss'


@connect(({ counter }) => ({
  counter
}))

class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount() {
    this._test()
  }

  componentDidShow() { }

  componentDidHide() { }

  _test = async () => {
    const res = await Taro.showModal({ title: 'test' })
    console.log(res);
  }

  render() {
    return (
      <View className='index'>
        <Button className='add_btn' onClick={this.props.add}>+</Button>
        <Button className='dec_btn' onClick={this.props.dec}>-</Button>
        <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
        <View><Text>{this.props.counter.num}</Text></View>
        <View><Text>Hello, World</Text></View>
      </View>
    )
  }
}

export default Index

要是还不行的话，你就得问 @luckyadam 啦

shenghanqin picture shenghanqin on 17 Jan 2020

@shenghanqin 试试了你的也不行。。 我这个是刚升的最新的taro cli 刚init的项目，直接用的async/await就报错

@luckyadam

Cicada7year picture Cicada7year on 17 Jan 2020

我的装了@tarojs/async-await，在app.tsx中引入了它，然后我在index.weapp.tsx文件里写async await
，会报这样的错误
VM2555:1 thirdScriptError
regeneratorRuntime is not defined
ReferenceError: regeneratorRuntime is not defined
at http://127.0.0.1:56249/appservice/app.js:82:50
at http://127.0.0.1:56249/appservice/app.js:112:6
at Object../src/app.tsx (http://127.0.0.1:56249/appservice/app.js:138:2)
at __webpack_require__ (http://127.0.0.1:56249/appservice/runtime.js:80:30)
at checkDeferredModules (http://127.0.0.1:56249/appservice/runtime.js:46:23)
at Array.webpackJsonpCallback [as push] (http://127.0.0.1:56249/appservice/runtime.js:33:19)
at http://127.0.0.1:56249/appservice/app.js:4:49
at require (http://127.0.0.1:56249/appservice/__dev__/WAService.js:2:1647919)
at :1:1
at HTMLScriptElement.scriptLoaded (http://127.0.0.1:56249/appservice/appservice?t=1579254159097:1162:21)
，我工具配置也按照文档的来的
，就是会报这样的错误，然后我百度了一下，说在使用async await的文件中引用@tarojs/async-await然后还要写const regeneratorRuntime = global.regeneratorRuntime才不报错，但是我不想每个用到的文件都要写，这能解决不？

centuryHarbour picture centuryHarbour on 17 Jan 2020

我的装了@tarojs/async-await，在app.tsx中引入了它，然后我在index.weapp.tsx文件里写async await
，会报这样的错误
VM2555:1 thirdScriptError
regeneratorRuntime is not defined
ReferenceError: regeneratorRuntime is not defined
at http://127.0.0.1:56249/appservice/app.js:82:50
at http://127.0.0.1:56249/appservice/app.js:112:6
at Object../src/app.tsx (http://127.0.0.1:56249/appservice/app.js:138:2)
at webpack_require (http://127.0.0.1:56249/appservice/runtime.js:80:30)
at checkDeferredModules (http://127.0.0.1:56249/appservice/runtime.js:46:23)
at Array.webpackJsonpCallback [as push] (http://127.0.0.1:56249/appservice/runtime.js:33:19)
at http://127.0.0.1:56249/appservice/app.js:4:49
at require (http://127.0.0.1:56249/appservice/__dev__/WAService.js:2:1647919)
at :1:1
at HTMLScriptElement.scriptLoaded (http://127.0.0.1:56249/appservice/appservice?t=1579254159097:1162:21)
，我工具配置也按照文档的来的
，就是会报这样的错误，然后我百度了一下，说在使用async await的文件中引用@tarojs/async-await然后还要写const regeneratorRuntime = global.regeneratorRuntime才不报错，但是我不想每个用到的文件都要写，这能解决不？

看文档说是不用引入@tarojs/async-await 应该是框架的问题，等大佬们修复吧

Cicada7year picture Cicada7year on 17 Jan 2020

我的app.js里面是删掉@tarojs/async-await的。然后我是在beta版本就尝试OK的。

你删掉@tarojs/async-await后，把node_modules删掉，把package-lock.jso也删掉，重新安装一下依赖试试看。

我努力想方案了。只不过到这一层得 @luckyadam 来解答了。

shenghanqin picture shenghanqin on 17 Jan 2020

@shenghanqin 也就是说bate版本是正常的，但是正式版本不行吗？那就只能等大佬修复了

Cicada7year picture Cicada7year on 17 Jan 2020

我现在用的2.0.1，一点问题没有。不知道你的为啥有问题。

shenghanqin picture shenghanqin on 17 Jan 2020

我现在用的2.0.1，一点问题没有。不知道你的为啥有问题。

taro我都是新装的 直接装的2.0.1 直接init一个app 直接使用async 然后就直接报错了 。。囧

Cicada7year picture Cicada7year on 17 Jan 2020

@shenghanqin npm i -S [email protected] 装了这个包就可以了！！

Cicada7year picture Cicada7year on 17 Jan 2020

@shenghanqin npm i -S [email protected] 装了这个包就可以了！！

就是说，默认模板的package.json少了这个依赖？你再init一下，帮我确认下，感谢。

shenghanqin picture shenghanqin on 17 Jan 2020

@shenghanqin npm i -S [email protected] 装了这个包就可以了！！

就是说，默认模板的package.json少了这个依赖？你再init一下，帮我确认下，感谢。

@shenghanqin 我测试了，就是少了这个包呢

Cicada7year picture Cicada7year on 19 Jan 2020

@shenghanqin 而且必须安装0.11.1这个版本 我刚装了一下最新的，还是老样子

Cicada7year picture Cicada7year on 19 Jan 2020

@Cicada7year @shenghanqin 我的也是2.0.1，刚才重新init一个项目了，我选的是ts和微信云开发的模板，@tarojs/async-await和 [email protected]我都是在client文件夹里npm安装了，然后我在app.tsx里使用async await方式编写代码就报这样的错误：
hirdScriptError
regeneratorRuntime is not defined
ReferenceError: regeneratorRuntime is not defined
at http://127.0.0.1:49836/appservice/app.js:88:50
at http://127.0.0.1:49836/appservice/app.js:112:6
at Object../src/app.tsx (http://127.0.0.1:49836/appservice/app.js:131:2)
at __webpack_require__ (http://127.0.0.1:49836/appservice/runtime.js:80:30)
at checkDeferredModules (http://127.0.0.1:49836/appservice/runtime.js:46:23)
at Array.webpackJsonpCallback [as push] (http://127.0.0.1:49836/appservice/runtime.js:33:19)
at http://127.0.0.1:49836/appservice/app.js:4:49
at require (http://127.0.0.1:49836/appservice/__dev__/WAService.js:2:1647919)
at :1:1
at HTMLScriptElement.scriptLoaded (http://127.0.0.1:49836/appservice/appservice?t=1579401533651:1162:21)
console.error @ VM321:1
errorReport @ VM337 WAService.js:2
thirdErrorReport @ VM337 WAService.js:2
(anonymous) @ VM337 WAService.js:2
c @ VM337 WAService.js:2
r @ VM337 WAService.js:2
(anonymous) @ VM337 WAService.js:2
value @ VM337 WAService.js:2
(anonymous) @ VM337 WAService.js:2
scriptLoaded @ appservice?t=1579401533651:1162
script.onload @ appservice?t=1579401533651:1174
error (async)
(anonymous) @ VM337 WAService.js:2
(anonymous) @ VM337 WAService.js:2
(anonymous) @ VM337 WAService.js:2
VM337 WAService.js:2 Page "pages/index/index" has not been registered yet.

代码贴图：
1579402073(1)
1579402116(1)
1579402134(1)

最后还是得在import '@tarojs/async-await'的文件那里写const regeneratorRuntime = global.regeneratorRuntime才行，真是忧伤，囧。

centuryHarbour picture centuryHarbour on 19 Jan 2020

静静等待默认模板的修改吧。我比较确认的是，async-await可以删除，[email protected]是需要在默认模板上补上的。const regeneratorRuntime = global.regeneratorRuntime这个，我是第一次见到，不认为是推荐写法。

shenghanqin picture shenghanqin on 19 Jan 2020

@Cicada7year @shenghanqin 我的也是2.0.1，刚才重新init一个项目了，我选的是ts和微信云开发的模板，@tarojs/async-await和 [email protected]我都是在client文件夹里npm安装了，然后我在app.tsx里使用async await方式编写代码就报这样的错误：
hirdScriptError
regeneratorRuntime is not defined
ReferenceError: regeneratorRuntime is not defined
at http://127.0.0.1:49836/appservice/app.js:88:50
at http://127.0.0.1:49836/appservice/app.js:112:6
at Object../src/app.tsx (http://127.0.0.1:49836/appservice/app.js:131:2)
at webpack_require (http://127.0.0.1:49836/appservice/runtime.js:80:30)
at checkDeferredModules (http://127.0.0.1:49836/appservice/runtime.js:46:23)
at Array.webpackJsonpCallback [as push] (http://127.0.0.1:49836/appservice/runtime.js:33:19)
at http://127.0.0.1:49836/appservice/app.js:4:49
at require (http://127.0.0.1:49836/appservice/__dev__/WAService.js:2:1647919)
at :1:1
at HTMLScriptElement.scriptLoaded (http://127.0.0.1:49836/appservice/appservice?t=1579401533651:1162:21)
console.error @ VM321:1
errorReport @ VM337 WAService.js:2
thirdErrorReport @ VM337 WAService.js:2
(anonymous) @ VM337 WAService.js:2
c @ VM337 WAService.js:2
r @ VM337 WAService.js:2
(anonymous) @ VM337 WAService.js:2
value @ VM337 WAService.js:2
(anonymous) @ VM337 WAService.js:2
scriptLoaded @ appservice?t=1579401533651:1162
script.onload @ appservice?t=1579401533651:1174
error (async)
(anonymous) @ VM337 WAService.js:2
(anonymous) @ VM337 WAService.js:2
(anonymous) @ VM337 WAService.js:2
VM337 WAService.js:2 Page "pages/index/index" has not been registered yet.

代码贴图：
1579402073(1)
1579402116(1)
1579402134(1)

最后还是得在import '@tarojs/async-await'的文件那里写const regeneratorRuntime = global.regeneratorRuntime才行，就算没装[email protected]，最后也可以，试了好几次，感觉跟[email protected]没关系，装了它，照样还是会报各种错误，真是忧伤，囧。

备注; taro我是重新全局再装过的，因为sass报错，所以我也装了npm install -g mirror-config-china

centuryHarbour picture centuryHarbour on 19 Jan 2020

静静等待默认模板的修改吧。我比较确认的是，async-await可以删除，[email protected]是需要在默认模板上补上的。const regeneratorRuntime = global.regeneratorRuntime这个，我是第一次见到，不认为是推荐写法。

哎，只能等了

centuryHarbour picture centuryHarbour on 19 Jan 2020

嘿嘿，等taro3.0beta开测的时候，你们就用自己的项目建个分支测试beta版本吧。因为，beta版本既能提前体验新版功能，还能看着问题迅速解决。嘻嘻。

shenghanqin picture shenghanqin on 19 Jan 2020

@shenghanqin npm i -S [email protected] 装了这个包就可以了！！

请有问题的朋友，安装下这个依赖包，并且必须是 0.11.1 版本

luckyadam picture luckyadam on 19 Jan 2020
👍3

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

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

Good luck and happy coding~

taro-bot[bot] picture taro-bot[bot] on 19 Jan 2020

还是一样报错啊。。。有总结帖吗?

HughSunny picture HughSunny on 21 Jan 2020

没写，只能等官方新版本了。我选的是ts+小程序云开发模板的，按照官方文档来的，然后就是会就是会报我说的那个错误------------------ 原始邮件 ------------------
发件人: "HughSunny"notifications@github.com
发送时间: 2020年1月21日(星期二) 下午4:25
收件人: "NervJS/taro"taro@noreply.github.com;
抄送: "centuryHarbour"505901151@qq.com;"Comment"comment@noreply.github.com;
主题: Re: [NervJS/taro] [taro-2.0.1]使用异步变成async/await关键字报错 (#5357)

还是一样报错啊。。。有总结帖吗?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

centuryHarbour picture centuryHarbour on 21 Jan 2020

一样不行

tecty picture tecty on 13 Mar 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

afateg picture afateg  ·  3Comments
wyhaya picture wyhaya  ·  3Comments
fxy5869571 picture fxy5869571  ·  3Comments
liuchuzhang picture liuchuzhang  ·  3Comments
rainbowMorelhahahah picture rainbowMorelhahahah  ·  3Comments