Description
there is something wrong happened with babel-loader 8.x and webpack 4.x.
before i submit this question,i have searched those issue.but still have no idea.
is there a bug or my usage is wrong?
the console output is:
ERROR in H:/code-program/public/widget/index.jsx
Module build failed (from H/code-program/node_modules/happypack/loader.js):
SyntaxError: H:\code-program\public\widget\index.jsx: Unexpected token (393:24)
391 | const title =
392 | index > -1 ? (
> 393 | <span>
| ^
394 | <span style={{ color: "#000", backgroundColor: "#f8cd73", padding: "2px" }}>xxxx</span>
at Parser._raise (H:\code-program\\node_modules\@babel\parser\lib\index.js:746:17)
at Parser.raiseWithData (H:\code-program\node_modules\@babel\parser\lib\index.js:739:17)
at Parser.raise (H:\code-program\node_modules\@babel\parser\lib\index.js:733:17)
at Parser.unexpected (H:\code-program\node_modules\@babel\parser\lib\index.js:8807:16)
at Parser.parseExprAtom (H:\code-program\node_modules\@babel\parser\lib\index.js:10130:20)
at Parser.parseExprSubscripts (H:\code-program\node_modules\@babel\parser\lib\index.js:9656:23)
at Parser.parseMaybeUnary (H:\code-program\node_modules\@babel\parser\lib\index.js:9636:21)
at Parser.parseExprOps (H:\code-program\node_modules\@babel\parser\lib\index.js:9506:23)
at Parser.parseMaybeConditional (H:\code-program\node_modules\@babel\parser\lib\index.js:9479:23)
at Parser.parseMaybeAssign (H:\code-program\node_modules\@babel\parser\lib\index.js:9434:21)
@ H:\code-program\public\widget\main.js
my package.json file:
"@babel/core": "^7.10.1",
"@babel/plugin-proposal-class-properties": "^7.10.1",
"@babel/plugin-proposal-decorators": "^7.10.1",
"@babel/plugin-proposal-object-rest-spread": "^7.10.1",
"@babel/plugin-transform-arrow-functions": "^7.10.1",
"@babel/plugin-transform-react-jsx": "^7.10.1",
"@babel/plugin-transform-runtime": "^7.10.1",
"@babel/preset-env": "^7.10.1",
"@babel/preset-react": "^7.10.1",
"babel-loader": "8.1.0",
"happypack": "^5.0.1",
"webpack": "4.43.0",
webpack.config.js :
this.entry = entry;
this.output = {
path: path.join(__dirname, '_build/', outputName, 'js/'),
filename: '[name].js',
};
this.module = {
rules: [
{
test: /.jsx$/,
use: 'happypack/loader?id=babel'
}]
}
this.plugins = [
new HappyPack({
id: 'babel',
loaders: ['babel-loader']
})
]
.babelrc file is :
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"esmodules": true
}
}
],
"@babel/preset-react"
],
"plugins": [
[ "@babel/plugin-proposal-decorators", { "legacy": true } ],
[ "@babel/plugin-proposal-class-properties", { "loose": true } ],
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-react-jsx",
"@babel/plugin-transform-runtime"
]
}
my environment:
Linux and Windows 10
any suggestion will be appreciate!!!