facebook/react-native

Error: Cannot find module 'warnOnce'

Closed this issue · 21 comments

jonbiz commented

🐛 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 commented

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 👍

  • 👍9
  • 👎36
  • ❤️2
  • 🚀1
brightermatter commented

I am bumping into the same problem here. The warnOnce module is there, and force clearing the caches, restarting the packager doesn't solve the issue.

GreenRidingHood commented

#23943
there is already open issue, maybe something useful post :( there @brightermatter you can follow that issue too

gzcheng commented

This is what I have tried:

  1. remove all references of warnOnce in react-native-implementation.js
  • run the iOS build again
  • got the following 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/gzcheng/Documents/ellentube-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)
  1. copy the warnOnce.js from /node_modules⁩/react-native/⁨Libraries⁩/Utilities to /node_modules⁩/react-native⁩/⁨Libraries⁩/⁨react-native⁩.
  • got a duplicate modul name error.

That tells me that packager is able to find the warnOnce module. I am not an expert on this, but it sounds like some we maybe using some incompatible library versions?
This issue has been bothering for about a week... would like to have it resolved soon...

gzcheng commented

My Package.json:
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-eslint": "^8.2.6",
"babel-jest": "^24.5.0",
"babel-loader": "^8.0.5",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-flow": "^6.23.0",
"babel-preset-react-native": "^5.0.0",
"concurrently": "^4.1.0",
"empty": "^0.10.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"enzyme-to-json": "^3.3.5",
"eslint": "^5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"flow-bin": "^0.95.1",
"identity-obj-proxy": "^3.0.0",
"istanbul-lib-coverage": "^2.0.3",
"istanbul-lib-instrument": "^3.1.0",
"istanbul-lib-source-maps": "^3.0.2",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.45.0",
"mockdate": "^2.0.2",
"node-sass": "^4.11.0",
"precommit-hook": "^3.0.0",
"react-native-mock": "^0.3.1",
"react-test-renderer": "^16.8.5",
"redux-mock-store": "^1.5.3"
},
"dependencies": {
"appcenter": "^1.9.0",
"appcenter-analytics": "^1.9.0",
"appcenter-crashes": "^1.9.0",
"aws-sdk": "^2.429.0",
"ellentube-helpers": "^1.2.7",
"empty": "^0.10.1",
"es6-promise": "^4.2.6",
"flat": "^4.1.0",
"jest-cli": "^24.5.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.5",
"react-native": "^0.59.2",
"react-native-admob": "github:warnerbros/react-native-admob#feature/custom-targeting",
"react-native-animatable": "^1.3.2",
"react-native-animated-sprite": "^0.11.1",
"react-native-aws-cognito-js": "0.0.7",
"react-native-code-push": "^5.6.0",
"react-native-config": "^0.11.7",
"react-native-device-info": "^1.1.0",
"react-native-fbsdk": "^0.8.0",
"react-native-fetch-blob": "^0.10.8",
"react-native-gesture-handler": "^1.1.0",
"react-native-google-signin": "^1.2.2",
"react-native-htmlview": "^0.13.0",
"react-native-image-crop-picker": "github:warnerbros/react-native-image-crop-picker#bugfix/camera_mediatype",
"react-native-iphone-x-helper": "^1.2.0",
"react-native-keyboard-aware-scroll-view": "^0.8.0",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-linear-gradient": "^2.5.4",
"react-native-open-settings": "^1.0.1",
"react-native-orientation": "^3.1.3",
"react-native-progress": "^3.6.0",
"react-native-responsive": "^1.0.2",
"react-native-snap-carousel": "^3.7.5",
"react-native-svg": "^9.3.6",
"react-native-swipeout": "^2.3.6",
"react-native-swiper": "^1.5.14",
"react-native-vector-icons": "^6.4.2",
"react-native-video": "^4.4.0",
"react-navigation": "^3.5.1",
"react-navigation-redux-helpers": "^3.0.0",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"string-hash": "^1.1.3"
},

.babelrc:

{
"presets": ["react-native","module:react-native", "@babel/preset-flow", "module:metro-react-native-babel-preset"],
"plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"],
"retainLines": true,
}

oreporan commented

Any updates on this? Nothing seems to get rid of the warnOnce doesn't exist error


... with error:(Unable to resolve module `warnOnce` from `/Users/.../mobile/node_modules/react-

native/Libraries/react-native/react-native-implementation.js`: Module `warnOnce` does not exist in

 the Haste module map
hcantave commented

What may cause the error below?
SyntaxError in node_modules\react-native\Libraries\Utilities\warnOnce.js: Unexpected token (15:16)
Failed building JavaScript bundle.

  • 👍1
IAmMarcellus commented

@rickhanlonii Should warnOnce.js be using types? Because it is, even though its not a typescript file. Could that be what's causing it to be left out of the haste map? As @gzcheng pointed out, it doesn't seem like the packager is having trouble finding the file.

hcantave commented

I verified the file is there is in .\node_modules\react-native\Libraries\Utilities\WarnOnce.js

ptsteadman commented

Changing my .babelrc to only "presets": ["module:metro-react-native-babel-preset"] as discussed here fixed the issue for me.

  • 👍3
  • 👎2
IAmMarcellus commented

@ptsteadman I'm using bable.config.js and I'm already using that preset.

harudev commented

I did upgrade my rn project from 0.59.9 to 0.60.5.
And with some reason which I can't remember, I made a "react-native.config.js" file.
After upgrade rn version, there is warnOnce issue.
But new test project doesn't have.
So I tested some files to test project, and find out "react-native.config.js" file was the reason.
If there is someone suffered this issue, try to remove file or options from one of your "*.config.js" 😅

  • 👍1
  • 👎1
  • ❤️1
lefoy commented

Changing my .babelrc to only "presets": ["module:metro-react-native-babel-preset"] as discussed here fixed the issue for me.

tried a few things, that solution worked for me

jamalx31 commented

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,
      },
    }),
  },
};
  • 👍20
  • 👎3
  • 🎉1
  • 😕2
  • ❤️7
  • 🚀2
wouterds commented

None of above suggested solutions fixed it for me. Still happening, I'm on react-native 0.60.5 and can't upgrade for the time being.

  • 👍3
Shaghlaty commented 
```shell
 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

no its not there , what should i do ?

bisanedev commented

try use
npx react-native
not
react-native

  • 👍4
  • 👎2
  • 🎉2
  • ❤️1
engineerbaraazakariya commented

Just stop the terminal window that is executing the metro (Ctrl+C) and in same terminal windows run this:
yarn start --reset-cache
It will work with no other changes!

  • 👎3
hesham-abboud commented

try use
npx react-native
not
react-native

this solved my issue

  • 👎3
arupsarkar commented

I followed @rickhanlonii and @engineerbaraazakariya instructions, unfortunately did not work, posted a question in stackoverflow any new insight into this problem.

wouterds commented

We have a legacy project with the same issue. I kid you not I tried everything that was suggested above. Anyway, hours later I finally managed to get around this by installing a specific old version of react native cli globally. TLDR: npm i -g react-native-cli@2.0.1