使用React Scripts时react-idle-timer编译报错：Unexpected token求助

针对你遇到的问题，核心原因是react-idle-timer@5.7.2使用了React Scripts 4.0.3不支持的ES语法，而React Scripts默认不会转译node_modules里的包，导致编译失败。以下是几种可行的解决办法：

• 降级react-idle-timer到兼容版本
  选择一个和React Scripts 4.x兼容的旧版本，比如5.5.2，这个版本的代码语法更保守，能被Webpack 4正确转译。执行安装命令：

  npm install react-idle-timer@5.5.2
  # 或yarn用户执行
  yarn add react-idle-timer@5.5.2
  

• 升级React Scripts到5.x版本
  React Scripts 5.x基于Webpack 5，对新ES语法的支持更完善，能处理react-idle-timer@5.7.2的代码。升级命令：

  npm install react-scripts@latest
  # 或yarn用户执行
  yarn upgrade react-scripts@latest
  

  注意：React 17.0.2和React Scripts 5.x完全兼容，升级后如果出现其他依赖警告，根据提示调整即可。

• 手动配置转译react-idle-timer
  如果不想升级或降级依赖，可以用react-app-rewired修改Webpack配置，强制转译这个包：

  1. 安装依赖：

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

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

     const { override, babelInclude } = require('customize-cra');
     const path = require('path');
     
     module.exports = override(
       babelInclude([
         path.resolve('src'),
         path.resolve('node_modules/react-idle-timer')
       ])
     );
     

  3. 修改package.json里的scripts命令：

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

  4. 重新启动项目：npm start

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