Error: Cannot find module 'warnOnce'

🐛 Bug Report

I’ve been given a project and after having upgraded react-native to 0.59 the build succeeds but packager throws:

error: bundling failed: Error: Cannot find module 'warnOnce'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/user/projects/App/packages/frontend/mobile/node_modules/react-native/Libraries/react-native/react-native-implementation.js:14:18)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)

Also running react-native run-ios makes the application launch and then quit without interacting with the metro-bundler. Only XCode run works.

Expected Behavior

The application to launch.

Environment

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
      Memory: 4.29 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
      Yarn: 1.13.0 - ~/.nvm/versions/node/v8.12.0/bin/yarn
      npm: 6.7.0 - ~/.nvm/versions/node/v8.12.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.0.0-alpha.12 => 16.0.0-alpha.12
      react-native: 0.59.0 => 0.59.0
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

The project uses yarn workspaces and some dependencies get hoisted down to the RN App directory.

Root package.json

"devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23.4.2",
    "babel-plugin-module-resolver": "^3.0.0",
    "babel-plugin-transform-inline-environment-variables": "^0.2.0",
    "eslint-config-samsao-mobile": "^2.0.1",
    "eslint-config-samsao-node": "^2.0.1",
    "eslint-config-samsao-web": "^2.0.1",
    "eslint-import-resolver-babel-module": "^4.0.0",
    "eslint-plugin-react": "^7.6.1",
    "eslint-watch": "^3.1.3",
    "flow-bin": "^0.95.1",
    "flow-watch": "^1.1.2",
    "jest": "^22.1.0",
    "prettier": "1.10.2",
    "prettier-check": "^2.0.0",
    "rimraf": "^2.6.2",
    "yarn-run-all": "^3.1.1"
  },

RN App package.json:

  "dependencies": {
    "@babel/runtime": "^7.3.4",
    "accounting": "^0.4.1",
    "apisauce": "^0.14.0",
    "assert": "^1.4.1",
    "browserify-zlib": "^0.1.4",
    "buffer": "^5.0.8",
    "console-browserify": "^1.1.0",
    "constants-browserify": "^1.0.0",
    "d3": "^4.8.0",
    "d3-interpolate": "^1.1.4",
    "dns.js": "^1.0.1",
    "domain-browser": "^1.1.7",
    "events": "^1.1.1",
    "format-json": "^1.0.3",
    "geolib": "^2.0.23",
    "https-browserify": "0.0.1",
    "inherits": "^2.0.3",
    "lodash": "^4.17.2",
    "metro-react-native-babel-preset": "0.50.0",
    "moment": "^2.18.1",
    "path-browserify": "0.0.0",
    "process": "^0.11.10",
    "punycode": "^1.4.1",
    "querystring-es3": "^0.2.1",
    "querystringify": "0.0.4",
    "ramda": "^0.24.1",
    "react": "16.0.0-alpha.12",
    "react-native": "0.59.0",
    "react-native-android-keyboard-adjust": "^1.0.0",
    "react-native-animatable": "^1.2.2",
    "react-native-barcode-builder": "^1.0.2",
    "react-native-config": "^0.2.1",
    "react-native-crypto": "^2.1.1",
    "react-native-device-brightness": "^1.2.0",
    "react-native-device-info": "^0.10.0",
    "react-native-drawer": "^2.3.0",
    "react-native-extended-stylesheet": "^0.6.0",
    "react-native-fbsdk": "github:facebook/react-native-fbsdk.git#0.9.0",
    "react-native-google-analytics-bridge": "^5.6.0",
    "react-native-google-places-autocomplete": "^1.3.2",
    "react-native-http": "github:tradle/react-native-http#834492d",
    "react-native-i18n": "^2.0.2",
    "react-native-interactable": "^0.1.1",
    "react-native-iphone-x-helper": "^1.0.1",
    "react-native-level-fs": "^3.0.0",
    "react-native-maps": "^0.15.3",
    "react-native-material-kit": "^0.4.1",
    "react-native-modal-datetime-picker": "^4.11.0",
    "react-native-modal-dropdown": "^0.5.0",
    "react-native-modal-picker": "^0.0.16",
    "react-native-open-settings": "^0.0.3",
    "react-native-os": "^1.1.0",
    "react-native-permissions": "^1.0.0",
    "react-native-popover-tooltip": "^1.1.1",
    "react-native-randombytes": "^3.0.0",
    "react-native-sentry": "^0.36.0",
    "react-native-spinkit": "github:maxs15/react-native-spinkit#c499f0d",
    "react-native-swipe-gestures": "^1.0.2",
    "react-native-tcp": "^3.3.0",
    "react-native-text-input-mask": "^0.8.0",
    "react-native-udp": "^2.1.0",
    "react-native-vector-icons": "4.0.0",
    "react-native-version-number": "^0.3.0",
    "react-navigation": "^1.0.0-beta.13",
    "react-redux": "^5.0.2",
    "reactotron-react-js": "^1.12.2",
    "reactotron-react-native": "^1.12.2",
    "readable-stream": "^1.0.33",
    "redux": "^3.6.0",
    "redux-logger": "^3.0.6",
    "redux-observable": "^0.14.1",
    "redux-persist": "^4.1.0",
    "redux-persist-transform-filter": "^0.0.16",
    "reduxsauce": "0.4.1",
    "seamless-immutable": "^7.0.1",
    "stream": "^0.0.2",
    "stream-browserify": "^1.0.0",
    "string_decoder": "^0.10.31",
    "timers": "^0.1.1",
    "timers-browserify": "^1.4.2",
    "tty-browserify": "0.0.0",
    "twix": "^1.2.1",
    "url": "^0.10.3",
    "util": "^0.10.3",
    "vm-browserify": "0.0.4"
  },
  "devDependencies": {
    "husky": "^0.13.1",
    "mockery": "^2.0.0",
    "react-test-renderer": "16.0.0-alpha.12",
    "reactotron-redux": "^1.12.2",
    "snazzy": "^7.0.0",
    "standard": "10.0.2",
    "yarn-run-all": "^3.1.1"
  },

Podfile:

target 'App' do
  pod 'IQKeyboardManager'
  pod 'React', :path => '../node_modules/react-native'
  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
  pod 'GoogleMaps'

  pod 'react-native-fbsdk', :path => '../node_modules/react-native-fbsdk'
  pod 'FBSDKCoreKit', '4.41.1'
  pod 'FBSDKLoginKit', '4.41.1'
  pod 'FBSDKShareKit', '4.41.1'
end

Is this related to dependencies?

[rickhanlonii]

If you go out to ./node_modules/react-native/Libraries/react-native/react-native-implementation.js you should see a line like const warnOnce = require('warnOnce'); on line 14

This line is importing the warnOnce module using haste. The warnOnce file should be in ./node_modules/react-native/Libraries/Utilities/warnOnce.js (confirm it’s there)

If the file is there then that means that it’s missing in the haste map or otherwise not discoverable by metro so to fix you can force metro to rebuild the haste map from scratch by clearing the cache

To clear basically all RN caches you can run this:

 watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean --force && npm install && npm start -- --reset-cache

If you still have the issue let us know but note that this is more of an environment issue than a bug so we’re limited in what we can do to help without a repo 👍

[jamalx31]

I start facing this issue after upgrading form RN 60.4 to 61.1. My workaround is to change metro.config.js to look like this

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([
      /node_modules\/.*\/node_modules\/react-native\/.*/,
    ])
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};