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></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 () to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx () 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
114 Answers
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" ] } 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
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.
2I remade my project from scratch and realized that I was wrong to not include the "D" at the end of the command:
yarn add webpack-dev-server -D Now it's working!
1The solution that worked for me was when I discovered node_modules/react-scripts/config/webpack.config.js contained:
// @remove-on-eject-begin babelrc: false, configFile: false, By setting babelrc: true, I was finally able to get .babelrc changes to work. I'm guessing the configFile: parameter is what you will need to change. (Note, the babelrc appears to need to go into src/ for react-scripts to find it, reasonably likely to also be true for babel.config.js.)
Mmm i think the problem is in your babel, try this:
- npm i --save-dev @babel/plugin-proposal-class-properties
- add loose:true in your babelrc
inside the webpacker.yml file if using react with rails add jsx extension.
extensions: - .jsx - .mjs - .js - .sass - .scss - .css - .module.sass - .module.scss - .module.css - .png - .svg - .gif - .jpeg - .jpg In my package.json, I added:
"babel": { "presets": [ "@babel/react", "@babel/env" ], "plugins": [ "@babel/proposal-class-properties", "@babel/plugin-transform-runtime" ] } For me the test doesn't work in VSCode only. I'm using yarn workspace and CRA as one of the workspaces.
This means the solution is to ignore the failing VSCode tests and start the tests in command line instead:
yarn workspace frontend test
I came across the same error, my problem was that during rebase I lost a brace somewhere so my package.json wasn't working properly - if your babel is showing errors like this - try checking if your package.json has brackets properly set up
2For the people who are getting this error while building Remix app, change the extension of file from .js to .jsx/.tsx or check with tsconfig file.
Adding another answer to the mix... the project I was looking at when I hit this was built off create-react-app using react scripts v4 and React 17. The warning was showing for me in relation to the source code for a third-party module, something like:
Failed to compile. ./node_modules/@third-party/ui-components/src/components/Header.js SyntaxError: C:\Development\app\node_modules\@third-party\ui-components\src\components\Header.js: Support for the experimental syntax 'jsx' isn't currently enabled (142:5) The problem turned out to be that someone had mistakenly added the import for the third-party component as follows:
import { Header } from '@third-party/ui-components/src'; Instead of:
import { Header } from '@third-party/ui-components'; So, webpack was trying to use the original source code for the package instead of the compiled export. And, checking into react-scripts, the module loader for JS external to the app is set up as follows:
// Process any JS outside of the app with Babel. // Unlike the application JS, we only compile the standard ES features. { test: /\.(js|mjs)$/, exclude: /@babel(?:\/|\\{1,2})runtime/, loader: require.resolve('babel-loader'), options: { babelrc: false, configFile: false, compact: false, presets: [ [ require.resolve('babel-preset-react-app/dependencies'), { helpers: true }, ], ], cacheDirectory: true, // ----- 8< ----- }, } Fixing up the import path by removing the /src fixed the issue.
