Undefined is not a function when rendering StorybookUIRoot

[allisonadam81]

Describe the bug
RN 0.66.5
Storybook RN 6.5.18.
When rendering the StorybookUIRoot, I receive a react native render error "undefined is not a function".

To Reproduce
Steps to reproduce the behavior:

1. Make a project in RN version 0.66.5
2. Install Storybook following the default options from the docs.
3. In index.ts of my RN project, swap out the function returning App for StorybookUIRoot from the .storybook folder.

Expected behavior
To get the default story from the folder put into my repo by the storybook installation.

Screenshots

System:
Environment Info:

System:
OS: macOS 13.3
CPU: (8) x64 Apple M1
Binaries:
Node: 16.20.0 - ~/Desktop/Howl/Howl.Alert/node_modules/.bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
Browsers:
Chrome: 112.0.5615.137
Safari: 16.4
npmPackages:
@storybook/addon-actions: ^6.5.16 => 6.5.16
@storybook/addon-controls: ^6.5.16 => 6.5.16
@storybook/addon-ondevice-actions: ^6.5.3 => 6.5.3
@storybook/addon-ondevice-controls: ^6.5.3 => 6.5.3
@storybook/react-native: ^6.5.3 => 6.5.3

[dannyhw]

@allisonadam81 can you provide a reproduction?

[allisonadam81]

@allisonadam81 can you provide a reproduction?

I can hopefully next week - I've been looking into this over the past 2 days. It looks like it has to do with react-native-safe-area-context library introducing some breaking changes in v4, and my app is still on 3 and it has to be.

Storybook 5.3 is working great, however.

[allisonadam81]

Update - it looks like storybookUIRoot is not returning a valid react component. Still working on why.

[henrymoulton]

it looks like storybookUIRoot is not returning a valid react component.

@allisonadam81 any update here? Believe I've run into the same bug:

Before (optional)	After

|

@dannyhw happy to report as a separate issue?

[dannyhw]

@henrymoulton I can't really say until I know how to reproduce the problem. Are you able to create a reproduction?

[Dappsters]

I ran into this issue months ago and was able to resolve it recently.

@dannyhw
My project had upgraded from RN 0.66 to RN 0.71 (along with the associated dependency upgrades) and was crashing with a similar error. Turns out that during the loading of the "jotai" module (a rather new dependency in SB-RN), React was being resolved to an empty module ({ }) per Metro's Resolution algorithm, leaving createContext undefined and crashing that module. So "jotai" would fail to export anything, which led to further issues downstream including Storybook functions like getStorybookUI returning undefined.

After much trial and error, I discovered using Babel's module-resolver plugin with the option cwd set to packagejson was causing the module loading issues (likely something to do with relative paths vs absolute paths). Removing that allowed Storybook to render.

Here's the relevant section of my babel.config.js file:

plugins: [
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true,
      },
    ],
    '@babel/plugin-proposal-optional-catch-binding',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    [
      'module-resolver',
      {
        root: ['./'],
        extensions: [
          '.ios.js',
          '.android.js',
          '.js',
          '.jsx',
          '.ts',
          '.tsx',
          '.json',
        ],
        alias: {
          '^@app/(.+)': './app/\\1',
          '^@story/(.+)': './.storybook/\\1',
        },
        // cwd: 'packagejson' <---- REMOVED LINE
      },
    ],
    // React Native Dotenv
    // https://github.com/goatandsheep/react-native-dotenv
    [
      "module:react-native-dotenv", {
        "envName": "APP_ENV",
        "moduleName": "@env",
        "path": ".env",
        "blocklist": null,
        "allowlist": null,
        "safe": false,
        "allowUndefined": true,
        "verbose": false
      }
    ],
    ['react-native-reanimated/plugin'],
  ],

@allisonadam81 @henrymoulton
I would suggest looking through any module resolvers, loaders, and transpilers in your build pipeline and checking if any of them might be causing similar resolution errors or conflicts.

[allisonadam81]

Wow! Thank you for this! Full points @Dappsters I'll try this out as my company is looking at picking back up our component library build soon.