Javascript 重要npm安装@babel/plugin transform react jsx不工作

你好，很抱歉有问题，但这是我的第一篇帖子。 我在npm启动期间遇到问题，这是一条消息：

/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.

我按照你的建议做了一些步骤，并尝试更新一些插件。 看起来带transform jsx的文件夹已正确安装在@babel中，但仍然存在相同的问题

我还将添加BusinessList文件：

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;

---

@babel/plugin transform-react jsx的
package.json
条目指向要安装的位置。这可能就是为什么你会得到“太多的符号链接”

您还有一个非常旧版本的
babel-plugin-transform-resact-jsx
，它与
@babel/core
版本不匹配


从
package.json
中删除
babel-plugin-transform-jsx
从
package.json
中的
devdependences
中删除
@babel/plugin transform-react jsx
请尝试重新安装，或按错误消息所示使用
能否发布
BusinessList.js
的整个组件文件？您是否手动设置了此依赖项？`“@babel/plugin-transform-react-jsx”：“文件：node_-modules/@babel/plugin-transform-react-jsx”`看起来很奇怪。另外，您是否正在使用CreateReact应用程序？这种设置可能非常困难，通常最简单的方法是让它自行创建react appI，现在还添加了BusinessList。现在我更新了npm的mor，正如您在json中看到的那个样，但问题仍然并没有解决。我做了两次这个项目！为了避免我的错误，但不起作用……我还想补充一点，我对旧应用程序也有同样的问题，因为我从头开始重新构建了那个项目，以确保这不是我的错误。
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;

                                                                                $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