克隆React项目npm install后启动出现导入错误求助

1. 修正src/util.js中的导入语句 #

打开报错的src/util.js第一行，检查是否使用了绝对路径导入react-refresh/runtime.js，比如：

import '/home/react-labs/movies/node_modules/react-refresh/runtime.js'

这种写法会触发Create React App（CRA）对src/目录外导入的限制，改成直接通过包名导入即可：

import 'react-refresh/runtime'

2. 清除缓存并重新启动项目 #

CRA的缓存可能导致环境变量配置不生效，执行以下命令清理缓存后重启：

rm -rf node_modules/.cache
npm start

如果问题依旧，尝试完全重置依赖：

rm -rf node_modules package-lock.json
npm install
npm start

3. 检查自定义Webpack配置（若项目已eject或使用react-app-rewired） #

如果项目不是纯CRA模板，而是修改过Webpack配置，需要调整规则允许导入react-refresh的文件：

• 打开Webpack配置文件（如webpack.config.js或config-overrides.js）
• 在JS/JSX文件的处理规则中，添加对react-refresh目录的例外：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          include: path.resolve(__dirname, 'src'),
          exclude: /node_modules\/react-refresh/, // 添加此行
          use: ['babel-loader'],
        },
      ],
    },
  };
  

4. 确认FAST_REFRESH配置生效 #

确保.env文件放在项目根目录（而非src/内），文件内容为：

FAST_REFRESH=false

保存后关闭终端，重新打开并执行npm start，避免环境变量未被读取。

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