ERROR in ./node_modules/react-native/index.js 13:7

[ghmendonca]

Describe the bug
Just followed the react native getting started tutorial (https://www.learnstorybook.com/intro-to-storybook/react-native/en/get-started/), added typescript support and when I try to run yarn storybook I get this error

To Reproduce
Steps to reproduce the behavior:
Just follow this link: https://www.learnstorybook.com/intro-to-storybook/react-native/en/get-started/

Expected behavior
Expect to get storybook to start working

System

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor
  Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.19.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.68)
  npmPackages:
    @storybook/addon-actions: ^5.3 => 5.3.21
    @storybook/addon-knobs: ^5.3 => 5.3.21
    @storybook/addon-links: ^5.3 => 5.3.21
    @storybook/addon-ondevice-actions: ^5.3.23 => 5.3.23
    @storybook/addon-ondevice-knobs: ^5.3.23 => 5.3.23
    @storybook/react-native: ^5.3.23 => 5.3.23
    @storybook/react-native-server: ^5.3.23 => 5.3.23

[dannyhw]

@ghmendonca hey thanks for raising this issue, I will look into it when I can :).

[barnardb]

I tried following the same "Storybook for React Native tutorial" to add Storybook to an existing expo application. I'm using MacOS. I get the same ERROR in ./node_modules/react-native/index.js 13:7 when running yarn storybook after adding import '@storybook/addon-ondevice-actions/register'; to addons.js. (When I don't include that import statement, yarn storybook emits no errors and opens the UI in the browser, but the sidebar never finishes loading.)

[barnardb]

I had changed addons.js, but the tutorial directs that rn-addons.js should be changed. @ghengeveld is it possible you made the same mistake that I did?

(Now I just need to figure out why the sidebar never finishes loading for me.)

[dannyhw]

@barnardb not sure if you already solved it but there is an open issue with some solutions at #55

[ghmendonca]

Any progress?

[dannyhw]

@ghmendonca what version of react-native-web are you using? It's probably using v0.13 or something. If you downgrade it to 0.11.7 it might work.

Please bear in mind that this tutorial is very out of date now and even the expo taskbox template is drastically different since when the tutorial was written.

[mandajoan]

Getting this error when running on react native expo project (project is inside a NX monorepo for context. As the error is the same as reported here with other react-native projects, I think this is an issue with storybook vs nx).

Package Versions:

    "@storybook/addon-essentials": "^6.1.17",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-knobs": "^6.1.11",
    "@storybook/addon-links": "^6.1.17",
    "@storybook/addons": "^6.1.17",
    "@storybook/react": "^6.2.7",
    "@storybook/react-native": "^5.3.25",

Followed setup instructions in this tutorial that has steps to upgrade to storybook v6: https://nx.dev/latest/react/storybook/overview

[dannyhw]

@mandajoan there is currently no support for 6.0 with react native storybook so you'll need to downgrade otherwise I can't guarantee it will work. These two versions (5 and 6) are not intended to be compatible because 6.0 has breaking changes.

[mandajoan]

@mandajoan there is currently no support for 6.0 with react native storybook so you'll need to downgrade otherwise I can't guarantee it will work. These two versions (5 and 6) are not intended to be compatible because 6.0 has breaking changes.

ah thank you!

Also what we were missing in our webpack.config.js in the .storybook of the project to get past this error was:

  config.externals = {
    'react-native': true,
  };