importers[path] is not a function error - while adding a new story when storybook config is in a sub-directory

[avinashs24]

Summary

I have my folder structure as below for remix-vite project. I wanted to keep the storybook config files isolated in a sub-directory and to not intertwine with my existing core app configs.

- app/
- storybook/
   - .storybook/
       - main.ts
       - preview.ts
   - package.json
   - vite.config.ts
- vite.config.ts
- package.json

I have the stories glob pattern in main.ts as - "../../app/**/*.stories.tsx".
In this setup, when I add a new component from UI using the Add button, I get the below error immediately. However, the story loads properly when I restart the storybook server. Also, I observed that when I maintain the .storybook folder in the default conventional way of having it alongside app folder and have the stories glob pattern as "../app/**/*.stories.tsx", I do not face this issue.

Can anyone help to resolve this to render the story in this sub-directory setup without restarting the server? Is there some config related to HMR we need to update?

importers[path] is not a function

Additional information

main.ts

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: [
    "../../app/**/*.stories.tsx",
  ], 
  addons: [
    "@chromatic-com/storybook",
    "@storybook/addon-docs",
    "@storybook/addon-onboarding",
    "@storybook/addon-a11y",
    "@storybook/addon-vitest",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
};
export default config;

Create a reproduction

No response

[dosubot[bot]]

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

This issue happens because Vite's file watcher and internal importers map don't always handle new files outside the initial scope when your Storybook config is in a sub-directory and your stories glob traverses up directories. That's why you see the importers[path] is not a function error until you restart the server.

A reliable workaround is to add a minimal vite.config.ts inside your .storybook folder (for example, just with the React plugin), and then reference it in your main.ts using the framework.options.builder.viteConfigPath option. This isolates Storybook's Vite config from your root config, which can interfere with HMR and module imports in this setup. Example:

.storybook/vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

.storybook/main.ts

framework: {
  name: '@storybook/react-vite',
  options: {
    builder: {
      viteConfigPath: '.storybook/vite.config',
    },
  },
},

This approach has resolved the same error for others using similar setups [discussion].

If you still have issues, double-check that your stories glob is correct and that your .storybook config isn't picking up plugins or settings from the root Vite config that might cause conflicts. Recent Storybook releases have improved HMR, but this specific edge case with sub-directory configs and cross-directory globs still requires this workaround [discussion].

To reply, just mention @dosu.

---

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

[avinashs24]

Tried this. It doesn't resolve the issue for me.

[dosubot[bot]]

This error is caused by a mismatch in how Storybook's Vite builder generates and looks up story import paths when your config is in a sub-directory and your stories glob references parent directories. The backend uses relative paths from process.cwd() to your story files, but the frontend expects a different normalized format, so new stories added via HMR don't match the importers map until you restart the server. This is a known architectural limitation in Storybook's path handling with Vite [source].

You can try these workarounds:

• Use absolute paths (with Node's path.resolve) in your stories array in main.ts to help ensure consistent importer keys [source].
• Split your stories array into multiple explicit entries (one per directory) instead of a single complex glob [source].
• Standardize your story file naming to only use the stories suffix and use the @ pattern in your glob (e.g. *.stories.@(js|jsx|ts|tsx)) [source].
• If possible, move your .storybook config to the project root or align your configDir and story paths so they are in the same directory tree.

If none of these work, this limitation may require a restart until Storybook improves path normalization for sub-directory configs. If you can share your Storybook version and any custom Vite plugins, I can check for version-specific fixes or incompatibilities.

To reply, just mention @dosu.

---

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

[avinashs24]

Ended up moving .storybook config to the project root