Unable to resolve "@storybook/core/manager-api"

[pvinis]

Describe the bug
I am trying to add storybook on an expo 51 project with expo-router.

To Reproduce
Steps to reproduce the behavior:

1. I have added the withStorybook in metro.config.js
2. I have added the require().default bit on my index.tsx
3. When I start without the storybook_enabled envvar, I get this error:

Unable to resolve "@storybook/core/manager-api"

I'll try to make a repro tomorrow, with 8.3.10.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Code snippets
If applicable, add code samples to help explain your problem.

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Additional context
Add any other context about the problem here.

[dannyhw]

Can you make sure that when storybook enabled is false that storybook isnt being loaded by app code (conditionally require it when enabled is true)

You can also try onDisabledRemoveStorybook set to true on the latest version.

Lastly clearing cache can sometimes be required after changing env variables

Alternatively change package exports to true in metro config

[alvinlal]

Can you make sure that when storybook enabled is false that storybook isnt being loaded by app code (conditionally require it when enabled is true)

You can also try onDisabledRemoveStorybook set to true on the latest version.

Lastly clearing cache can sometimes be required after changing env variables

Alternatively change package exports to true in metro config

@dannyhw i am also facing the same issue,

1. made sure storybook isn't being loaded by app code ✅
2. where to set onDisabledRemoveStorybook to true ? 🤔
3. tried clearing cache ✅
4. can't see a metro config since i am using expo 🤔

thanks

[dannyhw]

You need to create a metro config file its required in the setup (see readme).

npx expo customize metro.config.js

See getting started

https://github.com/storybookjs/react-native#getting-started

[alvinlal]

You need to create a metro config file its required in the setup (see readme).

npx expo customize metro.config.js

See getting started

https://github.com/storybookjs/react-native#getting-started

thanks @dannyhw , i got it working perfectly

[iamdin]

Hi, @dannyhw I also face the same issue, and i am using expo@46 and ReactNative@69.
Here is the minimum reproducible repository: https://github.com/iamdin/react-native-69-storybook

[dannyhw]

Are you using the storybook commands to run the app? The env variable is being used in your repro.

[dannyhw]

@iamdin seems like the older version doesn't support package exports in metro maybe? the package exports option is required in v8

I highly recommend updating expo/rn in your project.

[dannyhw]

react native 0.72 would be a minimum, just based on this https://reactnative.dev/blog/2023/06/21/package-exports-support

I can't really do anything about that either since storybook core heavily uses package exports to define the entry points for storybook packages.

probably the options are stay on storybook 7 or upgrade expo/rn

expo 49 has 0.72 btw

[iamdin]

@dannyhw Thank you very much for your time & answer. I indeed used storybook commands to run the app. Unfortunately, When i upgrade to expo49 with RN 0.72, got some file resolution errors. I update the codebase https://github.com/iamdin/react-native-69-storybook

By the way, before i used storybook in react-native, i checked the version requirement

react-native/packages/react-native/package.json

Line 80 in 37d653f

"react-native": ">=0.57.0",

[dannyhw]

I will update the peer dep thing because its out of date, sorry about that.

What if you set defaultConfig.resolver.unstable_enablePackageExports = true manually in your metro config

[dannyhw]

also try defaultConfig.resolver.sourceExts.push('mjs');

Mjs was added by default in I think maybe expo 50

I mean of course if you can then just upgrade all the way to expo 51

[Fab-Diaz]

Hi! I'm using expo 51 and the latest storybook version (8.3.10) and unfortunately come across the same issue. Reverting it back to v.7 fixes it, but we might have to wait for a patch?

[dannyhw]

@Fab-Diaz you need to use the withStorybook metro config function, can you make sure you have followed the migration steps carefully.

[shintiazhou]

@Fab-Diaz @pvinis Try removing storybook from the bundle, it seems to fix the issue for me!

// metro.config.js
metroConfig.resolver.resolveRequest = (context, moduleName, platform) => {
  const defaultResolveResult = context.resolveRequest(context, moduleName, platform);

  if (
    process.env.STORYBOOK_ENABLED !== 'true' &&
    defaultResolveResult?.filePath?.includes?.('.storybook/')
  ) {
    return {
      type: 'empty',
    };
  }

  return defaultResolveResult;
};

[the-simian]

After some experimenting I got past this with some advice from @dannyhw .
I want to add that I was in a situation where I was including the withStorybook conditionally but it didn't really work right. Also the resolveRequest override upthread didn't either. Here is what finally did work:

const path = require('node:path');
const { getDefaultConfig } = require('expo/metro-config');
const withStorybook = require('@storybook/react-native/metro/withStorybook');
const { getSentryExpoConfig } = require('@sentry/react-native/metro');
const { withNativeWind } = require('nativewind/metro');

const STORYBOOK_ENABLED =
  process.env.STORYBOOK_ENABLED === 'true' || process.env.STORYBOOK_ENABLED === true;

const sentryCfg = STORYBOOK_ENABLED ? getDefaultConfig(__dirname) : getSentryExpoConfig(__dirname);

const storybookCfg = withStorybook(sentryCfg, {
  enabled: STORYBOOK_ENABLED,
  onDisabledRemoveStorybook: !STORYBOOK_ENABLED,
  configPath: path.resolve(__dirname, './.storybook-mobile'),
});

const nativewindCfg = withNativeWind(storybookCfg, {
  input: './global.css',
  hotServerOptions: { port: 8089 },
});

module.exports = nativewindCfg;

I am including the other config-decorators in here so you can see how I handled this in the context of others.

this is the critical line that 'just worked' for storybook:

const storybookCfg = withStorybook(sentryCfg, {
  enabled: STORYBOOK_ENABLED,
  onDisabledRemoveStorybook: !STORYBOOK_ENABLED,
  configPath: path.resolve(__dirname, './.storybook-mobile'),
});

trying to conditionally include the withStorybook was less successful than just using the flags.

[FranchescoLivado]

Encountered similar issue but not using expo. Followed the manual setup doc as well as the multiple entry points for rn

metro.config.js

const withStorybook = require('@storybook/react-native/metro/withStorybook');

const config = {
  resolver: {
    unstable_enablePackageExports: true,
  },
};

const finalConfig = mergeConfig(getDefaultConfig(__dirname), config);

module.exports = withStorybook(finalConfig);```

[dannyhw]

@FranchescoLivado I dont recommend that setup with multiple metro configs anymore, it kinda just causes more complications.

you are better off using a env variable similar to the expo setup