[Bug]: error Unable to resolve module storybook/internal/preview-api

[alainib]

Describe the bug

cannot run react-native with latests versions

error Unable to resolve module storybook/internal/preview-api from /Users/alain/myproject/node_modules/@storybook/addon-actions/dist/preview.js: storybook/internal/preview-api could not be found within the project or in these directories:
  node_modules
  2 |
  3 | var uuid = require('uuid');
> 4 | var previewApi = require('storybook/internal/preview-api');
    |                           ^
  5 | var global = require('@storybook/global');
  6 | var previewErrors = require('storybook/internal/preview-errors');
  7 |.

versions used

"react-native": "0.74.3",
"@storybook/addon-actions": "^8.2.9",
"@storybook/addon-ondevice-actions": "^7.6.20",
"@storybook/addon-ondevice-controls": "^7.6.20",
"@storybook/addon-themes": "^8.2.9",
"@storybook/preview-api": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/react-native": "^7.6.20",
"@storybook/react-native-theming": "^7.6.20",

project was running with this previous following versions but storybook stopped working few month ago since i udpate react-native itself. it stuck on splascreen most of the time

  "@storybook/addon-actions": "^7.6.17",
  "@storybook/addon-ondevice-actions": "^7.6.15",
  "@storybook/addon-ondevice-controls": "^7.6.15",
  "@storybook/addon-themes": "^7.6.17",
  "@storybook/react": "^7.6.17",
  "@storybook/react-native": "^7.6.15",
  "@storybook/react-native-theming": "^7.6.15",

Reproduction link

nolink.com

Reproduction steps

just try to run project

System

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.6.0 - /opt/homebrew/bin/node
    Yarn: 4.2.1 - /usr/local/bin/yarn <----- active
    npm: 10.8.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 127.0.6533.120
    Safari: 17.6
  npmPackages:
    @storybook/addon-actions: ^8.2.9 => 8.2.9
    @storybook/addon-ondevice-actions: ^7.6.20 => 7.6.20
    @storybook/addon-ondevice-controls: ^7.6.20 => 7.6.20
    @storybook/addon-themes: ^8.2.9 => 8.2.9
    @storybook/preview-api: ^8.2.9 => 8.2.9
    @storybook/react: ^8.2.9 => 8.2.9
    @storybook/react-native: ^7.6.20 => 7.6.20
    @storybook/react-native-theming: ^7.6.20 => 7.6.20

Additional context

No response

[senghuotlay]

Same for me as well, after upgrading to RN0.74

[sunilrathore24]

Facing the same issue -

Module not found: Error: Can't resolve 'storybook/internal/preview-api' in ```
'D:\Torque\torque\node_modules\@storybook\instrumenter\dist'
 @ ./node_modules/@storybook/test/dist/index.mjs 2:0-53 31669:21-31 31758:6-16 31765:6-16
 @ ./libs/forms/auto-complete/src/lib/auto-complete.component.stories.ts 7:0-69 109:21-27 111:12-26 112:12-18 113:12-27 114:12-18 131:21-27 133:12-26 134:12-18 135:12-27 136:12-18 211:21-27 213:12-26 216:12-19 217:14-20 218:14-29 222:12-18
 @ ./libs/forms/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:[\\/]libs[\\/]forms(?:[\\/](?%21\.)(?:(?:(?%21(?:^%7C[\\/])\.).)*?)[\\/]%7C[\\/]%7C$)(?%21\.)(?=.)[^\\/]*?\.stories\.(js%7Cjsx%7Cmjs%7Cts%7Ctsx))$ chunkName: [request] namespace object ./auto-complete/src/lib/auto-complete.component.stories.ts ./auto-complete/src/lib/auto-complete.component.stories
 @ ./storybook-stories.js 35:11-37:36
 @ ./storybook-config-entry.js 4:0-50 13:31-39 18:2-23:4 18:58-23:3 21:6-14

  "devDependencies": {
    "@angular-devkit/build-angular": "18.0.2",
    "@angular-devkit/core": "18.0.2",
    "@angular-devkit/schematics": "18.0.2",
    "@angular-eslint/eslint-plugin": "18.0.1",
    "@angular-eslint/eslint-plugin-template": "18.0.1",
    "@angular-eslint/template-parser": "18.0.1",
    "@angular/cli": "~18.0.0",
    "@angular/compiler-cli": "18.0.1",
    "@angular/language-service": "18.0.1",
    "@babel/core": "^7.24.7",
    "@babel/plugin-proposal-decorators": "^7.24.7",
    "@babel/preset-env": "^7.24.7",
    "@babel/preset-typescript": "^7.24.7",
    "@commitlint/cli": "^17.0.2",
    "@commitlint/config-conventional": "^17.0.2",
    "@commitlint/prompt-cli": "^17.0.0",
    "@custom-elements-manifest/analyzer": "~0.5.7",
    "@mjhenkes/postcss-rtl": "^2.0.0",
    "@nx/cypress": "19.3.2",
    "@nx/eslint": "19.3.2",
    "@nx/eslint-plugin": "19.3.2",
    "@nx/js": "19.3.2",
    "@nx/storybook": "19.3.2",
    "@nx/workspace": "19.3.2",
    "@open-wc/testing": "^3.1.6",
    "@rollup/plugin-alias": "^5.1.0",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-terser": "^0.4.4",
    "@rollup/plugin-typescript": "^11.1.6",
    "@rollup/plugin-virtual": "^3.0.2",
    "@schematics/angular": "18.0.2",
    "@storybook/addon-a11y": "^8.1.7",
    "@storybook/addon-essentials": "^8.1.7",
    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
    "@storybook/angular": "^8.1.7",
    "@storybook/blocks": "^8.1.7",
    "@storybook/components": "^8.1.7",
    "@storybook/core-events": "^8.1.7",
    "@storybook/core-server": "^8.1.7",
    "@storybook/manager-api": "^8.1.7",
    "@storybook/preview-api": "^8.1.7",
    "@storybook/theming": "^8.1.7",
    "@storybook/types": "^8.1.7",
    "@storybook/test": "^8.1.7",
    "@storybook/web-components": "^8.1.7",
    "@storybook/web-components-webpack5": "^8.1.7",
    "@torque/eslint-plugin": "14.0.0-build.4",
    "@storybook/test-runner": "^0.19.1", }

[cosieLq]

I have got similar error not when running storybook but when running unit tests. The error message is:

Cannot find module 'storybook/internal/preview-api' from '.yarn/__virtual__/@storybook-react-virtual-*/0/cache/@storybook-react-npm-8.2.0-*.zip/node_modules/@storybook/react/dist'

I've tried different versions, the error seems related to @storybook/react v8.2.0+ where it refers to storybook/internal/preview-api instead of storybook/preview-api in v8.1.

[dwidge]

Remove @storybook/addon-ondevice-actions from .storybook\main.ts:

import { StorybookConfig } from "@storybook/react-native";

const main: StorybookConfig = {
  stories: ["./stories/**/*.stories.?(ts|tsx|js|jsx)"],
  addons: ["@storybook/addon-ondevice-controls"],
};

export default main;

Run command:

sb-rn-get-stories

It updates .storybook\storybook.requires.ts without @storybook/addon-ondevice-actions.

[wtfiwtz]

This also affects @storybook/react and possibly other add-ins too. The PR is https://github.com/storybookjs/storybook/pull/27039

I'm still investigating why this happens. Might be something local to us.

EDIT: Seems related to composeStories in Jest tests with @storybook/react due to

import { composeStories } from "@storybook/react"
... 
const testCases = Object.values(composeStories(stories)).map((Story) => [
  Story.id,
  Story,
]);

Not familiar enough with StoryBook to know more right now, but likely related to upgrading from Storybook 6 => 7 => 8.1.10 => 8.3.6.

[wtfiwtz]

Looks like we are using a very old version of Jest that doesn't support package.json export rewriting - https://github.com/jestjs/jest/issues/9771 I attempted to set moduleNameMapper and transformIgnorePatterns in the jest.config.js (or config-overrides.js) file but it looks like I need to upgrade Jest first.

[shilman]

All of your storybook package versions should match.

You can run npx storybook doctor to see if you have version conflicts. Based on the original issue @alainib I can see that you're mixing 7.x and 8.x versions, which I wouldn't expect to work. But even in 8.x as we've been simplifying the package structure your core packages all need to be on the same minor version of Storybook, e.g. 8.4.x.