How to prevent .storybook directory from being bundled

[hayata-suenaga]

I am preparing my Expo application for production build using EAS. In my application, I conditionally import Storybook code based on environment variables to switch between the real application and the Storybook application.

// This code is part of `_layout.tsx`. The project uses Expo Router

let AppEntry = EntryLayout;

if (Constants?.expoConfig?.extra?.STORYBOOK_ENABLED) {
  AppEntry = require("@/.storybook").default;
}

export default AppEntry;

Even when STORYBOOK_ENABLED is false, Metro still tries to process files in the .storybook directory and throws an error saying it cannot find storybook.requires.js. I don't commit this file and I don't run sb-rn-get-stories when building the app through EAS, so the build fails because Metro cannot find the file.

I want Metro to completely ignore files in the .storybook directory since the production build does not use them.

I have two questions:

1. Can I assume that files in the .storybook directory can be ignored if the import is conditional?
2. How can I instruct Metro to ignore files in a specific directory? I have followed [the Stackoverflow post](https://stackoverflow.com/questions/41813211/how-to-make-metro-react-native-packager-ignore-certain-directories), but none of the suggested solutions are working.

[dannyhw]

Updating this to say that it is possible by returning empty modules, this was integrated into the withStorybook metro helper in the onDisabledRemoveStorybook option

Metro doesn't really have a good way to do this, one thing you can do is change how you run storybook conditionally.
If you use an if statement like this metro has no way to know if it will execute or not so it must resolve all requires in the conditional even if it doesn't run initially.

You can instead try this approach with sourceExts that changes which file gets loaded via a metro config changes instead of conditional app code

[hayata-suenaga]

I'll try to get the index file working in my app-router project. Let me know if you find another solution 🙇

[hayata-suenaga]

@dannyhw,

I'm having trouble trying to reconcile node_modules/expo/AppEntry.js and expo-router/entry.

What did you write down for the main field of package.json? Did you add index.tsx and index.storybook.tsx at the root of your project? If so, what did you put inside these files?

I'd appreciate if you could answer these questions when you have time 🙇

[dannyhw]

Sorry for the delay, I've been focused on v7 so didn't get to look at this yet. Can show you my setup when i have a moment.

[dannyhw]

@hayata-suenaga just re-read the thread and I think I know what you need.

You probably don't need to use an index.js entry point or change your setup. You can use a new method I've been trying out where you just mock the modules in the storybook folder using a custom resolver in your metro config.

In metro config:

defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => {
  const defaultResolveResult = context.resolveRequest(
    context,
    moduleName,
    platform
  );

  if (
    process.env.STORYBOOK_ENABLED !== "true" &&
    //                  put your storybook config folder here👇
    defaultResolveResult?.filePath?.includes?.(".storybook/")
  ) {
    return {
      type: "empty",
    };
  }

  return defaultResolveResult;
};

You can find the docs for this here:
https://docs.expo.dev/versions/v50.0.0/config/metro/#mocking-modules

[hayata-suenaga]

The answer apparently only works with Expo SDK 50.

I made changes to metro.config.js as suggested in the answer in an Expo project that uses SDK 49. However, it didn't work. After updating the SDK version to 50, the solution worked 🎉

[amoghkulkarnifr]

Now we also have a more standard way of configuring Storybook. Here's my metro.config.js that worked for me -

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');
const withStorybook = require('@storybook/react-native/metro/withStorybook');

// Find the project and workspace directories
const projectRoot = __dirname;
const defaultConfig = getDefaultConfig(projectRoot);

defaultConfig.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
];

// ...additional config

defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => {
  const defaultResolveResult = context.resolveRequest(context, moduleName, platform);

  // Or your own guard condition for when you want to omit Storybook from the bundle
  if (
    process.env.APP_VARIANT !== 'storybook' &&  
    defaultResolveResult?.filePath?.includes?.('.storybook/')
  ) {
    return {
      type: 'empty',
    };
  }

  return defaultResolveResult;
};

// ...more config

// In the end -
const defaultConfigWithSb = withStorybook(defaultConfig, {
  // Set to false to remove storybook specific options
  // you can also use a env variable to set this
  enabled: process.env.APP_VARIANT === 'storybook' ? true : false,
  configPath: path.resolve(__dirname, './.storybook'), // Path to your storybook config
  onDisabledRemoveStorybook: true,

  // Optional websockets configuration
  // Starts a websocket server on the specified port and host on metro start
  // websockets: {
  //   port: 7007,
  //   host: 'localhost',
  // },
});

module.exports = defaultConfigWithSb;

I have an environment variable APP_VARIANT which I can set to storybook, development, preview or production at the time of bundling and accordingly selective portions of the app get bundled.

[dannyhw]

Fyi some of that config is redundant since onDisabledRemoveStorybook with return empty modules for storybook packages when enabled is false