Storybook works locally but not when deployed

[lsarni]

Summary

I'm migrating to Storybook v10 on Next.js v16, and it works locally, but on production all stories give the following error:

memo is not defined
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).

I can't find any previous references of this.

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

The "memo is not defined" error in production with Storybook v10 and Next.js 16 is often caused by differences in how dependencies or modules are bundled for production vs. local dev. Here’s a focused checklist to help you resolve it:

• Make sure all your Storybook and Next.js packages are on compatible versions. Storybook 10.0.7+ is required for Next.js 16 support—older versions will break in production builds due to SWC loader changes (details).
• Check for duplicate or mismatched React/React DOM versions in your lockfile. All packages (including Storybook and your app) must resolve to a single version of each. In monorepos or with pnpm, run pnpm ls react react-dom and dedupe if needed (details).
• If you use Vite, ensure you’re not leaking server-only modules (like Node.js APIs or server-side libraries) into the client bundle. Alias any such modules to ESM stubs in your .storybook/main.ts using viteFinal (example).
• If you rely on environment variables (especially NEXT_PUBLIC_), Storybook does not automatically expose them. Add a webpackFinal config to inject them using DefinePlugin (example).
• Clean your node_modules and lockfile, then reinstall dependencies to ensure no corruption or mismatches.
• If you use MDX or custom Vite plugins, make sure @storybook/addon-docs is included in your addons and that test config is not in vite.config.ts (move it to vitest.config.ts).
• If you’re using a monorepo or pnpm, and see issues with MDX or React shims, try adding a custom Vite plugin to resolve the MDX React shim (example).

If the error persists, please share your .storybook/main.ts, builder type (Webpack/Vite), deployment method, and the output of npm ls react react-dom or pnpm ls react react-dom. This will help pinpoint the root cause.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[kcrwfrd]

Ran into this as well when attempting to upgrade to Next 16 and Storybook 10.5.8 with the @storybook/nextjs webpack configuration. It seems to be a webpack issue.

You may try simply switching to the @storybook/nextjs-vite config, and see if that works.

In our case, Claude managed to figure out a fix by adding this in our config

webpackFinal: async storybookConfig => {
  /**
   * Disable webpack's inner-module tree shaking for the production build.
   *
   * `storybook/dist/components/index.js` is one large esbuild bundle. webpack's
   * `innerGraph` analysis wrongly decides some of its React imports are unused and
   * strips them, leaving declarations that still reference them:
   *
   *   var TabErrorBoundary = class extends (\/* unused pure expression or super *\/ null && (Component2)) {
   *   ... Tabs = memo(...)   // `memo` binding removed
   *
   * At runtime every Storybook docs page then dies with
   * `ReferenceError: memo is not defined`, while stories render fine. It only
   * affects `build-storybook`, because `innerGraph` is a production-only
   * optimization — which is why `npm run storybook` looks healthy.
   *
   * Storybook's shipped source is correct (it does import `memo` and `Component`),
   * so this is a bundling bug, not a Storybook packaging bug. Re-check on future
   * Storybook/webpack upgrades and drop this when it is no longer needed.
   */
  storybookConfig.optimization = storybookConfig.optimization || {}
  storybookConfig.optimization.innerGraph = false
}