React：支持实验性语法“jsx”当前未启用
我已经编写了一个节点模块，但是当我尝试在使用 create-react-app 当我运行 react-scripts start 或 react-scripts build 时，我收到此错误：
ERROR in ./node_modules/@xxx/react-file-input/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/c/Users/xxx/file-picker-demo/node_modules/@xxx/react-file-input/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (40:11):
38 | if (maxFileSize && maxFileSize > 0 && file.size > maxFileSize) {
39 | return (
> 40 | <span>{String.fromCharCode(9888)}</span>
| ^
41 | );
42 | }
43 | };
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.
如果我运行，则不会发生该错误将代码复制并粘贴到主应用程序中，然后不要导入节点模块。
是否有一些配置文件需要添加到我的节点模块中？我查看了此处并尝试添加 .babelrc、babel .config.js、webpack.config.js 添加到我的节点模块，但它们都没有使错误消失。我该如何解决这个问题？
更多详细信息：我正在使用 react-scripts 5.0.0。我的项目中没有任何 babel 或 webpack 配置文件（create-react-app 不会生成任何文件）。我知道 react-scripts 有一个它使用的 babel 和 webpack 的内部配置。
I have written a node module but when I try to use it in a react app created using create-react-app I get this error when I run react-scripts start or react-scripts build:
ERROR in ./node_modules/@xxx/react-file-input/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/c/Users/xxx/file-picker-demo/node_modules/@xxx/react-file-input/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (40:11):
38 | if (maxFileSize && maxFileSize > 0 && file.size > maxFileSize) {
39 | return (
> 40 | <span>{String.fromCharCode(9888)}</span>
| ^
41 | );
42 | }
43 | };
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.
The error does NOT happen if I copy and paste the code into the main application and do not import the node module.
Is there some config file that I need to add to my node module? I looked here and tried adding .babelrc, babel.config.js, webpack.config.js to my node module and none of them makes the error go away. How can I fix this?
Further details: I am using react-scripts 5.0.0. I don't have any babel or webpack config files in my project (create-react-app does not generate any). I understand react-scripts has an internal configuration for babel and webpack that it uses.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
JSX 必须通过 Babel 进行编译，将其转换为浏览器可以理解的形式。 React 对主应用程序中的 JSX 文件进行此编译，但不会处理主应用程序依赖项中的 JSX 文件。因此，唯一的解决方案是使用 Babel 以及 webpack 或 rollup 构建节点模块。请参阅以下链接了解如何执行此操作：
之后就可以导入模块了，就不会出现 错误。
JSX has to be compiled via Babel to convert it into a form that browsers can understand. React does this compilation for JSX files in the main application but does not process JSX files in the main app's dependencies. So the only solution is to build your node module using Babel and perhaps webpack or rollup. Refer below links for how to do that:
After that you can import the module and there will be no error.
您是否没有为您的 @xxx/react-file-input 模块使用构建（如 esm/cjs）？
我的声誉不足以写评论:)
Are you not using a build (like esm/ cjs) for your @xxx/react-file-input module?
My reputation is not enough to write a comment :)