在Bun CLI创建的React应用中使用Axios报错，求解决方案

错误原因 #

你遇到的Cannot read properties of null (reading 'Symbol(CommonJSTransformed)')是当前Axios版本与Bun的CommonJS模块转换机制不兼容导致的运行时模块解析bug。

解决方案 #

方案1：降级Axios到兼容版本 #

安装Axios 1.6.0及以下版本（经测试该版本在Bun环境下稳定）：

bun add axios@1.6.0

方案2：使用Bun原生Fetch API #

Bun内置了与浏览器兼容的Fetch API，无需额外安装包，直接使用：

import React, { useEffect } from "react";
import { FaBeer } from "react-icons/fa";

export default function UsersList() {
  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const data = await res.json();
      console.log(data);
    };
    fetchData();
  }, [])
  return (
    <div>
      <h3>
        {" "}
        Lets go for a <FaBeer />?{" "}
      </h3>
    </div>
  );
}

方案3：使用其他兼容Bun的HTTP库 #

• ky：轻量级ESM原生HTTP客户端，适配Bun环境
  安装：

  bun add ky
  

  使用示例：

  import React, { useEffect } from "react";
  import { FaBeer } from "react-icons/fa";
  import ky from 'ky';
  
  export default function UsersList() {
    useEffect(() => {
      const fetchData = async () => {
        const data = await ky.get('https://jsonplaceholder.typicode.com/todos/1').json();
        console.log(data);
      };
      fetchData();
    }, [])
    return (
      <div>
        <h3>
          {" "}
          Lets go for a <FaBeer />?{" "}
        </h3>
      </div>
    );
  }
  

额外注意点 #

你的原代码中axios.get是异步操作，直接赋值给res会得到Promise对象，需要用async/await或者.then()处理，修正后的Axios用法（兼容版本下）：

useEffect(() => {
  const fetchData = async () => {
    const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    console.log(res.data);
  };
  fetchData();
}, [])

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