[Bug]: TypeError: importers[path] is not a function occurred in monorepo after migrating to v7

[emewjin]

Describe the bug

When using Storybook version 6.5.15 in monorepo with vite, there were no issues. But after migrating to version 7, an error occurred.

TypeError: importers[path] is not a function
    at StoryStore.importFn (http://localhost:6007/virtual:/@storybook/builder-vite/storybook-stories.js:6:31)
    at StoryStore.loadCSFFileByStoryId (http://localhost:6007/sb-preview/runtime.mjs:40:8376)
    at StoryStore.loadStory (http://localhost:6007/sb-preview/runtime.mjs:40:9563)
    at async http://localhost:6007/sb-preview/runtime.mjs:74:9003
    at async StoryRender.runPhase (http://localhost:6007/sb-preview/runtime.mjs:74:8764)
    at async StoryRender.prepare (http://localhost:6007/sb-preview/runtime.mjs:74:8922)
    at async PreviewWeb.renderSelection (http://localhost:6007/sb-preview/runtime.mjs:94:3120)
    at async PreviewWeb.selectSpecifiedStory (http://localhost:6007/sb-preview/runtime.mjs:94:247)

To Reproduce

clone https://github.com/emewjin/sb-bug-reproduce-project and following README steps

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Firefox: 107.0
    Safari: 16.3
  npmPackages:
    @storybook/addon-actions: ^7.0.4 => 7.0.4 
    @storybook/addon-backgrounds: ^7.0.4 => 7.0.4 
    @storybook/addon-controls: ^7.0.4 => 7.0.4 
    @storybook/addon-docs: ^7.0.4 => 7.0.4 
    @storybook/addon-interactions: ^7.0.4 => 7.0.4 
    @storybook/addon-links: ^7.0.4 => 7.0.4 
    @storybook/addon-mdx-gfm: ^7.0.4 => 7.0.4 
    @storybook/addon-measure: ^7.0.4 => 7.0.4 
    @storybook/addon-outline: ^7.0.4 => 7.0.4 
    @storybook/addon-toolbars: ^7.0.4 => 7.0.4 
    @storybook/addon-viewport: ^7.0.4 => 7.0.4 
    @storybook/mdx2-csf: ^1.0.0 => 1.0.0 
    @storybook/react: ^7.0.4 => 7.0.4 
    @storybook/react-vite: ^7.0.4 => 7.0.4 
    @storybook/testing-library: ^0.1.0 => 0.1.0 
    @storybook/theming: ^7.0.4 => 7.0.4

Additional context

No response

[marr]

I'm also seeing this. fwiw, when I use the default glob in main.js there are no issues: ../stories/**/*.stories.@(js|jsx|ts|tsx)' stories work.

however if I use my slightly complex glob: '../!((**)?node_modules)(**)?/*.stories.js' the stories are found, but present the error in this ticket.

[antoniocodefam]

I am experiencing the same, not sure if you have the same config as I do since you haven't provided your main.ts, but it's worth trying 🤷‍♂️

I had a config in main.ts stories: [ "../src/**/*.(story|stories).mdx", "../src/**/*.(story|stories).@(js|jsx|ts|tsx)", ],

Try removing any other naming convention except stories, and renaming all the files accordingly, after that, everything works for me!

[jcrengifoa]

I am working in a monorepo and I got this bug when I tried changing the original paths to include not only the src folder but also the packages folder:

main.ts /(src|packages)/ instead of /src/

I suppose the expected thing to do when you try to match more than one folder is to duplicate the path. I did it and it worked.

Here you have the ones I'm currently using, it works perfectly with "storybook": "^7.0.7": stories: [ '../packages/**/*.mdx', '../packages/**/*.stories.@(js|jsx|ts|tsx)' ],

Hope it works for you too.

[AIA-UnKNOWN]

actually what worked for was just to restart/re-run the npm run storybook and it fixed the issue

[rinkaaan]

@AIA-UnKNOWN worked for me!!!

[okonet]

I have this problem trying to migrate from build-webpack to build-vite. I'm using Storybook 7.4.5. The same error was with 7.1.0-alpha....

In dev tools I see this:

const importers = {

    };

    export async function importFn(path) {
        return importers[path]();
    };importFn.__docgenInfo={"description":"","methods":[],"displayName":"importFn"}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIiJdLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSJ9

although the sidebar is populated with stories and MDX docs.

I tried following the advice with changing stories but that didn't help. Here is my latest attempt:

stories: ['../../../../packages/docs/**/*.(md|mdx|stories.tsx)'],.

Previously we used this format:

  stories: [
    {
      directory: '../../../docs',
      files: '*.(md|mdx)',
    },

It's worth noting I'm using mono repo setup.

[tannera]

The files path glob is very sensitive, so the following works:

'*.{md,mdx}', but the above *.(md|mdx) does NOT.

[BarrBozzO]

Experience same issue only on MacOS. Tried existing and clean vite project - same issue.

But it is working fine on linux.

[esquevin]

This issue keeps happening on my mac. forcing me to restart storybook :/

I especially notice it when creating files and renaming them. Or when changing branches which results in a bunch of stories being removed / added.

Coworkers are starting to no longer use storybook "Because it never works". I've been the strongest advocate for it at my place for years, and it really pains me when I understand their struggle and kinda understand that it's no longer a tool that speeds them up.

If anyone has pointer regarding where the root cause might be, I'm willing to try to take a stab at it.

[alxdw]

A similar issue afflicted me on Storybook v7.5.2, with Vite 4.5.0 running on Mac (and using nx for monorepo). Utilising the default file name glob pattern but starting a few directories higher in the tree.

I’m skeptical the root cause is the same as the original issue, but I solved my problem by removing the dashes from my folder names.

Hope it helps someone in the same position.

[KonghaYao]

I solve this problem when add a @ in config.stories. storybook v7.6.3

+ stories: ['../packages/lots-ui/lots/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
- stories: ['../packages/lots-ui/lots/**/*.stories.(js|jsx|mjs|ts|tsx)'],

[esquevin]

~🤔 What does the @ does in a glob?~

Found it: https://www.npmjs.com/package/glob#glob-primer

@(pattern|pat*|pat?erN) Matches exactly one of the patterns provided. May not contain / characters.

[VictorJSV]

@KonghaYao worked for me!. just add @

[jgcmarins]

I fixed that with this: main.ts

/* eslint-disable storybook/no-uninstalled-addons */

import { resolve } from 'path';

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

// inspired by https://github.com/chakra-ui/chakra-ui/blob/77cfa68fb9399d098c3ed71bc8183930e3789dc3/.storybook/main.js
const getStories = (pkg: string) => resolve(__dirname, `../../${pkg}/src/**/**/*.stories.tsx`);

const config: StorybookConfig = {
  stories: [
    getStories('package1'),
    getStories('package2'),
    getStories('package3'),
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y',
  ],
  framework: '@storybook/react-vite',
  docs: {
    autodocs: true,
  },
  staticDirs: ['../public'],
};

export default config;

[rafaelcavalcante]

I solve this problem when add a @ in config.stories. storybook v7.6.3

+ stories: ['../packages/lots-ui/lots/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
- stories: ['../packages/lots-ui/lots/**/*.stories.(js|jsx|mjs|ts|tsx)'],

This worked for me! Thaks @KonghaYao! 👍