Dynamic Imports Break Stories in Storybook v9 (Next.js 15)

[shaquille-galanto]

Summary

Hi, I'm using Storybook with Next.js 15 and running into an issue when using next/dynamic. When I try to render components that use dynamic imports, I get the following error in Storybook:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

However, when I replace the dynamic import with a static one, the story renders correctly.I also tried mocking the next/dynamic module in my Storybook config, but no luck getting it to work.

I've included my Storybook configuration details and version info below. Would appreciate any guidance on how to properly handle next/dynamic in storybook. Thanks in advance!

Additional information

Storybook configuration

import type { StorybookConfig } from '@storybook/nextjs-vite'

const config: StorybookConfig = {
  addons: [
    '@storybook/addon-vitest',
    '@storybook/addon-a11y',
    '@storybook/addon-designs',
    '@storybook/addon-docs',
  ],
  framework: {
    name: '@storybook/nextjs-vite',
    options: {},
  },
  staticDirs: ['../public'],
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
}
export default config

Storybook version

"@storybook/addon-a11y": "^9.0.15",
"@storybook/addon-designs": "^10.0.1",
"@storybook/addon-docs": "^9.0.15",
"@storybook/addon-vitest": "^9.0.15",
"@storybook/nextjs-vite": "^9.0.15",
"storybook": "^9.0.15",

Error Message

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the [Decorators documentation](https://storybook.js.org/docs/writing-stories/decorators).
Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring [Webpack](https://storybook.js.org/docs/builders/webpack) or [Vite](https://storybook.js.org/docs/builders/vite) with Storybook.
Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the [Environment Variables documentation](https://storybook.js.org/docs/configure/environment-variables).

Create a reproduction

No response

[dosubot[bot]]

Hi @shaquille-galanto! I'm Dosu and I’m helping the storybook team.

This issue happens because Vite can't analyze dynamic imports like next/dynamic at build time, which leads to runtime errors in Storybook—especially with Next.js 15 and @storybook/nextjs-vite. This is a known limitation and is being tracked in the Storybook repo. Using static imports works because Vite can resolve them correctly, but dynamic imports break with errors like the one you posted. See details here.

There isn't a built-in fix in Storybook or @storybook/nextjs-vite for all next/dynamic use cases. The recommended workarounds are: use static imports in your stories when possible, or mock next/dynamic with a custom implementation or alias in your Vite/Storybook config. Some users have had success by adjusting module aliasing and adding the storybookNextJsPlugin to their vitest.config.ts, which can help with module resolution but doesn't guarantee a fix for all dynamic import issues. See discussion and example.

If you need a more tailored workaround, could you share a code snippet of how you're using next/dynamic? That might help narrow down a project-specific solution.

To reply, just mention @dosu.

---

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