Create React App出现Cannot use import statement outside a module报错怎么办

该报错是浏览器将项目JS文件识别为普通脚本而非ES模块导致，CRA内置的Babel、Webpack工具链默认会处理ESModule转译，无需手动配置"type": "module"，该配置仅作用于Node.js执行环境，添加后反而会干扰CRA的内部脚本运行，请先删除package.json中手动添加的"type": "module"配置。

操作步骤 #

• 第一步：清理本地编译缓存
  终止正在运行的npm start进程，执行以下命令删除缓存文件：

  # macOS/Linux 执行
  rm -rf node_modules/.cache build
  # Windows 执行
  rmdir /s /q node_modules\.cache build
  

• 第二步：恢复标准代码写法
  将index.js恢复为初始的ESModule导入写法，不要混用require和import语法：

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
  
  reportWebVitals();
  

• 第三步：清理浏览器缓存后重启项目
  打开Chrome开发者工具（按F12），右键点击地址栏左侧的刷新按钮，选择「清空缓存并硬性重新加载」，之后重新执行npm start启动项目即可。

如果以上操作后问题仍存在，可重装项目依赖后重试：

# macOS/Linux 执行
rm -rf node_modules package-lock.json
# Windows 执行
rmdir /s /q node_modules package-lock.json

npm install
npm start

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