[Bug]: "Module not found" when importing from "next/cache"

[chevsky]

Describe the bug

The following error occurs right after npm run storybook:

ERROR in ./node_modules/next/dist/server/lib/trace/tracer.js 37:10-39
Module not found: Error: Can't resolve '@opentelemetry/api' in '/Users/chevsky/Developer/sb-test/node_modules/next/dist/server/lib/trace'
 @ ./node_modules/next/dist/server/lib/patch-fetch.js 28:16-41
 @ ./node_modules/next/dist/server/web/spec-extension/unstable-cache.js 13:20-52
 @ ./node_modules/next/cache.js 2:18-3:19
 @ ./stories/Header.jsx 6:0-44
 @ ./stories/Header.stories.js 1:0-34 4:13-19

It seems like importing anything from next/cache in stories import chain cause this error.

To Reproduce

• Create a new Next.js project (v14.0.4)
• Setup storybook using npx storybook@latest init
• Add import { revalidatePath } from "next/cache"; to stories/Header.jsx (or any other generated file)
• Run npm run storybook

System

Storybook Environment Info:

  System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm <----- active
    pnpm: 8.6.12 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.2.1
  npmPackages:
    @storybook/addon-essentials: ^7.6.9 => 7.6.9
    @storybook/addon-interactions: ^7.6.9 => 7.6.9
    @storybook/addon-links: ^7.6.9 => 7.6.9
    @storybook/addon-onboarding: ^1.0.10 => 1.0.10
    @storybook/blocks: ^7.6.9 => 7.6.9
    @storybook/nextjs: ^7.6.9 => 7.6.9
    @storybook/react: ^7.6.9 => 7.6.9
    @storybook/test: ^7.6.9 => 7.6.9
    storybook: ^7.6.9 => 7.6.9

Additional context

The issue resolves when @opentelemetry/api is installed manually, but since everything else works fine without it, I assume the issue should be fixed on the Storybook side.

[chrisb2244]

For those affected by this and until @valentinpalkovic's PR is merged, adding the following to the main.ts config seems to achieve the same result (thanks Valentin :) ):

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  // everything else...
  webpack(baseConfig) {
    baseConfig.resolve = {
      ...(baseConfig.resolve ?? {}),
      alias: {
        ...(baseConfig.resolve?.alias ?? {}),
        '@opentelemetry/api': 'next/dist/compiled/@opentelemetry/api'
      }
    };
    return baseConfig;
  }
};

export default config;