React - Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation

Question

I want to use react-validation component Input in my form. This is why I imported it & used inside the form as:

<Input className="form-control"
       type="text"
       placeholder="name"
       value={props.data.creatingUser.createName}
       name="createName"
       id="createName"
       onChange={props.handleAddChange}
required/>

When I try to run the application using npm start, I receive the following error in the console:

SyntaxError: E:\Projects\personal\rental-application\node_modules\react-validation\src\components\input\index.js: Support for the experimental syntax 'jsx' isn't cur rently enabled (6:3):

const Input = ({ error, isChanged, isUsed, ...props }) => (

|   ^        <input {...props} {...( isChanged && isUsed && error ? {        className: `is-invalid-input ${props.className}`
 } : { className: props.className } )} /> 

I have not explicitly done any babel configuration and my package.json file has the following content:

{
  "name": "rental-application",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "jquery": "^3.5.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4",
    "popper.js": "1.16.1",
    "css-loader": "^5.0.1",
    "react-bootstrap": "^1.4.3",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "axios": "^0.21.1",
    "react-notifications": "^1.7.2",
    "react-fontawesome": "^1.7.1",
    "react-table": "^6.11.4",
    "react-validation": "^3.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-transform-async-to-generator": "^7.12.1",
    "react-router-dom": "^5.2.0",
    "react-table-6": "^6.11.0"
  }
}

My project structure:

++node_modules

++public
+++index.html
+++manifest.json
+++robots.txt

++src
+++App.js
+++index.js
+++index.css

++package.json
++package-lock.json

You can see I am not using any other configuration, and I have initiated the project using create-react-app command.

Answer 1

Input in react-validation lies under build folder. But from the error it seems that you didn't imported Input properly: SyntaxError: E:\Projects\personal\rental-application\node_modules\react-validation\src\components\input\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (6:3):

Can you please check your import statement? It should be something like this:

import Input from "react-validation/build/input";

Answer 2

1st proposal

As it is suggested in this thread, run bundle exec rails webpacker:install:react. It will add that bit to the babel.config.js automatically. You will not need to manually do something.

. . . . . .

2st proposal

You should install @babel/preset-react as it is suggested in the error message.

Using npm:

npm install --save-dev @babel/preset-react

or using yarn:

yarn add @babel/preset-react --dev

See our website @babel/preset-react for more information. Ref: https://github.com/babel/babel/tree/master/packages/babel-preset-react

. . . . . .

3st proposal

Alternatively, if the first proposal doesn't work, as it is suggested in this thread, you should update babel.config.js, so it will work. So update the file as it is suggested:

  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    ['@babel/preset-react', {targets: {node: 'current'}}] // add this
  ]
};