webpack babel es7 async function error “TypeError: (0 , _typeof3.default) is not a function”

问题:

I am trying to require in api.js, but receiving the error "TypeError: (0 , _typeof3.default) is not a function". Attempting to debug this issue shows that removing "async" word makes the error disappear but I'm trying to use async. I have all the babel async plugins installed, defined in package.json and included in the plugins of webpack.config.js and .babelrc. Please help.

my api.js

let config = require('config'),   $ = require('jquery')  module.exports = {   loggedIn: false,   api: async (endpoint, params={}, method="GET") => {     console.log(endpoint, params, method)     let request,       url = config.urls.api + endpoint      switch(method){       case 'GET': request = $.get(url); break;       case 'POST': request = $.post(url); break;     }      try{       let res = await request       return res     }catch(e){       if(e == 'not logged-in'){         this.loggedIn = false       }     }   } }

package.json

{   "name": "background",   "version": "1.0.0",   "description": "",   "main": "background.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1",     "dev": "NODE_ENV=dev webpack --progress --colos --watch"   },   "author": "",   "license": "ISC",   "devDependencies": {     "babel-core": "^6.2.1",     "babel-loader": "^6.2.0",     "webpack": "^1.12.9",     "babel-plugin-syntax-async-functions": "^6.0.14",     "babel-plugin-syntax-decorators": "^6.1.18"   },   "dependencies": {     "babel-plugin-transform-runtime": "^6.1.18",     "babel-polyfill": "^6.2.0",     "babel-preset-es2015": "^6.1.18",     "babel-preset-stage-3": "^6.1.18",     "babel-runtime": "^6.2.0",     "jquery": "^2.1.4"   } }

.babelrc

{   "plugins": ["syntax-decorators","syntax-async-functions"] }

webpack.config.js

const path = require('path')  console.log(process.env.NODE_ENV)  module.exports = {   entry: ['babel-polyfill', './background.js'],   output: {     filename: 'background-bundle.js',     publicPath: 'http://localhost:8090/assets',     path: '../dist'   },   module: {     loaders: [       {         loader: 'babel-loader',         test: /.jsx?$/,         exclude: path.resolve(__dirname, "node_modules"),         query: {           plugins: ['transform-runtime','syntax-async-functions', 'syntax-decorators'],           presets: ['es2015','stage-3']         }       }     ]   },   externals: {     //don't bundle the 'react' npm package with our bundle.js     //but get it from a global 'React' variable //    'react': 'React'   },   resolve: {     extensions: ['', '.js', '.jsx'],     alias: {       config: path.join(__dirname, 'config', process.env.NODE_ENV)     }   } }

回答1:

This was actually fixed by removing the plugin, transform-runtime. I'm still not sure why this is the case. I would love to get some comments on why.

const path = require('path')  console.log(process.env.NODE_ENV)  module.exports = {   entry: ['babel-polyfill', './background.js'],   output: {     filename: 'background-bundle.js',     publicPath: 'http://localhost:8090/assets',     path: '../dist'   },   module: {     loaders: [       {         loader: 'babel-loader',         test: /.jsx?$/,         exclude: path.resolve(__dirname, "node_modules"),         query: {           plugins: ['transform-runtime','syntax-async-functions', 'syntax-decorators'],           presets: ['es2015','stage-3']         }       }     ]   },   externals: {     //don't bundle the 'react' npm package with our bundle.js     //but get it from a global 'React' variable //    'react': 'React'   },   resolve: {     extensions: ['', '.js', '.jsx'],     alias: {       config: path.join(__dirname, 'config', process.env.NODE_ENV)     }   } }

文章来源: webpack babel es7 async function error “TypeError: (0 , _typeof3.default) is not a function”