Storybook: RN 0.59.8 - Module `react-native` does not exist in Haste module map

[Jobeso]

Describe the bug
When installing storybook with a clean react-native 0.59.8 project storybook is not working due to react-native not being found in the Haste module map.

Here is a repo to reproduce.

To Reproduce
Steps to reproduce the behavior:

1. react-native init storybookexample
2. npx -p @storybook/cli sb init
3. react-native start --projectRoot storybook
4. react-native run-ios --simulator 'iPhone 8'

Expected behavior
Seeing default storybook screen.

Screenshots
error message

System:

• OS: [e.g. iOS, Windows10, MacOS]
• Browser: Chrome
• Framework: react-native
• Addons: not relevant
• Version: 5.0.11 & 4.0.11

React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
      Memory: 40.38 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.1.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 24, 25, 26, 27, 28
        Build Tools: 26.0.3, 27.0.3, 28.0.2, 28.0.3
        System Images: android-19 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.8 => 0.59.8

Additional context
I also tried downgrading like described in #6452 but the error doesn't change.

I also tried replacing the index.js with export default from './storybook'; but a similar issue occurs saying not being able to finde emotion-theming in Haste module map, see error message

[mathew3]

Same issue as @Jobeso with brand new project following automatic setup. Eventually managed to run it with manual setup which added an old version tho: "@storybook/react-native": "^4.1.18",

[mcdonnelldean]

Same issue for me, different module, Note this is using the same version of storybook as @mathew3 as the default auto installer failed due to missing 5.x.

Unable to resolve module `core-js/modules/es6.object.define-property` from `/Users/user/repos/foo/node_modules/@storybook/react-native/dist/index.js`: Module `core-js/modules/es6.object.define-property` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.

ABI32_0_0RCTFatal
__37-[ABI32_0_0RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start
0x0

[kubilaykiymaci]

i have same versions, configs and same issue. i can’t start storybook with rn 0.59.8

[jamsch]

Just installed 5.1.0-rc.2 from 4.1.18 to try it out and get the same kind of error:

error: bundling failed: Error: Unable to resolve module `emotion-theming` from `/home/jamsch/Documents/rn-app/node_modules/@storybook/react-native/dist/preview/index.js`: Module `emotion-theming` does not exist in the Haste module map

[benoitdion]

does it work if you install emotion as a dev dependency?

[erhanbicer]

same problem

[Jobeso]

@benoitdion thanks for the response. I tried out your suggestion and this fixes it.
I now used 5.2.0-alpha.19 and added emotion-theming and @emotion/core as dev dependencies and after that I was able to use storybook.

I can create a PR adding those two dev dependencies if it helps you.

[JeffGuKang]

To install @emotion/core is solved this issue in react native 0.59.9.

yarn add -d @emotion/core

"@storybook/addon-actions": "^5.1.3",
    "@storybook/addon-links": "^5.1.3",
    "@storybook/addons": "^5.1.3",
    "@storybook/react-native": "^5.1.3",
    "@storybook/react-native-server": "^5.1.3",
    "@emotion/core": "^10.0.10",

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[anfriis]

I had the same issue when installing these versions of Storybook:

"@storybook/addon-actions": "^5.1.9",
"@storybook/addon-links": "^5.1.9",
"@storybook/addons": "^5.1.9",
"@storybook/react-native": "^5.1.9",
"@storybook/react-native-server": "^5.1.9",

Solved it by adding emotion-theming and @emotion/core as dev dependencies as explained in the previous comments:

yarn add --dev @emotion/core
yarn add --dev emotion-theming

I guess these dependencies should be added to Storybook's dependencies.

[Gongreg]

@benoitdion, could you look into it?

[MasterAM]

@benoitdion I think that there are 2 distinct issues here:

• Unmet peer dependencies, solved by explicitly adding them to the libraries in your PR.
• Error when running with a different projectRoot, as described in the original post. I have encountered this issue myself and would really prefer to have storybook as a separate entry point, and avoid mixing it with my production application's code. Do you have any insights regarding the failure to build in such a case?

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-alpha.41 containing PR #7362 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.