[Bug]: Module not found entry-preview-docs

[kyle-mcknight]

Describe the bug

I upgrade from 6 to 7 today and have so many issues. This is a react native project.

I've found some issues have to do with some of the addon-ondevice-* pakages with not being able to find @storybook/global. I removed those dependencies to make this issue maybe a little easier.

I tried to use the upgrade with npx storybook@latest upgrade and that fails with the following

Error: Command failed with exit code 1: yarn info --name-only --recursive "storybook" "@storybook/cli" "storybook,@storybook/cli"
Usage Error: No package matched your request

$ yarn info [-A,--all] [-R,--recursive] [-X,--extra #0] [--cache] [--dependents] [--manifest] [--name-only] [--virtuals] [--json] ...
    at makeError (<path>\node_modules\execa\lib\error.js:60:11)
    at handlePromise (<path>\node_modules\execa\index.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Yarn2Proxy.executeCommand (<path>\node_modules\@storybook\cli\dist\generate.js:56:1607)
    at async Yarn2Proxy.findInstallations (<path>\node_modules\@storybook\cli\dist\generate.js:60:4629)
    at async getInstalledStorybookVersion (<path>\node_modules\@storybook\cli\dist\generate.js:455:2297)
    at async doUpgrade (<path>\node_modules\@storybook\cli\dist\generate.js:456:4728)
    at async withTelemetry (<path>\node_modules\@storybook\core-server\dist\index.js:65:3948)
    at async upgrade (<path>\node_modules\@storybook\cli\dist\generate.js:463:1752)

So I followed the migration guide and after that

package.json dependencies

  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@expo/webpack-config": "^19.0.0",
    "@react-native-community/datetimepicker": "7.2.0",
    "@react-native-community/eslint-config": "3.2.0",
    "@react-native-community/slider": "4.4.2",
    "@react-native-masked-view/masked-view": "0.2.9",
    "@react-native-material/core": "1.3.7",
    "@react-navigation/bottom-tabs": "6.4.3",
    "@react-navigation/drawer": "6.6.2",
    "@react-navigation/material-top-tabs": "6.6.2",
    "@react-navigation/native": "6.0.16",
    "@react-navigation/stack": "6.3.10",
    "@sentry/react-native": "5.10.0",
    "axios": "1.3.6",
    "copy-webpack-plugin": "^11.0.0",
    "dotenv": "16.0.3",
    "expo": "^49.0.20",
    "expo-application": "~5.3.0",
    "expo-auth-session": "~5.0.2",
    "expo-build-properties": "~0.8.3",
    "expo-constants": "~14.4.2",
    "expo-dev-client": "~2.4.12",
    "expo-device": "~5.4.0",
    "expo-font": "~11.4.0",
    "expo-linear-gradient": "~12.3.0",
    "expo-localization": "~14.3.0",
    "expo-random": "~13.2.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-updates": "~0.18.17",
    "i18n-js": "4.2.3",
    "jest": "^29.2.1",
    "lodash": "4.17.21",
    "react": "18.2.0",
    "react-devtools-core": "4.28.0",
    "react-dom": "18.2.0",
    "react-hook-form": "7.43.9",
    "react-is": "^18.2.0",
    "react-native": "0.72.6",
    "react-native-calendars": "^1.1293.0",
    "react-native-dropdown-picker": "^5.4.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-modal": "^13.0.1",
    "react-native-pager-view": "6.2.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-root-siblings": "4.1.1",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-tab-view": "3.5.1",
    "react-native-toast-message": "2.1.6",
    "react-native-web": "~0.19.6",
    "react-native-webview": "13.2.2",
    "react-query": "3.39.3",
    "recoil": "0.7.6",
    "sentry-expo": "~7.1.0",
    "victory-native": "36.6.8"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "7.1.6",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@storybook/addon-ondevice-actions": "7.6.15",
    "@storybook/addon-ondevice-controls": "7.6.15",
    "@storybook/react-native": "7.6.15",
    "@svgr/webpack": "^8.1.0",
    "@types/lodash": "4.14.197",
    "@types/react": "~18.2.14",
    "@types/xdate": "^0.8.33",
    "@typescript-eslint/eslint-plugin": "^6.7.0",
    "@typescript-eslint/parser": "^6.7.0",
    "babel-loader": "8.3.0",
    "cross-env": "^7.0.3",
    "eslint": "^8.49.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-import-resolver-typescript": "3.5.2",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jest": "27.1.6",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-react": "7.31.11",
    "eslint-plugin-sort-keys-fix": "1.1.2",
    "eslint-plugin-typescript-sort-keys": "2.3.0",
    "prettier": "2.8.7",
    "react-native-safe-area-context": "4.6.3",
    "react-native-svg-transformer": "^1.1.0",
    "typescript": "^5.1.3"
  },
}

Metro's metro.config.js

const path = require('path');

const { generate } = require('@storybook/react-native/scripts/generate');
const { getDefaultConfig } = require('expo/metro-config');

generate({
  configPath: path.resolve(__dirname, './.storybook'),
});

const config = getDefaultConfig(__dirname);

config.transformer.unstable_allowRequireContext = true;

config.transformer.assetPlugins = [
  ...config.transformer.assetPlugins,
  'expo-asset/tools/hashAssetFiles',
];
config.transformer.babelTransformerPath = require.resolve(
  'react-native-svg-transformer',
);

config.resolver.sourceExts = [...config.resolver.sourceExts, 'mjs', 'svg'];

config.resolver.assetExts = config.resolver.assetExts.filter(
  (ext) => ext !== 'svg',
);

module.exports = config;

Storybook's index.ts

import AsyncStorage from '@react-native-async-storage/async-storage';
import { view } from './storybook.requires';

const StorybookUIRoot = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
});

export default StorybookUIRoot;

Storybook's main.ts

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

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

export default main;

Storybook's preview.tsx

import type { Preview } from '@storybook/react';

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

My app's entry point

const App: React.FC = () => {
  return (
    ... app view stuff
  );
};

// Default to rendering your app
let AppEntryPoint = App;

// Render Storybook if storybookEnabled is true
if (Constants.expoConfig.extra.storybookEnabled === true) {
  console.warn('Storybook mode enabled');
  AppEntryPoint = require('../.storybook').default;
}

registerRootComponent(AppEntryPoint);

When I compile and run I get this in the terminal

ERROR in ./node_modules/@storybook/react-native/dist/preview.js:25
Module not found: Package path ./dist/entry-preview-docs is not exported from package <path>\node_modules\@storybook\react (see exports field in <path>\node_modules\@storybook\react\package.json)
  23 | });
  24 | module.exports = __toCommonJS(preview_exports);
> 25 | var import_entry_preview_docs = require("@storybook/react/dist/entry-preview-docs");
  26 | var import_docs_tools = require("@storybook/docs-tools");
  27 | var preview_default = {
  28 |   argTypesEnhancers: [import_docs_tools.enhanceArgTypes],

It still attempts to run and I get this in the browser console

Uncaught Error: Cannot find module '@storybook/react/dist/entry-preview-docs'
    at webpackMissingModule (preview.js:25:1)
    at ./node_modules/@storybook/react-native/dist/preview.js (preview.js:25:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./.storybook/storybook.requires.ts (storybook.requires.ts:25:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./.storybook/index.ts (.(:31:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/App.tsx (App.tsx:58:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:6:1
    at startup:6:1

To Reproduce

No response

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13800H
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.6.2 - C:\Program Files\nodejs\yarn.CMD <----- active
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.112)
  npmPackages:
    @storybook/react-native: 7.6.15 => 7.6.15

Additional context

No response

[lauraceconi]

npx storybook@latest upgrade also failed with same error message for me when upgrading from 6 to 7.

[stephanepericat]

I get the same issue on a brand new react-native project

[AsebWebDev]

In my case I needed to install a version 6 of @storybook/cli (f.e. v6.5.15) and then run the installer again. Then it worked 🎉

[cdanwards]

I'm still getting this error when upgrading a RN Storybook from 6.5.X -> 7.6.17. Is there a way to retroactively fix this?