React:当前未启用对实验性语法 'jsx' 的支持
React: Support for the experimental syntax 'jsx' isn't currently enabled
我已经编写了一个节点模块,但是当我尝试在使用 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 的内部配置。
您没有为您的 @xxx/react-file-input 模块使用构建(如 esm/cjs)吗?
我的声望不够写评论:)
JSX 必须通过 Babel 编译才能将其转换为浏览器可以理解的形式。 React 对主应用程序中的 JSX 文件进行编译,但不处理主应用程序依赖项中的 JSX 文件。所以唯一的解决方案是使用 Babel 和 webpack 或 rollup 来构建你的节点模块。请参阅以下链接了解如何操作:
- https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe
- https://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f
导入模块后就不会报错了
我已经编写了一个节点模块,但是当我尝试在使用 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 的内部配置。
您没有为您的 @xxx/react-file-input 模块使用构建(如 esm/cjs)吗?
我的声望不够写评论:)
JSX 必须通过 Babel 编译才能将其转换为浏览器可以理解的形式。 React 对主应用程序中的 JSX 文件进行编译,但不处理主应用程序依赖项中的 JSX 文件。所以唯一的解决方案是使用 Babel 和 webpack 或 rollup 来构建你的节点模块。请参阅以下链接了解如何操作:
- https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe
- https://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f
导入模块后就不会报错了