代码之家 › 专栏 › 技术社区 › morpheus

反应:目前尚未启用对实验语法“jsx”的支持

babel-loader babeljs reactjs

0

morpheus · 技术社区 · 3 年前

我已经编写了一个节点模块,但当我尝试在使用 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.

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

是否有一些配置文件需要添加到我的节点模块中?我看了 here 并尝试添加。巴贝尔,巴贝尔。配置。js,网页包。配置。js连接到我的节点模块,它们都不能消除错误。我该怎么解决这个问题?

更多细节:我正在使用 react-scripts 5.0.0 .我的项目中没有任何babel或webpack配置文件( create-react-app 不会产生任何错误)。我理解 反应脚本 有一个巴别塔的内部配置和它使用的网页包。

0 回复 | 直到 3 年前

1

0

Muhammad Ashraf 3 年前

您是否没有为您的应用程序使用构建(如esm/cjs) @xxx/react文件输入 单元

我的名声不足以写评论:)

2

0

morpheus 3 年前

JSX必须通过Babel编译,以将其转换为浏览器可以理解的形式。React会编译主应用程序中的JSX文件,但不会处理主应用程序依赖项中的JSX文件。因此,唯一的解决方案是使用Babel和webpack或rollup构建节点模块。请参阅以下链接了解如何做到这一点:

之后,您可以导入模块,并且不会出现错误。