Svelte中使用axios v0.22.0出现循环依赖错误求助

I’ve run into this exact issue before—axios v0.22.0 introduced internal module restructuring that triggers Rollup’s circular dependency warnings, even though the code itself works perfectly fine. Here are a few reliable fixes you can use:

Option 1: Ignore the Axios-Specific Circular Dependency Warning #

Since this loop is an internal implementation detail of axios and doesn’t break functionality, you can configure Rollup to suppress only these warnings while keeping other important alerts enabled. Update your rollup.config.js with an onwarn handler:

export default {
  // ... your existing project config
  onwarn: (warning, warn) => {
    // Skip circular dependency warnings related to axios
    if (warning.code === 'CIRCULAR_DEPENDENCY' && warning.message.includes('axios')) {
      return;
    }
    // Pass through all other warnings
    warn(warning);
  }
};

Option 2: Use Axios’s Pre-built UMD Bundle #

Bypass Rollup’s module resolution entirely by importing axios’s pre-compiled UMD bundle. This avoids parsing the internal modules that create the circular reference.

Modify your component code to dynamically import the minified bundle:

<script>
import { onMount } from "svelte";
let events = [];
onMount(async () => {
    try {
        // Import the pre-built axios bundle
        const { default: axios } = await import('axios/dist/axios.min.js');
        const res = await axios.get("https://jsonplaceholder.typicode.com/todos/1");
        console.log(res);
        events = res.data;
    } catch (error) {
        console.log(error);
    }
});
</script>
<div>
    {JSON.stringify(events)}
</div>

Alternatively, you can add axios via CDN in your index.html and use window.axios directly in components—this works too, though it’s less modular.

Option 3: Temporary Downgrade (Quick Fix) #

If you don’t need features from v0.22.0 right away, downgrading to v0.21.4 (as you tested) eliminates the warning without any code changes:

npm install axios@0.21.4
# or
yarn add axios@0.21.4

Why This Happens #

Axios v0.22.0 restructured its internal module relationships between defaults.js and the xhr.js adapter, creating a circular reference that Rollup’s module detector flags. This is not a bug in your code, Svelte, or Rollup—it’s an internal change in axios’s codebase.

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