#Having trouble with upgrade to v7. TypeError: importers[path] is not a function.

21 messages · Page 1 of 1 (latest)

gilded fog
#

I am trying to upgrade from a v6.5 storybook with vue2 and webpack 4. I tried using the migration and vue3-vite builder. When I try to load even the example stories/ files, the mdx files appear to load, but when I try loading the .stories.js files, they fail. The error stack is:

TypeError: importers[path] is not a function
    at importFn (http://localhost:6006/virtual:/@storybook/builder-vite/storybook-stories.js:6:31)
    at StoryStore.loadEntry (http://localhost:6006/sb-preview/runtime.mjs:40:10704)
    at async CsfDocsRender.prepare (http://localhost:6006/sb-preview/runtime.mjs:85:782)
    at async PreviewWeb.renderSelection (http://localhost:6006/sb-preview/runtime.mjs:94:3120)
#

in my main.js I have:

 stories: ['../storybook/**/*.mdx', '../!((**)?node_modules)(**)?/*.stories.js'],
ember magnet
#

This normally means that you have a mix of storybook versions

#

can you share your package.json dependencies? Or run npx sb@latest info?

gilded fog
#

Yes here is the info output:

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (10) x64 Apple M1 Pro
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.20.0/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Edge: 112.0.1722.39
    Firefox: 111.0.1
    Safari: 16.4
  npmPackages:
    @storybook/addon-essentials: ^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/preset-scss: ^1.0.3 => 1.0.3
    @storybook/vue3: ^7.0.4 => 7.0.4
    @storybook/vue3-vite: ^7.0.4 => 7.0.4
    @storybook/vue3-webpack5: ^7.0.4 => 7.0.4
#

im in the middle of a massive vue3 upgrade

#

so it's very well possible several other things are broken

ember magnet
#

I wouldn't normally expect you to have both of these:

    "@storybook/vue3-vite": "^7.0.4",
    "@storybook/vue3-webpack5": "^7.0.4",
#

Also, be sure that you don't have any plugins in your .storybook/main.js that are not actually installed.

gilded fog
#

thanks @ember magnet unfortunately those weren't causing the issue

ember magnet
#

Can you share your .storybook/main.js?

gilded fog
# 
export default {
  stories: ['../storybook/**/*.mdx', '../!((**)?node_modules)(**)?/*.stories.js'],
  addons: [
    '@geometricpanda/storybook-addon-badges',
    '@storybook/addon-essentials',
    '@storybook/addon-links',
    '@storybook/preset-scss',
    '@storybook/addon-mdx-gfm',
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
  staticDirs: ['../public'],
  docs: {
    autodocs: true,
  },
};
ember magnet
#

You might also check your glob, it looks a bit complex. Maybe there's an error there?

gilded fog
#

yeah i can try to see if consolidating the stories helps

ember magnet
#

Or move a single story somewhere easy, and point to it directly

#

to see if the error still happens

gilded fog
#

it seems like there was some issue with the component that the story imports. not sure how i can narrow it down easier, since the error isn't super helpful.

gilded fog
#

I'm still having this issue, but only with .js stories. The mdx ones seem to work ok

gilded fog
#

Getting "Invalid VNode type: undefined"

gilded fog
#

@ember magnet turns out it is something with the glob. If I use the glob, I see the stories in the side bar but they always show the importers[path] error. If I look at the storybook-stories.js file I see that the story is not in there