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

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

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

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

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

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

@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 ?

@lifeilu

@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~

Sunbelt Computer Software

PL/B Language Development and Support

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Sunbelt Computer Software

PL/B Language Development and Support

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

Description

Activity

JLHwung commented on Jul 9, 2020

zhang110912 commented on Jul 16, 2020

lifeilu commented on Jul 13, 2021

JLHwung commented on Jul 13, 2021

lifeilu commented on Jul 14, 2021

existentialism commented on Jul 14, 2021

lifeilu commented on Jul 15, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions