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]

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 🎉