ReactJS中无法导入Axios 1.x.x：import语句报错求助

问题描述 #

在最简React项目中导入Axios后，控制台始终报错：
bundle.js:45314 Uncaught SyntaxError: Cannot use import statement outside a module
页面变为空白，无法正常显示。

复现步骤 #

1. 创建基础项目并安装依赖：

npx create-react-app my-app

# 进入my-app目录后执行：
yarn install
yarn add axios

（额外重复执行过yarn install）

2. 在默认的App.js中添加Axios导入：

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios"; // 引发问题的代码

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

已尝试的无效解决手段 #

• 在index.html中添加<script type="text/javascript" type="module" src="./index.js"></script>
• 在package.json中添加"type": "module"配置
• 将React版本从18降级到17（修改package.json中react和react-dom版本为"^17.0.0"）

2022-11-18 更新：

• 问题仅存在于Axios 1.x.x版本，降级到0.x.x版本（如0.27.2）可临时解决。
• 多数相关问题讨论集中在Jest测试场景，但这些方案均无法解决当前项目的问题。
• 已知Axios 1.x.x版本将模块类型从CommonJS改为ECMAScript，目前可以选择降级或改用原生fetch，但希望明确问题根源，并确认是否有开发者成功在React项目中正常使用Axios 1.x.x。

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