issue with local addon after upgrading to storybook 10.

[jeffnorris1]

I have react-vite setup and upgraded from storybook 9 to storybook 10. I have an addon that just adds a button which opens an external link.

The addon is a single file:
apps/client/.storybook/addons/ReportIssueAddon/manager.tsx

import React from 'react';
import { addons, types } from 'storybook/manager-api';
import { Button } from 'storybook/internal/components';

const params = {
  title: 'Issue with storybook',
  description: 'Please describe the issue you are experiencing and add a screenshot if applicable.',
};
const stringParams = new URLSearchParams(params).toString();

addons.register('report-issue-addon', () => {
  addons.add('report-issue-addon/toolbar', {
    title: 'Report an Issue',
    type: types.TOOL,
    render: () => (
      <Button
        title="Report an Issue"
        onClick={() => {
          window.open(`https://linear.app/companyName/team/FE/new?${stringParams}`, '_blank');
        }}
      >
        Report an Issue
      </Button>
    ),
  });
});

When migrating to storybook 10. I changed the addon reference from './addons/ReportIssueAddon' to path.resolve(__dirname, './addons/ReportIssueAddon/manager.tsx')

When I run storybook. I get a react compilation error.

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./.storybook/addons/ReportIssueAddon/manager.tsx.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

Error: Transform failed with 1 error:
<stdin>:17:8: ERROR: Expected ">" but found "title"
    at failureErrorWithLog (/Users/jnorris/repos/repo/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1467:15)
    at /Users/jnorris/repos/repo/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:736:50
    at responseCallbacks.<computed> (/Users/jnorris/repos/repo/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:603:9)
    at handleIncomingPacket (/Users/jnorris/repos/repo/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:658:12)
    at Socket.readFromStdout (/Users/jnorris/repos/repo/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:581:7)
    at Socket.emit (node:events:519:28)
    at addChunk (node:internal/streams/readable:561:12)
    at readableAddChunkPushByteMode (node:internal/streams/readable:512:3)
    at Readable.push (node:internal/streams/readable:392:5)
    at Pipe.onStreamRead (node:internal/stream_base_commons:189:23)

Can someone help please?

[dosubot[bot]]

Hi @jeffnorris1! I'm Dosu and I’m helping the storybook team.

Storybook 10 no longer supports referencing local addon entry points using direct paths to .tsx files in the addons array. This is why you're seeing a JSX compilation error—Storybook is trying to load your TSX file as plain JS, which fails with esbuild. Instead, you should reference the addon by its directory, and that directory should contain an index.js (or index.ts) entry point that imports your manager code. If your addon is written in TSX, you'll need a build step to transpile it to JS before Storybook can load it. Direct loading of raw TSX files is not supported out-of-the-box in Storybook 10, especially with Vite (discussion).

To fix this:

1. Move your addon code into a folder (e.g., ./addons/ReportIssueAddon/).
2. Add an index.js (or index.ts) in that folder that imports and re-exports your manager logic.
3. Reference the folder (not the file) in your addons array: ./addons/ReportIssueAddon.
4. If your code is in TSX, add a build step to output JS before running Storybook.

If you want to keep things simple for a small tool, you can also put your toolbar code directly in .storybook/manager.ts instead of a custom addon folder.

Let me know if you need an example folder structure or build script!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[dosubot[bot]]

Here’s how you can handle both approaches:

1. Example build step for transpiling your TSX addon to JS (using tsup):

• Install tsup if you don’t have it:
  npm install --save-dev tsup

• In your addon folder (e.g., .storybook/addons/ReportIssueAddon/), create a tsup.config.ts:

  import { defineConfig } from 'tsup';
  
  export default defineConfig({
    entry: ['manager.tsx'],
    format: ['cjs'],
    dts: false,
    clean: true,
    outDir: 'dist',
  });

• Add a build script to your package.json:

  {
    "scripts": {
      "build:report-issue-addon": "tsup"
    }
  }

• Run the build:
  npm run build:report-issue-addon

• Your folder should look like:

  .storybook/
    addons/
      ReportIssueAddon/
        manager.tsx
        dist/
          manager.js
        package.json
        tsup.config.ts
        index.js
  

• In index.js, export your built manager:

  module.exports = require('./dist/manager.js');

• Reference the addon in your Storybook config as './addons/ReportIssueAddon' (not the TSX file).

More info: Storybook Addon Build System

---

2. Example of putting your toolbar code directly in .storybook/manager.ts:

import React from 'react';
import { addons, types } from '@storybook/manager-api';
import { IconButton } from '@storybook/components';
import { LinkIcon } from '@storybook/icons';

const params = {
  title: 'Issue with storybook',
  description: 'Please describe the issue you are experiencing and add a screenshot if applicable.',
};
const stringParams = new URLSearchParams(params).toString();

addons.register('report-issue-addon', () => {
  addons.add('report-issue-addon/toolbar', {
    title: 'Report an Issue',
    type: types.TOOL,
    render: () => (
      <IconButton
        title="Report an Issue"
        onClick={() => {
          window.open(`https://linear.app/companyName/team/FE/new?${stringParams}`, '_blank');
        }}
      >
        <LinkIcon />
      </IconButton>
    ),
  });
});

This approach is simpler for small customizations and avoids the need for a separate build step.
If you want a text button instead of an icon, you can use a plain <span> or similar inside the IconButton.

Let me know if you want a more detailed folder structure or have questions about either approach!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[jeffnorris1]

@dosu none of that looks like. The documentation you are providing for step 4 is for published addons, not local addons.

The sample of .storybook/manager.ts has outdated imports and tsx inside a .ts file.

Can I talk to a human?

[dosubot[bot]]

Thanks for your feedback—you're right, the previous examples and docs are focused on published addons, and the .storybook/manager.ts sample I gave had outdated imports and TSX in a .ts file, which isn't best practice.

Storybook 10 has made local addon workflows much harder: referencing local TSX files in the addons array is no longer supported due to stricter addon resolution and ESM-only requirements. There are no reliable workarounds for local, unpublished addons in v10—this is a known issue and is called out in the migration guide and recent discussions (details). The only stable options are to package your addon as an npm module or move your toolbar logic into .storybook/manager.tsx or preview.tsx.

For small toolbar customizations, the current best practice is to use a .storybook/manager.tsx file (note the .tsx extension) with up-to-date imports from @storybook/manager-api and @storybook/components. Here’s a minimal, current example:

// .storybook/manager.tsx
import React from 'react';
import { addons, types } from '@storybook/manager-api';
import { IconButton } from '@storybook/components';
import { LinkIcon } from '@storybook/icons';

const params = {
  title: 'Issue with storybook',
  description: 'Please describe the issue you are experiencing and add a screenshot if applicable.',
};
const stringParams = new URLSearchParams(params).toString();

addons.register('report-issue-addon', () => {
  addons.add('report-issue-addon/toolbar', {
    title: 'Report an Issue',
    type: types.TOOL,
    render: () => (
      <IconButton
        title="Report an Issue"
        onClick={() => {
          window.open(`https://linear.app/companyName/team/FE/new?${stringParams}`, '_blank');
        }}
      >
        <LinkIcon />
      </IconButton>
    ),
  });
});

If you want to escalate this for a human maintainer, let me know and I’ll flag it for review.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[jeffnorris1]

For posterity sake, I got this to work by importing the addon directly into the manager.ts file and removing the reference to it in the addons array. This feels like a hack to have local addons and package addons not work similarly. It feels like it is a step backwards from how local addons worked with storybook before this "upgrade".

import { addons } from 'storybook/manager-api';
import './addons/ReportIssueAddon/manager.tsx';

addons.setConfig({
  ....
});