upgrade to babel-loader8.x,jsx file compile wrong · Issue #856 · babel/babel-loader

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

乖乖的铁链 · 熔炼炉_中频炉_连铸机_造粒机_拉线机_压片 ...· 8 月前 ·

骑白马的大熊猫 · Write a short essay ...· 8 月前 ·

刚分手的红薯 · 争鸣--理论评论--中国作家网· 11 月前 ·

腼腆的八宝粥 · 漫画全集在线观看 - 哔哩哔哩漫画· 1 年前 ·

可爱的乌冬面 · Question #686111 ...· 1 年前 ·

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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