React：当前未启用对实验性语法 'jsx' 的支持

Question

我已经编写了一个节点模块，但是当我尝试在使用 create-react-app 创建的 React 应用程序中使用它时，当我运行 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.

如果我将代码复制并粘贴到主应用程序中并且不导入节点模块，则不会发生错误。

是否有一些配置文件需要添加到我的节点模块中？我查看了 here 并尝试将 .babelrc、babel.config.js、webpack.config.js 添加到我的节点模块，其中 none 使错误消失。我该如何解决这个问题？

更多详情：我正在使用 react-scripts 5.0.0。我的项目中没有任何 babel 或 webpack 配置文件（create-react-app 不生成任何文件）。我知道 react-scripts 有它使用的 babel 和 webpack 的内部配置。

Answer 1

您没有为您的 @xxx/react-file-input 模块使用构建（如 esm/cjs）吗？

我的声望不够写评论:)

Answer 2

JSX 必须通过 Babel 编译才能将其转换为浏览器可以理解的形式。 React 对主应用程序中的 JSX 文件进行编译，但不处理主应用程序依赖项中的 JSX 文件。所以唯一的解决方案是使用 Babel 和 webpack 或 rollup 来构建你的节点模块。请参阅以下链接了解如何操作：

导入模块后就不会报错了

React：当前未启用对实验性语法 'jsx' 的支持

React: Support for the experimental syntax 'jsx' isn't currently enabled

reactjs

babeljs

babel-loader