React运行react-fancybox报JSX实验语法未启用问题求解

API 探路者

2026-8-28

问题根因

你的项目是基于Create React App（CRA）脚手架搭建的，所用的react-scripts@2.1.3版本内置了完整的Babel、Webpack构建配置，默认规则下仅会编译src目录内的业务代码，跳过node_modules下的第三方依赖。你安装的react-fancybox@1.0.2是多年未维护的旧包，发布前未将源码中的JSX语法预编译为标准JavaScript，CRA的构建流程拿到该包源码时，不会对其应用JSX解析规则，直接抛出“experimental syntax 'jsx' isn't currently enabled”错误。
你之前手动新增.babelrc配置、单独安装Babel相关依赖不生效，是因为CRA默认在构建配置中写死了babelrc: false, configFile: false，会主动忽略外部自定义的Babel配置文件，完全使用内置规则编译。执行npm run dev报脚本缺失是因为CRA默认未配置dev命令，本地开发启动服务的正确命令就是npm start。

可行解决方案

按操作成本、维护性从高到低排序：

方案1：替换为正常维护的同类依赖（优先推荐）
react-fancybox已停止维护超过7年，完全不兼容React 18版本和新版CRA构建逻辑，强行适配后续还会出现其他兼容问题，建议直接替换：
1. 卸载旧依赖：npm uninstall react-fancybox
2. 安装官方维护的Fancybox组件：npm install @fancyapps/ui
3. 按文档在业务组件中引入使用即可，该依赖发布时已完成所有语法预编译，不会触发JSX解析错误，也不需要修改任何构建配置。
方案2：弹出CRA内置配置，修改Babel编译范围
如果必须使用react-fancybox，可以弹出CRA内置的构建配置，调整Babel的编译范围覆盖该依赖：
1. 项目根目录执行npm run eject，注意该操作不可逆，执行后所有Webpack、Babel配置文件会暴露到项目根目录，可直接修改。
2. 打开根目录下的webpack.config.js，找到匹配/\.(js|mjs|jsx|ts|tsx)$/的Babel loader规则，将原有的include: paths.appSrc配置修改为包含react-fancybox的路径：
```
include: [
  paths.appSrc,
  path.resolve(paths.appNodeModules, 'react-fancybox')
],
```
3. 删除之前手动新增的.babelrc配置文件和多余的Babel devDependencies，CRA内置的babel-preset-react-app已经包含完整的JSX解析能力，不需要额外安装配置。
4. 重新执行npm start即可正常启动。

方案3：无弹出修改构建配置（不想eject时可选）
如果不想执行eject操作破坏CRA的配置封装，可以用react-app-rewired工具在不弹出配置的前提下修改构建规则：

安装工具依赖：npm install react-app-rewired --save-dev

修改package.json中的scripts字段，将启动、构建、测试命令中的react-scripts替换为react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject",
  "server": "json-server --watch mysite.json --port 8000"
}

项目根目录新建config-overrides.js文件，写入配置调整Babel loader的编译范围：

const path = require('path');
module.exports = function override(config) {
  const oneOfRule = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
  const jsxLoader = oneOfRule.find(rule => rule.test?.toString().includes('js|mjs|jsx'));
  jsxLoader.include = [
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules/react-fancybox')
  ];
  return config;
}

清理之前手动加的自定义Babel配置和多余依赖，重新执行npm start即可。

内容的提问来源于stack exchange，提问作者Elham Bagheri