重要的 npm install @babel/plugin-transform-react-jsx 不起作用

Question

Hello sorry for a problems, but its my first post. I have problem during npm start, and that is a message:

/Users/hp/Desktop/Wszystkie Projekty/ravenous/src/components/BusinessList/BusinessList.js
SyntaxError: C:\Users\hp\Desktop\Wszystkie Projekty\ravenous\src\components\BusinessList\BusinessList.js: Support for the experimental syntax 'jsx' isn't currently enabled (10:7):

   8 |   render(){
   9 |       return (
> 10 |       <div className="BusinessList">
     |       ^
  11 |       <Business />
  12 |       <Business />
  13 |       <Business />

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.

package.json

{
  "name": "ravenous",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "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/core": "^7.12.3",
    "@babel/plugin-syntax-jsx": "^7.12.1",
    "@babel/plugin-transform-react-jsx": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@testing-library/jest-dom": "^4.2.4",
    "react-script": "^2.0.5",
    "react-scripts": "3.4.4"
  }
}

I made steps,that you suggested, and also try to update some plugins. It looks like folder with transform-jsx is properly installed in @babel, but still the same problem...

I will add also BusinessList file:

import React from 'react';
import './BusinessList.css';
import Business from '../Business/Business';
import App from '/Users/hp/Desktop/Wszystkie Projekty/ravenous/src/components/App/App';

class BusinessList extends React.Component{
    
  render(){
      return (
      <div className="BusinessList">
      <Business />
      <Business />
      <Business />
      <Business />
      <Business />
      <Business />
      
    </div>
      );
      
      
  }
  
}

export default BusinessList;

Any ideas ? Also when im installing npm plugins it seems that i always have these message in terminal: 74 packages are looking for funding run npm fund for details :

                                                                                $npm fund
ravenous@0.1.0
+-- https://opencollective.com/babel
| `-- @babel/core@7.12.3, @babel/core@7.9.0
+-- https://github.com/sponsors/ljharb
| `-- resolve@1.18.1, is-core-module@2.0.0, resolve@1.15.0, object.assign@4.1.1, es-abstract@1.18.0-next.1, has-symbols@1.0.1, es-to-primitive@1.2.1, is-callable@1.2.2, is-regex@1.1.1, object-inspect@1.8.0, string.prototype.trimend@1.0.2, string.prototype.trimstart@1.0.2, is-date-object@1.0.2, is-symbol@1.0.3, object.values@1.1.1, util.promisify@1.0.1, es-abstract@1.17.7, object.getownpropertydescriptors@2.1.0, array-includes@3.1.1, array.prototype.flat@1.2.3, is-string@1.0.5, object.fromentries@2.0.2, string.prototype.matchall@4.0.2, regexp.prototype.flags@1.3.0, side-channel@1.0.3, deep-equal@1.1.1, object-is@1.1.3
+-- https://opencollective.com/core-js
| `-- core-js-pure@3.6.5, core-js-compat@3.6.5, core-js@3.6.5
+-- https://github.com/chalk/ansi-styles?sponsor=1
| `-- ansi-styles@4.3.0
+-- https://opencollective.com/typescript-eslint
| `-- @typescript-eslint/eslint-plugin@2.34.0, @typescript-eslint/parser@2.34.0, @typescript-eslint/experimental-utils@2.34.0, @typescript-eslint/typescript-estree@2.34.0
+-- https://opencollective.com/webpack
| `-- css-loader@3.4.2, sass-loader@8.0.2, terser-webpack-plugin@2.3.8, webpack@4.42.0, schema-utils@2.7.1
+-- https://opencollective.com/eslint
| `-- eslint@6.8.0
+-- https://tidelift.com/funding/github/npm/browserslist
| `-- browserslist@4.14.5, browserslist@4.10.0
+-- https://github.com/sponsors/fb55
| `-- css-what@3.4.2, domelementtype@2.0.2
+-- https://github.com/fb55/entities?sponsor=1
| `-- entities@2.1.0
+-- https://github.com/sponsors/mysticatea
| `-- regexpp@3.1.0, eslint-utils@2.1.0
+-- https://github.com/sponsors/isaacs
| `-- glob@7.1.6
+-- https://github.com/sponsors/sindresorhus
| `-- p-limit@2.3.0, parse-json@5.1.0, globals@12.4.0, strip-json-comments@3.1.1, ansi-escapes@4.3.1, figures@3.2.0, type-fest@0.11.0, onetime@5.1.2, open@7.3.0, is-docker@2.1.1, make-dir@3.1.0, pretty-bytes@5.4.1
+-- https://github.com/sponsors/epoberezkin
| `-- ajv@6.12.6
+-- https://opencollective.com/postcss/
| `-- postcss@7.0.35, postcss-load-config@2.1.2
+-- https://github.com/chalk/chalk?sponsor=1
| `-- chalk@4.1.0
+-- https://github.com/sponsors/feross
| `-- safe-buffer@5.2.1
+-- https://www.patreon.com/feross
| `-- safe-buffer@5.2.1
+-- https://feross.org/support
| `-- safe-buffer@5.2.1
+-- https://github.com/sponsors/wooorm
| `-- vendors@1.0.4
+-- https://tidelift.com/funding/github/npm/autoprefixer
| `-- autoprefixer@9.8.6
+-- https://github.com/sponsors/jonschlinkert
| `-- picomatch@2.2.2
+-- https://github.com/avajs/find-cache-dir?sponsor=1
| `-- find-cache-dir@3.3.1
+-- https://tidelift.com/subscription/pkg/npm-loglevel?utm_medium=referral&utm_source=npm_fund
| `-- loglevel@1.7.0
`-- https://github.com/sponsors/RubenVerborgh
  `-- follow-redirects@1.13.0

Answer 1

package.json entry for @babel/plugin-transform-react-jsx points to the place that is going to be installed. That's probably why you get "too many symbolic links".

You also have a very old version of babel-plugin-transform-react-jsx and it doesn't match with the @babel/core version.

• Remove babel-plugin-transform-react-jsx from package.json .
• Remove @babel/plugin-transform-react-jsx from devDependencies in package.json .
• Try reinstalling again, or use @babel/preset-react as the error message suggest.