Storybook: RN: Unable to resolve module `AccessibilityInfo`

[D1no]

I would love to implement storybooks into an open source project (https://github.com/shoplinksys/react-native-scandit/tree/storybook). The project runs fine with the default packanger, but the storybook packanger errors out with an Unable to resolve module AccessibilityInfo.

Current Reproduction-Commit with Files & Set-Up:
https://github.com/shoplinksys/react-native-scandit/tree/c16e2b9d82008f0a3a825ffde6387676d18ad1da

package.json

{
  "name": "scandit",
  "version": "1.1.5",
  "description": "Scandit React-Native Demo for iOS and Android (using react-native-scandit).",
  "author": "Shoplink GmbH <[email protected]> (http://shop.link)",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "storybook": "storybook start -p 7007",
    "storybook-setup-android-device": "adb devices && adb reverse tcp:8081 tcp:8081 && adb reverse tcp:9001 tcp:9001 && adb reverse tcp:7007 tcp:7007",
    "clear-repo": "git clean -fdx -e _demo_/.vscode -e _demo_/ios/ScanditSDK/ -e _demo_/android/app/src/vendor/ScanditSDK/",
    "git-untrack-scandit-key": "git update-index --skip-worktree SCANDIT_KEY.js",
    "git-track-scandit-key": "git update-index --no-skip-worktree SCANDIT_KEY.js"
  },
  "dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.46.4",
    "react-native-scandit": "^1.1.5",
    "styled-components": "^2.1.1"
  },
  "devDependencies": {
    "@storybook/react-native": "^3.1.9",
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "2.1.0",
    "jest": "20.0.4",
    "prop-types": "^15.5.10",
    "react-dom": "16.0.0-alpha.12",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "jest": {
    "preset": "react-native"
  },
  "license": "MIT",
  "homepage": "https://github.com/shoplinksys/react-native-scandit.git"
}

Console Error

➜  _demo_ git:(storybook-bug-investigation) npm run storybook

> [email protected] storybook /Users/worker/development/react-native-scandit/_demo_
> storybook start -p 7007

=> Loading custom .babelrc from project directory.
=> Using default webpack setup based on "Create React App".
=> Loading custom webpack config (full-control mode).

React Native Storybook started on => http://localhost:7007/

Scanning 848 folders for symlinks in /Users/worker/development/react-native-scandit/_demo_/node_modules (12ms)
 ┌────────────────────────────────────────────────────────────────────────────┐
 │  Running packager on port 8081.                                            │
 │                                                                            │
 │  Keep this packager running while developing on any JS projects. Feel      │
 │  free to close this tab and run your own packager instance if you          │
 │  prefer.                                                                   │
 │                                                                            │
 │  https://github.com/facebook/react-native                                  │
 │                                                                            │
 └────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
   /Users/worker/development/react-native-scandit/_demo_/storybook
   /Users/worker/development/react-native-scandit/_demo_
   /Users/worker/development/react-native-scandit/_demo_


React packager ready.

Loading dependency graph, done.
webpack built 583b6265b6f6ade87198 in 4056ms
Bundling `index.android.js`  99.4% (350/351), failed.
error: bundling failed: "Unable to resolve module `AccessibilityInfo` from `/Users/worker/development/react-native-scandit/_demo_/node_modules/react-native/Libraries/react-native/react-native-implementation.js`: Module does not exist in the module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`."

I already tried to reset all caches (npm, yarn, watchman, packanger, build) but it did not make a difference to the storybook packager. Incl. uninstalling and re-installing storybook.

Is there some storybook cache directory that could be a problem?

[D1no]

Current Workaround: use sudo

I am not sure why, but the dependency map seems to resolve when storybook is ran as
sudo yarn run storybook. I got the inspiration from this comment: https://github.com/facebook/react-native/issues/14209#issuecomment-313654205

Does storybook use components of an "old" rn-packager (which had issues until v.46.3)?

[shilman]

@D1no nice workaround 😭 . I'm sure the storybook packager is out of date, and I'm not even sure if any of the core maintainers are RN-savvy enough to get it upgraded. @mnmtanish ?

[RWOverdijk]

Sudo works. Doesn't feel to nice though

[shilman]

@RWOverdijk yes it's definitely a workaround and not a solution. We'll get on this, or feel free to contribute a fix if you're motivated!

[RWOverdijk]

@shilman If I manage to free up some time I'll definitely give it a go.

[D1no]

The new packanger implementation https://github.com/storybooks/storybook/pull/1568 solves this issue and is not a problem anymore with the current storybook release [v3.2.9 as of this writing]. Therefore I close this.

[MobTechnology]

I am facing the same issue . I have used this
That error is because of your react native project version.

You have to create your project like this by this version for now --->

react-native init ProjectName --version 0.55.4

Just wait for next version of React Native to let them fix that problem.
https://stackoverflow.com/questions/51498218/react-native-error-unable-to-resolve-module-accessibilityinfo

[mustafakucuk]

I solved: "react-native init ProjectName --version 0.55.4".

Thanks @thegreate

[SubashManian]

I stuck in the issue of module Accessibility and searched solution for this issue in GitHub lot of members says downgrade the react-native version i try that too still i got the issue. when i try to upgrade the version i got the issues in my project files are missed. it says the Unable to resolve ../screens/hub.js(my project file)

me some solution to fix this.

This are my dependencies.
<
"devDependencies": {
"@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
"babel-jest": "23.4.2",
"babel-preset-react-native": "^5",
"jest": "23.5.0",
"react-test-renderer": "16.4.1"
},
"dependencies": {
"@expo/vector-icons": "^6.3.1",
"axios": "^0.18.0",
"immutable": "^3.8.2",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"native-base": "^2.8.0",
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-actionsheet": "^2.4.2",
"react-native-auth0": "^1.3.0",
"react-native-hub-bridge": "file:react-native-hub-bridge",
"react-native-i18n": "^2.0.15",
"react-native-loading-spinner-overlay": "^0.5.2",
"react-native-modal": "^6.5.0",
"react-native-modal-dropdown": "^0.6.2",
"react-native-network-info": "^4.0.0",
"react-native-progress": "^3.5.0",
"react-native-select-multiple": "^1.2.0",
"react-native-sortable-grid": "^2.0.0",
"react-native-super-grid": "^2.4.3",
"react-navigation": "2.5.3",
"react-navigation-tabs": "^0.8.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-act": "^1.7.4",
"redux-form": "^7.4.2",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-saga": "^0.16.0",
"reselect": "^3.0.1",
"xcode": "^1.0.0"
}
>