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.

[SaiChand-Headout]

@henrymoulton , were you able to resolve this ?? I'm running into the same error

[SaiChand-Headout]

@dannyhw , any idea about the above error that @henrymoulton mentioned ?? can you please help here.

[dannyhw]

@SaiChand-Headout sorry to keep repeating myself but i really need a reproduction of the problem to know what the problem is

[SaiChand-Headout]

@dannyhw , in an existing RN project, I just followed the steps from https://github.com/storybookjs/react-native?tab=readme-ov-file#existing-project and changed the app.tsx to render storybook, immediately it started crashing, if you need any particular versions i can provide with them as well.

[dannyhw]

@SaiChand-Headout if you can create a public project with the minimal changes to recreate the same error that would make it very easy to help you. Otherwise I just have examples of it working.

[SaiChand-Headout]

Hey @dannyhw , it's working in a new fresh app, figured out the issue in our app as well, the registery was pointing to codepush component in index.js which was causing the issue. When i changed the imports, it started working, thanks a lot