使用create-react-app+yarn创建项目后引入react-select报错，如何解决？

嗨，这个问题我之前也碰到过！根源在于你直接引入了react-select源码目录下的Select.js，而Create React App（CRA）的默认编译配置不会处理node_modules里的Flow类型语法，所以才会抛出这个Unexpected token的错误——毕竟type是Flow专属的语法，浏览器和默认的Babel配置根本不认识它。

下面给你两个解决方案，按需选择：

方案一：使用预编译的正式版本（推荐） #

这是最简单也最稳妥的办法，直接把你的引入语句改成官方推荐的方式：

import Select from "react-select";

react-select在发布的时候已经把源码编译成了标准的JavaScript（去掉了Flow语法），直接引入包名就会使用这个预编译好的版本，完全不需要你去处理它的源码文件。

方案二：如果必须修改react-select源码（不推荐） #

如果你确实需要定制react-select的源码逻辑，那得让CRA去转译这个包的代码，但CRA默认不允许修改webpack配置，所以得先执行不可逆的eject操作：

1. 运行命令：yarn eject（执行前记得备份项目，因为这个操作会把所有隐藏的配置文件暴露出来，之后没法恢复）
2. 打开项目根目录下的config/webpack.config.js，找到处理JavaScript的规则块（一般在module.rules里的oneOf数组中）
3. 在这个规则的include数组里，添加path.resolve(__dirname, '../node_modules/react-select')，让Babel把react-select的源码也纳入转译范围，这样就能处理Flow的type语法了。

不过再次强调，除非真的有必要，否则别用方案二，eject之后项目的配置维护成本会高很多，而且官方的后续更新也没法直接享用了。

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