NX Monorepo with an react-native in-app storybook errors

[josippapez]

Summary

I'm using NX monorepo (latest) and a react native storybook (v10 rc1, although i tried downgrading to the latest v9 but still didn't help).
I've managed to set up the in-app storybook to render conditionally, and that works fine. But the stories won't work for some reason. They are defined outside the app in a separate NX package where other mobile components are defined (only one story is defined for test purposes).

But after i've added all of that and i try to run the storybook, i always get the errors below.

Additional information

 (NOBRIDGE) ERROR  TypeError: Cannot read property 'indexOf' of undefined
 (NOBRIDGE) LOG  [TypeError: Cannot read property 'onMockCall' of undefined]
 (NOBRIDGE) ERROR  Error rendering story 'button--basic':
 (NOBRIDGE) ERROR  [TypeError: Cannot read property 'onMockCall' of undefined]
 (NOBRIDGE) ERROR  Warning: TypeError: Cannot read property 'borderRadius' of undefined

This error is located at:
    in emotion(TouchableOpacity) (created by Button)
    in Button (created by IconButton)
    in IconButton (created by Layout)
    in RCTView (created by View)
    in View (created by emotion(View))
    in emotion(View) (created by Layout)
    in RCTView (created by View)
    in View (created by emotion(View))
    in emotion(View) (created by Layout)
    in RCTView (created by View)
    in View (created by Layout)
    in Layout (created by FullUI)
    in LayoutProvider (created by FullUI)
    in StorageProvider (created by FullUI)
    in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
    in BottomSheetModalProviderWrapper (created by FullUI)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by FullUI)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by FullUI)
    in ThemeProvider2 (created by FullUI)
    in FullUI
    in Unknown (created by App)
    in ConfigProvider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in MyApp(RootComponent)
 (NOBRIDGE) ERROR  Warning: TypeError: Cannot read property 'borderRadius' of undefined

This error is located at:
    in emotion(TouchableOpacity) (created by Button)
    in Button (created by IconButton)
    in IconButton (created by Layout)
    in RCTView (created by View)
    in View (created by emotion(View))
    in emotion(View) (created by Layout)
    in RCTView (created by View)
    in View (created by emotion(View))
    in emotion(View) (created by Layout)
    in RCTView (created by View)
    in View (created by Layout)
    in Layout (created by FullUI)
    in LayoutProvider (created by FullUI)
    in StorageProvider (created by FullUI)
    in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
    in BottomSheetModalProviderWrapper (created by FullUI)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by FullUI)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by FullUI)
    in ThemeProvider2 (created by FullUI)
    in FullUI
    in Unknown (created by App)
    in ConfigProvider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in MyApp(RootComponent)

Here's my .rnstorybook inside the app:
index.tsx

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

const StorybookUI = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
  // Enable persisting story selection
  shouldPersistSelection: true,
  // Enable websockets for remote control (optional)
  // enableWebsockets: true,
  // host: 'localhost',
  // port: 7007,
});

export default StorybookUI;

main.ts

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

const config: StorybookConfig = {
  stories: [
    // Stories from the mobile components library
    '../../../libs/mobile/components/src/**/*.stories.?(ts|tsx|js|jsx)',
    '../../../libs/mobile/components/src/*.stories.?(ts|tsx|js|jsx)',
    // Add more story paths as needed
    // '../src/**/*.stories.?(ts|tsx|js|jsx)',
  ],
  addons: [
    '@storybook/addon-ondevice-controls',
    '@storybook/addon-ondevice-backgrounds',
    '@storybook/addon-ondevice-actions',
    '@storybook/addon-ondevice-notes',
  ],
  framework: '@storybook/react-native',
};

export default config;

preview.tsx

import type { Preview } from '@storybook/react-native';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { KeyboardProvider } from 'react-native-keyboard-controller';
import { ThemeProvider } from '@libs/theme';
import { ConfigProvider, setGlobalAppConfig } from '@libs/global-config';
import appConfig from '../src/appConfig';
import { configureAssets } from '@libs/mobile-assets';
import { appAssets } from '../src/assets/AppAssets';

// Configure assets and global config
configureAssets(appAssets);
setGlobalAppConfig(appConfig);

const preview: Preview = {
  decorators: [
    (Story) => (
      <ConfigProvider config={appConfig}>
        <SafeAreaProvider>
          <KeyboardProvider>
            <ThemeProvider>
              <Story />
            </ThemeProvider>
          </KeyboardProvider>
        </SafeAreaProvider>
      </ConfigProvider>
    ),
  ],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    backgrounds: {
      default: 'plain',
      values: [
        { name: 'plain', value: 'white' },
        { name: 'dark', value: '#333' },
      ],
    },
  },
};

export default preview;

metroconfig

const { withNxMetro } = require('@nx/react-native');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const {
  withStorybook,
} = require('@storybook/react-native/metro/withStorybook');
const path = require('path');

// Define project and workspace roots for monorepo support
const projectRoot = __dirname;
const workspaceRoot = path.resolve(projectRoot, '../..');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const customConfig = {
  cacheVersion: 'myapp',
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
    // Enable require.context for Storybook
    unstable_allowRequireContext: true,
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
    // Add node_modules paths for monorepo support
    nodeModulesPaths: [
      path.resolve(projectRoot, 'node_modules'),
      path.resolve(workspaceRoot, 'node_modules'),
    ],
    // Provide polyfill modules for Node.js built-ins that Storybook might try to import
    extraNodeModules: {
      ...require('node-libs-react-native'),
    },
  },
  // Watch the workspace root to pick up changes in libs
  watchFolders: [workspaceRoot],
};

// First merge the custom config with the default config
let mergedConfig = mergeConfig(defaultConfig, customConfig);

// Apply Storybook wrapper FIRST if enabled (before NX wrapper)
const isStorybookEnabled = process.env.STORYBOOK_ENABLED === 'true';

if (isStorybookEnabled) {
  mergedConfig = withStorybook(mergedConfig, {
    enabled: true,
    configPath: path.resolve(__dirname, './.rnstorybook'),
  });
}

// Then apply NX metro wrapper (this should be last)
module.exports = withNxMetro(mergedConfig, {
  debug: false,
  extensions: [],
  watchFolders: [],
});

Create a reproduction

No response

[dosubot[bot]]

Hi @josippapez! I'm Dosu and I’m helping the storybook team.

Your setup and errors point to a common issue in monorepos: Storybook (and Metro) often resolve shared library imports to the built output in node_modules, not the source files. This can break things like emotion, context providers, and even basic prop passing, leading to the TypeErrors you’re seeing (e.g., Cannot read property 'borderRadius' of undefined)—especially if peer dependencies or context are mismatched between the app and the shared package.

Here’s what you can try:

1. Ensure all peer dependencies (like emotion, react-native, etc.) are installed and at the same version in both your app and the shared components package. Mismatches here are a frequent cause of these errors.

2. Force Metro to resolve shared libraries to source, not built output. In your Metro config, you already set watchFolders and nodeModulesPaths, which is good. Double-check that your extraNodeModules does not accidentally point to a built version of your shared library. You may need to add an explicit alias in extraNodeModules to point to the source directory of your shared package.

3. Check your tsconfig paths. Make sure your tsconfig.json in both the app and the shared library use paths that point to the source (libs/mobile/components/src) and not to the built output. This helps both TypeScript and Metro resolve the right files.

4. Try using conditional exports or aliases. In your shared package’s package.json, you can add conditional exports to point to the source for development tools. Alternatively, set up Metro or Babel aliases to resolve your shared package name to its source directory. This is a recommended workaround for monorepo setups and is discussed in detail here.

5. Emotion-specific: If you use emotion, make sure both the app and the shared library use the same emotion version and that emotion is not being bundled twice. If you see errors like Cannot read property 'borderRadius' of undefined, it’s often due to emotion context not being shared between the app and the library.

6. Check your story imports: Make sure your stories import components using the package name (not relative paths), and that the package is properly linked in your monorepo (see this example).

7. Metro config order: The order of applying withStorybook and withNxMetro matters. You’re applying withStorybook first, which is correct.

If you try these steps and still see the same errors, double-check that your shared library is not being built and then imported from node_modules during Storybook runs. You want Metro to always resolve to the source files during development.

References:

• Storybook monorepo import resolution discussion
• NX monorepo Storybook linking and import advice

Let me know if you need help with a specific config example or want to dig deeper into one of these steps!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[josippapez]

I did some digging and when the error pops up in the ios emulator, i get the link to Button.tsx that is located inside node_modules/@storybook/react-native-ui-common instead of my custom one and my custom story. I even tried renaming the Button component and file but still i get the same error. For some reason, it always points to that native button and to the 121 line in it