storybook-axios

library2.2.1jsnpmunverified

A Storybook addon that enables inspection and documentation of Axios network requests within Storybook stories. Current stable version is 2.2.1, with a moderate release cadence of roughly monthly patches. It integrates seamlessly with Storybook 10.x and Axios 1.x. Unlike generic network logging addons, this one is tightly coupled with Axios, providing request/response previews, headers, and timing directly in the Storybook panel. Requires React 18+ and Storybook 10.1.4+. It is ESM-only and does not support CommonJS.

testing

npm install storybook-axios

package ↗

INSTALL

IMPORT

SIG · STORYBOOK-AXIOS

storybook-axios

testingjavascriptv2.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

withAxios

✓ import { withAxios } from 'storybook-axios'

✗ const withAxios = require('storybook-axios')

ESM-only; CJS require will fail in Node ESM context.

AxiosInspector

✓ import { AxiosInspector } from 'storybook-axios'

✗ import AxiosInspector from 'storybook-axios'

Named export, not default.

PARAM_KEY

✓ import { PARAM_KEY } from 'storybook-axios'

✗ import { paramKey } from 'storybook-axios'

Constant export; naming is all caps.

Configure Storybook addon and use decorator to inspect Axios calls in stories.

// .storybook/main.ts import type { StorybookConfig } from '@storybook/nextjs'; import { withAxios } from 'storybook-axios'; const config: StorybookConfig = { stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ '@storybook/addon-essentials', 'storybook-axios' ], framework: '@storybook/nextjs', }; export default config; // In a story file (e.g., Button.stories.tsx) import { AxiosInspector } from 'storybook-axios'; import type { Meta, StoryObj } from '@storybook/react'; import axios from 'axios'; export default { title: 'Example/Button', component: Button, decorators: [AxiosInspector], } as Meta; export const WithAxiosCall: StoryObj = { render: () => { const handler = async () => { await axios.get('https://api.example.com/data'); }; return <button onClick={handler}>Fetch Data</button>; }, };

Debug

Known issues

breakingRequires Storybook 10.1.4+ (not compatible with Storybook 9.x or earlier).

fix

Upgrade Storybook to v10.1.4 or later.

affects: <2.0

breakingESM-only package; does not support CommonJS require().

fix

Use import syntax and ensure your project is ESM.

affects: >=2.0

deprecatedOlder versions used a different decorator name 'AxiosInterceptor' which has been renamed to 'AxiosInspector'.

fix

Replace 'AxiosInterceptor' with 'AxiosInspector' in imports.

affects: <2.0

gotchaAddon will only intercept Axios calls made during the story lifecycle; calls outside (e.g., in global setup) are not captured.

fix

Ensure Axios calls are made within the story's render function or decorator context.

affects: >=1.0

gotchaAxios version must be exactly ^1.12.2 per peer dependency; mismatched versions may cause silent failures.

fix

Install axios@1.12.2 in your project.

affects: >=2.0

Errors

Common errors & fixes

Cannot find module 'storybook-axios' or its corresponding type declarations.

Package is ESM-only and may not be resolved correctly in a CJS project.

fix

Set 'type': 'module' in your package.json or use a dynamic import.

TypeError: (0 , storybook_axios.withAxios) is not a function

Using require() or incorrect import syntax.

fix

Use import { withAxios } from 'storybook-axios' instead of require.

Storybook addon 'storybook-axios' failed to register: Invalid addon configuration.

Addon expects to be registered in addons array; missing or misconfigured.

fix

Add 'storybook-axios' to the addons array in .storybook/main.(js|ts|cjs|mjs).

Upgrade

Version history

2.2.1latest on npm

Audit

Dependencies

axiosrequiredPeer dependency: used for intercepting and displaying Axios requests

reactrequiredPeer dependency: required for rendering addon UI components

storybookrequiredPeer dependency: addon requires Storybook framework

Agent activity

8 hits · last 30 days

node

Resources

packagestorybook-axios ↗