upgrade to babel-loader8.x,jsx file compile wrong

[zhang110912]

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

[JLHwung]

Can you craft a minimal reproducing example on REPL? I can not reproduce this issue.

[zhang110912]

I am sorry, I also failed to reproduce this issue on REPL......
Is it possible to have a relationship with react version? my react version is 0.14.9

[lifeilu]

I am sorry, I also failed to reproduce this issue on REPL......
Is it possible to have a relationship with react version? my react version is 0.14.9

Have you solved the problem?
I have the similar trouble, and have no idea to solve.

the error description as follows:
Module build failed: SyntaxError: ...src\tooltip.vue: Support for the experimental syntax 'jsx' isn't currently enabled (99:9): Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

and my dependency of babel:

    "@babel/core": "^7.14.6",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-decorators": "^7.14.5",
    "@babel/plugin-proposal-private-methods": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/runtime": "^7.14.6",
    "@babel/runtime-corejs3": "^7.14.7",
    "babel-loader": "^8.2.2",

and my config:

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults",  "loose": true }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {"corejs": 3}],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }]
  ]
}

[JLHwung]

@lifeilu

The error message has already provided solution:

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.

You need to install and add @babel/preset-react so Babel knows it should compile JSX.

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults",  "loose": true }],
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {"corejs": 3}],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }]
  ]
}

[lifeilu]

@lifeilu

The error message has already provided solution:

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.

You need to install and add @babel/preset-react so Babel knows it should compile JSX.

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults",  "loose": true }],
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {"corejs": 3}],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }]
  ]
}

I have tried the provided solution, and i also add the presets of @vue/babel-preset-jsx, but it seems not work.

and my dependency of babel:

   "@babel/core": "^7.14.6",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-decorators": "^7.14.5",
    "@babel/plugin-proposal-private-methods": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "@babel/runtime": "^7.14.6",
    "@babel/runtime-corejs3": "^7.14.7",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "babel-loader": "^8.2.2",

and my config:

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults",  "loose": true }],
    "@babel/preset-react",
    "@vue/babel-preset-jsx"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {"corejs": 3}],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }]
  ]
}

the error description as follows:

Module build failed: SyntaxError: ...src\tooltip.vue: Support for the experimental syntax 'jsx' isn't currently enabled (99:9): Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

is there something wrong with my dependency ?

[existentialism]

@lifeilu what's your webpack config? is babel-loader being applied to .vue file extensions?

[lifeilu]

@lifeilu what's your webpack config? is babel-loader being applied to .vue file extensions?

It works for me~
I forgot to apply the bable-loader to .vue file extensions.
Thanks a lot~