Menu
I'm trying to run very simple code, but I'm getting an error, I didn't use the create react app!
It looks like my babel.config.js file is being ignored!
This is the structure of my small project:
My html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReactJS</title>
</head>
<body>
<div id="app"></div>
<script src = 'bundle.js' ></script>
</body>
</html>
My index.js file:
import React from 'react';
import { render } from 'react-dom';
render(<h1>Hello World!!</h1>, document.getElementById('app'));
My package json:
{
"name": "front",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack-dev-server --mode production"
},
"dependencies": {
"@babel/cli": "^7.10.5",
"@babel/core": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.9.0",
"babel-loader": "^8.1.0",
"webpack-dev-server": "^3.10.3"
}
}
My webpack.config.js
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'public'),
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}]
},
};
And this is my babel.config.js
module.exports = {
"presets": ["@babel/preset-env", "@babel/preset-react"]
};
Error when
yarn webpack-dev-server --mode development
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /root/treina/front/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (4:8):
2 | import { render } from 'react-dom';
3 |
> 4 | render(<h1>Hello World!!</h1>, document.getElementById('app'));
| ^
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.
at Parser._raise (/root/treina/front/node_modules/@babel/parser/lib/index.js:757:17)
at Parser.raiseWithData (/root/treina/front/node_modules/@babel/parser/lib/index.js:750:17)
at Parser.expectOnePlugin (/root/treina/front/node_modules/@babel/parser/lib/index.js:8849:18)
at Parser.parseExprAtom (/root/treina/front/node_modules/@babel/parser/lib/index.js:10170:22)
at Parser.parseExprSubscripts (/root/treina/front/node_modules/@babel/parser/lib/index.js:9688:23)
at Parser.parseMaybeUnary (/root/treina/front/node_modules/@babel/parser/lib/index.js:9668:21)
at Parser.parseExprOps (/root/treina/front/node_modules/@babel/parser/lib/index.js:9538:23)
at Parser.parseMaybeConditional (/root/treina/front/node_modules/@babel/parser/lib/index.js:9511:23)
at Parser.parseMaybeAssign (/root/treina/front/node_modules/@babel/parser/lib/index.js:9466:21)
at Parser.parseExprListItem (/root/treina/front/node_modules/@babel/parser/lib/index.js:10846:18)
ℹ ｢wdm｣: Failed to compile.
I'm using yarn and the WSL terminal
281
The React error “Support for the experimental syntax 'jsx' isn't currently enabled” is caused by not configuring Babel correctly. It can be fixed by creating a . babelrc file in the root of your project directory, and adding the presets “@babel/preset-react” and “@babel/preset-env”.
To use JavaScript inside of JSX, you need to surround it with curly braces: {} . This is the same as when you added functions to attributes. To create React components, you'll need to convert the data to JSX elements. To do this, you'll map over the data and return a JSX element.
Embedding Expressions in JSXconst name = 'Josh Perez';const element = <h1>Hello, {name}</h1>; You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2 , user. firstName , or formatName(user) are all valid JavaScript expressions.
What is JSX? JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
Just create a .babelrc file in the root of your project and add:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
In my case, Creating "babel.config.js" file with the following content worked.
module.exports = {
presets:[
"@babel/preset-env",
"@babel/preset-react"
]
}
This https://stackoverflow.com/a/52693007/10952640 solved for me.
You need @babel/preset-react set also on webpack config:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['@babel/env','@babel/preset-react'] },
},
2021
I fixed it adding
"jsx": "react-jsx"
to my "compilerOptions" on my tsconfig.json file
8
Yet another possible cause. I got this error when try to run a project in a command prompt at a path that included symlinks. Changing directory directly into the real path solved the issue.
5
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
