await in try without catch throws type error
sudo-suhas opened this issue · comments
Input Code
// actions.js
import * as types from './mutation_types';
import * as apiClient from 'lib/api_client';
export async function getLoginState({ commit }) {
try {
commit(types.FULLSCREEN_LOADING_START);
const { error, success, response, message } = await apiClient.getLoginState();
if (error === false && success === true) {
commit(types.RECEIVED_LOGIN_STATE, { loggedIn: response.loggedIn });
commit(types.RECEIVED_CSRF_TOKEN, { csrfToken: response.csrfToken });
} else {
commit(types.UPDATE_GLOBAL_ALERT, {
title: message,
type: 'error'
});
}
} finally {
commit(types.FULLSCREEN_LOADING_STOP);
}
}Babel Configuration (.babelrc)
{
"presets": [
["es2015", {
"modules": false
}],
"stage-1"
],
"plugins": [
"lodash",
"syntax-dynamic-import", ["component", [{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}]],
"transform-runtime"
],
"comments": false,
"env": {
"test": {
"plugins": ["istanbul"]
}
}
}Current Behavior
The configuration should have been able to parse async await functions but I was getting the following error:
Error stack trace
ERROR in ./src/client/store/actions.js
Module build failed: TypeError: /home/suhas/workspace/vista/src/client/store/actions.js: Cannot read property 'name' of null
at /home/suhas/workspace/vista/node_modules/babel-plugin-component/lib/core.js:204:33
at Array.forEach (native)
at PluginPass.ArrayExpression (/home/suhas/workspace/vista/node_modules/babel-plugin-component/lib/core.js:203:20)
at newFn (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/visitors.js:276:21)
at NodePath._call (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/path/context.js:76:18)
at NodePath.call (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/path/context.js:48:17)
at NodePath.visit (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/path/context.js:105:12)
at TraversalContext.visitQueue (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitMultiple (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/context.js:103:17)
at TraversalContext.visit (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/context.js:190:19)
at Function.traverse.node (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/index.js:114:17)
at NodePath.visit (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/path/context.js:115:19)
at TraversalContext.visitQueue (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitMultiple (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/context.js:103:17)
at TraversalContext.visit (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/context.js:190:19)
at Function.traverse.node (/home/suhas/workspace/vista/node_modules/babel-traverse/lib/index.js:114:17)
@ ./src/client/store/index.js 4:0-37 28:4-34:6 28:65-34:5 31:21-41
@ ./src/client/main.js
@ multi ./build/dev-client ./src/client/main.js
I could not replicate the error in the babel online repl.
Possible Solution
It is possible to work around this problem by including a catch block:
import * as types from './mutation_types';
import * as apiClient from 'lib/api_client';
/* eslint-disable require-jsdoc */
export async function getLoginState({ commit }) {
try {
// ...
} catch (err) {
commit(types.FATAL_ERROR, { err }, { root: true });
} finally {
commit(types.FULLSCREEN_LOADING_STOP);
}
}Context
I am using babel with webpack 2.2 in a modified vue-webpack template.
package.json
{
"name": "vista",
"version": "1.0.0",
"description": "Front end Single Page Application usin Vue.js for boolean app",
"author": "Suhas Karanth <sudo.suhas@gmail.com>",
"private": true,
"scripts": {
"dev": "better-npm-run dev",
"build": "better-npm-run build",
"prod": "better-npm-run prod",
"unit": "better-npm-run unit",
"e2e": "better-npm-run e2e",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs build config",
"lint:fix": "npm run lint -- --fix",
"lint-staged": "lint-staged"
},
"betterScripts": {
"dev": {
"command": "node --debug dev-nodemon.js",
"env": {
"NODE_ENV": "development",
"DEBUG": "vista:*,express:application,express:router:route",
"DEBUG_DEPTH": 10
}
},
"build": {
"command": "node build/build.js",
"env": {
"NODE_ENV": "production"
}
},
"prod": {
"command": "node src/app.js",
"env": {
"NODE_ENV": "production"
}
},
"unit": {
"command": "karma start test/unit/karma.conf.js --single-run",
"env": {
"NODE_ENV": "testing",
"BABEL_ENV": "test",
"DEBUG": "vista:*,express:application,express:router:route",
"DEBUG_DEPTH": 10
}
},
"e2e": {
"command": "node test/e2e/runner.js",
"env": {
"NODE_ENV": "testing",
"DEBUG": "vista:*,express:application,express:router:route",
"DEBUG_DEPTH": 10
}
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix"
],
"build/*.js": [
"eslint --fix",
"git add"
],
"config/*.js": [
"eslint --fix",
"git add"
],
"test/**/*.js": [
"eslint --fix",
"git add"
]
},
"pre-commit": "lint-staged",
"dependencies": {
"better-npm-run": "0.0.14",
"debug": "^2.6.0",
"element-ui": "^1.1.5",
"express": "^4.14.0",
"lodash": "^4.17.4",
"promise-polyfill": "^6.0.2",
"vue": "^2.1.10",
"vue-router": "^2.1.3",
"vue-spinner": "^1.0.2",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.1.1",
"whatwg-fetch": "^2.0.2"
},
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.22.1",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-component": "^0.9.0",
"babel-plugin-istanbul": "^3.0.0",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-1": "^6.22.0",
"babel-register": "^6.22.0",
"chai": "^3.5.0",
"chalk": "^1.1.3",
"chromedriver": "^2.21.2",
"compression-webpack-plugin": "^0.3.2",
"connect-history-api-fallback": "^1.1.0",
"cross-spawn": "^5.0.1",
"css-loader": "^0.26.1",
"eslint": "^3.7.1",
"eslint-friendly-formatter": "^2.0.5",
"eslint-loader": "^1.5.0",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-lodash": "^2.3.2",
"eslint-plugin-promise": "^3.4.0",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^2.0.0-rc.0",
"file-loader": "^0.9.0",
"friendly-errors-webpack-plugin": "^1.1.2",
"function-bind": "^1.0.2",
"html-webpack-plugin": "^2.8.1",
"http-proxy-middleware": "^0.17.2",
"inject-loader": "^3.0.0-beta3",
"karma": "^1.3.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sinon-chai": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "^2.0.1",
"lint-staged": "^3.2.8",
"lodash-webpack-plugin": "^0.11.0",
"lolex": "^1.4.0",
"mocha": "^3.1.0",
"nightwatch": "^0.9.8",
"nodemon": "^1.11.0",
"opn": "^4.0.2",
"ora": "^1.0.0",
"phantomjs-prebuilt": "^2.1.3",
"pre-commit": "^1.2.2",
"selenium-server": "3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.4",
"sinon": "^1.17.3",
"sinon-chai": "^2.8.0",
"strip-loader": "^0.1.2",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.0",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^2.2.0",
"webpack-dev-middleware": "^1.8.3",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^2.4.0"
},
"engines": {
"node": ">= 6.9.2",
"npm": ">= 3.10.9"
}
}webpack.conf.js
// webpack.base.conf.js
'use strict';
const path = require('path');
const webpack = require('webpack');
const config = require('../config');
const utils = require('./utils');
// check env & config/index.js to decide whether to enable CSS source maps for the
// various preprocessor loaders added to vue-loader at the end of this file
const clientRoot = path.join(appRoot, 'src', 'client');
module.exports = {
context: appRoot,
entry: {
app: './src/client/main.js'
},
output: {
path: config.assetsRoot,
publicPath: config.assetsPublicPath,
filename: '[name].js'
},
resolve: {
modules: [
clientRoot,
'node_modules',
path.join(appRoot, 'node_modules')
],
enforceExtension: false,
extensions: ['.js', '.vue', '.json'],
alias: {
// vue$: 'vue/dist/vue.common.js',
// src: path.join(appRoot, 'src'),
client: clientRoot,
assets: path.join(clientRoot, 'assets'),
lib: path.join(clientRoot, 'lib'),
components: path.join(clientRoot, 'components'),
views: path.join(clientRoot, 'views')
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [
clientRoot
],
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [
clientRoot
],
exclude: /node_modules/,
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: utils.cssLoaders({ sourceMap: config.cssSourceMap, extract: config.extractCss }),
postcss: [
require('autoprefixer')({
browsers: ['last 2 versions', 'ie > 8']
})
]
}
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [
clientRoot
],
exclude: /node_modules/
},
...utils.styleLoaders({
sourceMap: config.cssSourceMap,
extract: config.extractCss,
moduleRules: true
}),
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
plugins: [
// eslint-disable-next-line no-useless-escape
new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/,
'element-ui/lib/locale/lang/en')
]
};
// webpack.dev.conf.js
'use strict';
const _ = require('lodash'),
webpack = require('webpack'),
merge = require('webpack-merge'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
FriendlyErrors = require('friendly-errors-webpack-plugin');
const config = require('../config'),
baseWebpackConfig = require('./webpack.base.conf');
// add hot-reload related code to entry chunks
_.forEach(Object.keys(baseWebpackConfig.entry), name => {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]);
});
module.exports = merge(baseWebpackConfig, {
// eval-source-map is faster for development
devtool: '#eval-source-map',
plugins: [
// https://webpack.js.org/plugins/loader-options-plugin/
new webpack.LoaderOptionsPlugin({
debug: false,
options: {
context: appRoot
}
}),
new webpack.DefinePlugin({
'process.env': config.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrors()
]
});Your Environment
| software | version |
|---|---|
| Babel | 6.22.1 |
| node | 6.9.4 |
| npm | 3.10.10 |
| Operating System | ubuntu 16.04 |