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~