基于create-react-app的项目引入Flow语法React库报错求助

别担心，作为JavaScript和React新手遇到这种依赖库的语法兼容问题太正常了，我来帮你一步步搞定，不用再手动维护本地源码版本！

问题根源 #

你遇到的语法错误，是因为react-resize-aware库使用了Flow的类型注解（比如代码里的target: ?HTMLElement），而create-react-app默认的Babel配置不会转译node_modules目录下的文件，导致浏览器无法识别这种非标准JavaScript语法。

具体解决方案 #

方案1：让React-scripts转译指定依赖库（推荐） #

我们可以借助react-app-rewired和customize-cra来修改create-react-app的默认配置，让Babel处理react-resize-aware的源码：

1. 首先安装开发依赖：

npm install --save-dev react-app-rewired customize-cra

2. 在项目根目录创建config-overrides.js文件，添加以下内容：

const { override, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  // 让Babel处理我们的源码和指定的依赖库
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/react-resize-aware'),
  ])
);

3. 修改package.json里的scripts命令，替换成react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 重启你的开发服务器：

npm start

方案2：直接导入库的预编译版本 #

有些库会在dist或lib目录提供已经编译好的无Flow语法的版本，你可以尝试手动导入这个版本：

import useResizeAware from 'react-resize-aware/dist/useResizeAware';

如果这个路径不存在，你可以去node_modules/react-resize-aware目录下找一下编译后的文件，替换对应的导入路径即可。

方案3：确认Flow配置（如果仍然报错） #

如果你已经添加了Flow但问题依旧，确保项目根目录有.flowconfig文件，并且Babel配置包含了babel-plugin-transform-flow-strip-types插件。不过因为create-react-app默认隐藏了配置，这个方案需要结合方案1的react-app-rewired来添加插件，或者直接使用方案1更简单。

总结 #

优先尝试方案1或方案2，这样你就能正常使用npm install安装的库，不用再手动维护本地源码版本了。

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