javascript - webpack babel es7 async function error "TypeError: (0 , _typeof3.default) is not a function" - St

admin管理员组

文章数量:1415684

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
      }
    }
  }
}

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)
    }
  }
}

• javascript
• node.js
• webpack
• babeljs

Share Improve this question Follow asked Nov 27, 2015 at 1:33 uptownhruptownhr 67266 silver badges1515 bronze badges 1

• Try putting require('babel-polyfill') at the top in your api.js. – laggingreflex Commented Nov 27, 2015 at 3:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 ments 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)
    }
  }
}

本文标签：