如何在create-react-app项目中无需npm run eject即可使用JSX文件？

作为React新手碰到这种问题真的挺闹心的——想改用.jsx文件规范组件代码，结果要么导入报错，要么在.js里写JSX被格式化工具搞乱语法，还不敢随便用npm run eject（毕竟eject后配置全暴露，后续维护太麻烦）。别着急，咱们一步步解决：

先搞定导入报错的核心问题 #

你提到的报错Could not import XXX file from filename.js，其实是个很常见的小坑：你在开发服务器运行的时候把文件从.js改成了.jsx，但服务器还在缓存旧的扩展名规则，只会去查找.js文件，自然找不到对应的.jsx文件。

解决方法超简单：

• 先停掉当前运行的开发服务器（按Ctrl+C终止npm start进程）
• 重新执行npm start启动服务器

重启之后，服务器会重新识别项目里的文件扩展名，再导入.jsx文件就不会报错了。

顺便解决JSX格式化混乱的问题 #

既然现在能正常用.jsx文件了，建议你把所有包含JSX的组件代码都迁移到.jsx文件里：

• 像Prettier这类格式化工具，会自动识别.jsx文件类型，按照JSX的语法规则来格式化代码，再也不会出现代码乱掉、语法报错的情况
• 统一用.jsx扩展名存组件，项目结构也会更清晰，后续维护或者和别人协作都更方便

为啥不推荐用npm run eject？ #

你担心eject的弊端完全没错：npm run eject会把Create React App封装好的Webpack、Babel等配置全部暴露出来，之后这些配置都得你自己维护，不仅增加了工作量，还没法再通过官方的react-scripts更新获取新功能和bug修复。而咱们用重启服务器的方法，完全不需要碰底层配置，安全又省心。

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