[解決済み] React - Babel config の 'presets' セクションに @babel/preset-react (https://git.io/JfeDR) を追加して変換を可能にする。

質問

react-validationコンポーネントを使用したい Input を作成しました。というわけで、インポートした & をフォームの中で使っています。

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

を使用してアプリケーションを実行しようとすると npm start というエラーがコンソールに表示されます。

SyntaxError: E:\Projects-application-node_modules-react-validation-⑭components.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 } )} /> 

明示的にbabelの設定をしていない で、私の package.json ファイルには次のような内容が書かれています。

{
  "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"
  }
}

私のプロジェクト構成です。

++node_modules

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

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

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

他の設定は一切しておらず、create-react-appコマンドでプロジェクトを立ち上げていることがわかります。

解決方法は？

react-validationのInputはbuildフォルダの下にあります。しかし、このエラーからすると、Inputを正しくインポートしていないようです。 SyntaxError: E: \Projects sponsored parameters srccomponents \⑭実験用構文「jsx」のサポートは現在有効ではありません(6:3)。

importステートメントを確認していただけますか？このような感じになっているはずです。

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