操作系统：Windows 10 Pro
webpack：1.14.0
所以，我收到上述错误时出现以下代码，async是问题所在：
import { applyAfterware, applyMiddleware } from 'redux';
async applyMiddleware(req, next) {
....
},
完整的错误消息是：
Module parse failed: C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\babel-loader\lib\index.js!C:\Users\d0475\Documents\Projects\learn-redux-graphql\client\apolloClient.js Unexpected token (77:25)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (77:25)
at Parser.pp$4.raise (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp.expect (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:597:28)
at Parser.pp$3.parseObj (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1973:16)
at Parser.pp$3.parseExprAtom (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1805:19)
at Parser.pp$3.parseExprSubscripts (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1597:21)
@ ./client/app.js 17:20-45
我的webpack.config文件是：
var path = require('path');
var webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/app'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new Dotenv({
path: './.env',
safe: true
})
],
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};
如何解决此问题？
我的package.json如下：
{
"name": "learn-redux-graphql",
"version": "1.0.0",
"description": ":) ",
"scripts": {
"build:webpack": "set NODE_ENV=production && webpack --config webpack.config.prod.js",
"build": "npm run clean && npm run build:webpack",
"test": "NODE_ENV=production mocha './tests/**/*.spec.js' --compilers js:babel-core/register",
"clean": "rimraf public",
"start": "node devServer.js"
},
"repository": {
"type": "git",
"url": "https://github.com/TheoMer/learn-redux-graphql.git"
},
"author": "Theo Mer",
"license": "MIT",
"homepage": "https://github.com/TheoMer/learn-redux-graphql",
"dependencies": {
"apollo-client": "^1.0.2",
"babel-core": "^6.5.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.3",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-object-rest-spread": "^6.5.0",
"babel-plugin-transform-react-display-name": "^6.5.0",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"dotenv-webpack": "^1.4.5",
"eslint": "^3.4.0",
"eslint-plugin-babel": "^3.1.0",
"eslint-plugin-react": "^4.1.0",
"express": "^4.13.4",
"firebase": "^3.3.0",
"graphql-tag": "^1.3.2",
"graphql-tools": "^0.10.1",
"immutability-helper": "^2.1.2",
"localforage": "^1.5.0",
"lodash": "^4.17.4",
"node-env-file": "^0.1.8",
"raven-js": "^2.1.1",
"react": "^0.14.7",
"react-addons-css-transition-group": "^0.14.7",
"react-apollo": "^1.0.0-rc.3",
"react-dom": "^0.14.7",
"react-redux": "^4.4.0",
"react-router": "^2.0.0",
"react-router-redux": "^4.0.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.2",
"redbox-react": "^1.2.2",
"redux": "^3.3.1",
"redux-persist": "^4.8.0",
"redux-thunk": "^2.0.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.0",
"stylus": "^0.54.5",
"stylus-loader": "^2.3.1",
"subscriptions-transport-ws": "^0.5.5-alpha.0",
"webpack": "^1.12.14",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.7.1"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-react-jsx": "^6.23.0",
"copy-webpack-plugin": "^4.0.1",
"expect": "^1.14.0",
"expect-jsx": "^2.3.0",
"html-webpack-plugin": "^2.28.0",
"mocha": "^2.4.5",
"offline-plugin": "^4.7.0",
"react-addons-test-utils": "^0.14.7",
"sw-precache-webpack-plugin": "^0.9.1"
},
"babel": {
"presets": [
"react",
"es2015"
],
"env": {
"development": {
"plugins": [
[
"transform-async-to-generator"
],
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
],
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-hmr",
"imports": [
"react"
],
"locals": [
"module"
]
},
{
"transform": "react-transform-catch-errors",
"imports": [
"react",
"redbox-react"
]
}
]
}
]
]
},
"production": {
"plugins": [
[
"transform-async-to-generator"
],
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
]
]
}
}
},
"eslintConfig": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [
2,
"single"
],
"strict": [
2,
"never"
],
"babel/generator-star-spacing": 1,
"babel/new-cap": 1,
"babel/object-shorthand": 1,
"babel/arrow-parens": 1,
"babel/no-await-in-loop": 1,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"babel",
"react"
]
}
}
我的app.js，如果我使用.babelrc文件，会产生以下错误：
Module build failed: SyntaxError: C:/Users/d0475/Documents/Projects/learn-redux-graphql/client/app.js: Unexpected token (47:2)
46 | render(
> 47 | <ApolloProvider store={store} client={client}>
| ^
render(
<ApolloProvider store={store} client={client}>
{ /* Tell the Router to use our enhanced history */ }
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={PhotoGrid} />
<Route path="/view/:postId" component={Single}></Route>
</Route>
</Router>
</ApolloProvider>,
document.getElementById('root')
);
答案 0 :(得分：2)
要转换异步，您需要一个特殊的插件。
npm install --save-dev babel-plugin-transform-async-to-generator
{"plugins": ["transform-async-to-generator"]}
答案 1 :(得分：0)
所以，正如@anamulhasan建议的那样，我导入了babel-plugin-transform-async-to-generator。
添加
"plugins": ["transform-async-to-generator"]
到.babelrc文件没有解决问题。但是补充说：
[
"transform-async-to-generator"
]
到“babel” - ＆gt; “env” - ＆gt;生产和开发的“插件”部分确实解决了这个问题。