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

alainib · 2024-08-21T14:49:06Z

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

The text was updated successfully, but these errors were encountered:

senghuotlay · 2024-08-22T23:43:20Z

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

sunilrathore24 · 2024-09-06T12:31:38Z

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 · 2024-09-06T13:28:27Z

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 · 2024-09-09T07:27:08Z

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 · 2024-10-29T01:15:03Z

This also affects @storybook/react and possibly other add-ins too.
The PR is #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 · 2024-10-29T04:04:51Z

Looks like we are using a very old version of Jest that doesn't support package.json export rewriting - jestjs/jest#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 · 2024-11-07T01:17:06Z

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.

vonkanehoffen · 2024-12-19T17:06:18Z

This is happening for me with:

    "@storybook/addon-ondevice-actions": "^8.4.3",
    "@storybook/addon-ondevice-controls": "^8.4.3",
    "@storybook/react": "^8.4.3",
    "@storybook/react-native": "^8.4.3",

Even though all versions match @shilman :-(

Unable to resolve "storybook/internal/preview-api" from "node_modules/@storybook/addon-actions/dist/preview.mjs"

shilman · 2024-12-19T23:55:05Z

@vonkanehoffen Do you have the storybook package installed as a project dependency?

If not, please install it. It's a peer dep of all the Storybook packages. @dannyhw do we need to add it as a peer dep of @storybook/react-native too?

dannyhw · 2024-12-20T01:19:55Z

@shilman in @storybook/react-native the storybook package is a direct dependency not a peer dependency. it can be moved if necessary but that could be a breaking change because it would require people to manually install the storybook package when most likely they didn't have to before.

This just seems like it could be metro configuration issues though, like not having package exports enabled via withStorybook.

dannyhw · 2024-12-20T01:23:00Z

though the original issue was created before rn sb v8 was out so I would think that two different issues are getting mixed up here

cosieLq · 2024-12-20T15:04:56Z

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.

As mentioned previously by @shilman , we've solved this error by adding the storybook package to our project dependencies.

dannyhw · 2024-12-20T15:50:26Z

@cosieLq Can you provide an reproduction of the problem? that would really help to debug.

wtfiwtz · 2024-12-21T20:43:32Z

I think I fixed this 2 months ago with moduleNameMapper in config-overrides.js (instead of webpack config)

config.moduleNameMapper = [
  ...
  "^@storybook/core/(.*)": "<rootDir>/node_modules/@storybook/core/dist/$1",
  "^storybook/internal/(.*)": "<rootDir>/node_modules/storybook/core/$1",
]

shilman · 2024-12-22T00:53:38Z

@dannyhw Users should still have storybook installed in their projects. Otherwise it breaks package manager semantics.

Consider the following package structure:

A depends on B
C peer depends on B

If the package manager hoists B, then C will be able to find it. But if it doesn't, then even though B is somewhere in node_modules, C won't find it.

So I'd recommend:

Make @storybook/react-native peer depend on storybook
Install storybook in the user's package.json

This is a breaking change, so probably need to wait for 8.0

dannyhw · 2024-12-23T09:10:35Z

Ok seems reasonable, will make sure to update it for the next major.

cosieLq · 2024-12-23T09:18:09Z

@cosieLq Can you provide an reproduction of the problem? that would really help to debug.

We're using '@storybook/react' and '@storybook/react-vite', not '@storybook/react-native', so our error is probably different. After we installed 'storybook' in 'package.json', the error is gone. Do you still need a reproduction?

dannyhw · 2024-12-23T12:29:00Z

Ah in that case that would be expected if the storybook package is not installed i think it's not needed

alainib added bug needs triage labels Aug 21, 2024

shilman added question / support dependencies react-native and removed bug needs triage labels Nov 7, 2024

shilman added bug has workaround and removed question / support labels Dec 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

alainib commented Aug 21, 2024

senghuotlay commented Aug 22, 2024

sunilrathore24 commented Sep 6, 2024 •

edited

Loading

cosieLq commented Sep 6, 2024 •

edited

Loading

dwidge commented Sep 9, 2024

wtfiwtz commented Oct 29, 2024 •

edited

Loading

wtfiwtz commented Oct 29, 2024

shilman commented Nov 7, 2024

vonkanehoffen commented Dec 19, 2024

shilman commented Dec 19, 2024 •

edited

Loading

dannyhw commented Dec 20, 2024 •

edited

Loading

dannyhw commented Dec 20, 2024 •

edited

Loading

cosieLq commented Dec 20, 2024

dannyhw commented Dec 20, 2024

wtfiwtz commented Dec 21, 2024 •

edited

Loading

shilman commented Dec 22, 2024

dannyhw commented Dec 23, 2024 •

edited

Loading

cosieLq commented Dec 23, 2024

dannyhw commented Dec 23, 2024

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

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

Comments

alainib commented Aug 21, 2024

Describe the bug

Reproduction link

Reproduction steps

System

Additional context

senghuotlay commented Aug 22, 2024

sunilrathore24 commented Sep 6, 2024 • edited Loading

cosieLq commented Sep 6, 2024 • edited Loading

dwidge commented Sep 9, 2024

wtfiwtz commented Oct 29, 2024 • edited Loading

wtfiwtz commented Oct 29, 2024

shilman commented Nov 7, 2024

vonkanehoffen commented Dec 19, 2024

shilman commented Dec 19, 2024 • edited Loading

dannyhw commented Dec 20, 2024 • edited Loading

dannyhw commented Dec 20, 2024 • edited Loading

cosieLq commented Dec 20, 2024

dannyhw commented Dec 20, 2024

wtfiwtz commented Dec 21, 2024 • edited Loading

shilman commented Dec 22, 2024

dannyhw commented Dec 23, 2024 • edited Loading

cosieLq commented Dec 23, 2024

dannyhw commented Dec 23, 2024

sunilrathore24 commented Sep 6, 2024 •

edited

Loading

cosieLq commented Sep 6, 2024 •

edited

Loading

wtfiwtz commented Oct 29, 2024 •

edited

Loading

shilman commented Dec 19, 2024 •

edited

Loading

dannyhw commented Dec 20, 2024 •

edited

Loading

dannyhw commented Dec 20, 2024 •

edited

Loading

wtfiwtz commented Dec 21, 2024 •

edited

Loading

dannyhw commented Dec 23, 2024 •

edited

Loading