Open zhang110912 opened 4 years ago
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
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
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?
@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~
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)
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!!!