react-native: Cannot find module 'warnOnce' from 'react-native-implementation.js'

I have resolved this issue, and for me the problem was with .bablerc. For some reason I had "presets": ["module:react-native", "react-native"] instead of "presets": ["module:metro-react-native-babel-preset"]

Have someone found a fix yet? I am stuck on this

For users encountering this issue, does this fix help?

• Open node_modules/react-native/jest/setup.js
• Add the following line: (doesn’t really matter where - the end of the file, or near the other calls to .mock())

jest.mock('warnOnce', () => () => {});

If it works, I can submit this as a pull request and preferably try to get this in by the next release of RN.

cc @jogboms

react-native 0.60.4 still having this issue after trying all above 😦 react-native 0.60.* - all versions have warnOnce issue.

UPD: I’m using macOS, don’t know if this makes any difference 🤷‍♂️

This was fixed on master (we stopped using haste) and it will be part of 0.61. If you are using a previous version of RN, make sure you are using "jest": { "preset": "react-native" } in your setup properly, otherwise it will not work.

Why is this issue closed? Still facing the same issue, on different computers.

@cpojer

"jest": { "preset": "react-native" } is set in package.json but still being met with this error.

Make sure you don’t have multiple configs for jest. If you have jest.config.js in your root and then "jest": { "preset": "react-native" } in package.json then you’ll be thrown this error. Move the preset setting into jest.config.js and remove the entry in package.json

Also, please don’t use @tinmar33’s suggestion for the babel preset. Stick to metro-react-native-babel-preset

In my case it was because I didn’t have babel-preset-react-native on my dev dependencies.

npm i --save-dev babel-preset-react-native

@sonukj @amunim solution did not work for me, i have babel.config.json file and like this,

module.exports = { presets: [‘module:metro-react-native-babel-preset’], };

but still having that error in my xcode

• node /Users/me/dev/myapp/node_modules/react-native/cli.js bundle --entry-file index.js --platform ios --dev false --reset-cache --bundle-output /Users/me/dev/myapp/ios/build/Build/Products/Release-iphonesimulator/myapp.app/main.jsbundle --assets-dest /Users/me/dev/myapp/ios/build/Build/Products/Release-iphonesimulator/myapp.app warning: the transform cache was reset. Loading dependency graph, done. error index.js: Cannot find module ‘warnOnce’. Run CLI with --verbose flag for more details.
• [[ false != true ]]
• [[ ! -f /Users/me/dev/myapp/ios/build/Build/Products/Release-iphonesimulator/myapp.app/main.jsbundle ]]
• echo ‘error: File /Users/me/dev/myapp/ios/build/Build/Products/Release-iphonesimulator/myapp.app/main.jsbundle does not exist. This must be a bug with’ error: File /Users/me/dev/myapp/ios/build/Build/Products/Release-iphonesimulator/myapp.app/main.jsbundle does not exist. This must be a bug with

react-native version 0.59.5 still have same issue, if i downgraded to 58, yes i dont get this error anymore, but i am getting this kind of error

::ffff:127.0.0.1 - - [24/Apr/2019:19:43:46 +0000] “GET /index.ios.bundle?platform=ios&dev=true&minify=false HTTP/1.1” 200 - “-” “myapp/6 CFNetwork/975.0.3 Darwin/17.7.0” Error: Unable to resolve module ./index.ios from /Users/me/dev/myapp/.: The module ./index.ios could not be found from /Users/me/dev/myapp/.. Indeed, none of these files exist:

• /Users/me/dev/myapp/index.ios(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
• /Users/me/dev/myapp/index.ios/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx) at ModuleResolver.resolveDependency (/Users/me/dev/myapp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15) at ResolutionRequest.resolveDependency (/Users/me/dev/myapp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18) at DependencyGraph.resolveDependency (/Users/me/dev/myapp/node_modules/metro/src/node-haste/DependencyGraph.js:273:16) at /Users/me/dev/myapp/node_modules/metro/src/lib/transformHelpers.js:261:42 at Server.<anonymous> (/Users/me/dev/myapp/node_modules/metro/src/Server.js:935:41) at Generator.next (<anonymous>) at asyncGeneratorStep (/Users/me/dev/myapp/node_modules/metro/src/Server.js:73:24) at _next (/Users/me/dev/myapp/node_modules/metro/src/Server.js:93:9) at process._tickCallback (internal/process/next_tick.js:68:7)

anyway after that RN58 error, i am using 59 again but … … agghh i have to use xcode 10 with react-native 😦

xcode Version 10.1 (10B61) react-native-cli: 2.0.1 react-native: 0.59.5

Update: I finally gave up on react native and from this docs facebook I used expo cli to generate my app Which does not use flow so even if my IDE(VS Code) has flow enabled the project doesn’t support it hence it works flawlessly.

For those Who want to use native features such as AndroidManifest, opening up the project with android studio and/or XCode simply run npm run efect or yarn eject for yarn

This is the only solution(s) I’ve found and I don’t mind using it.

I was using version 0.60.0 and this bug as occurring. Upgraded to the latest version as of now, which is 0.61.2 and things went smoothly.

I’m getting same issue for a bunch of things after upgrading to 0.61.0 (from 0.59.10) including Alert, Dimensions, Platform.

To workaround it I’ve started mocking react-native itself and then mock whichever named export I need…

// From
jest.mock('Platform', () => ({
    OS: 'someOS'
}));

// To
jest.mock('react-native', () => ({
  Platform: {
    OS: 'someOS'
  }
}));

Still think there’s an issue here though as I’m able to reproduce on a fresh React Native project.

@cpojer May I know when the 0.61 is going to out? since have to get the fix for getting our unit tests passed and role out to the market before Aug 01 due to the Google play store 64-bit compliance. Thanks, Much appreciated.

If you have jest.config.js file inside your root directory, you should add preset: 'react-native', property to module.export

so It will look like:

jest.config.js

module.exports = {
	preset: 'react-native',
        ...
};

Okay, this is somewhat magical, but for me the problem was fixed when I deleted my jest.config.js and moved config to package.json, even despite the contents being identical.

I created a new react-native project with a newer version (0.59.4). still facing the same issue I downgraded the react-native version to 0.58.0 and created the web-pack configuration.all worked fine. I think the actual issue is with the warnOnce.js file. @amunim can u try with the older version(0.58.0)

@empyrical Any suggestions? I had to update to 0.60.X to implement the facebook SDK, but I can’t do anything now that I’ve updated because of this issue. I’ve followed all of the suggestions, but nothing is working and I really need to release the update for my app, but can’t until this is resolved so any help would be MUCH appreciated.

Still have this issue with the above steps:

• OS: macOS Mojave 10.14.6
• react: 16.8.6
• react-native: 0.60.4
• Jest: 24.8.0

I’m hoping RN v0.61 will come out soon.

After several hours of this, this tool helped me out by showing what changes happened between the two versions, and just copying the changes that might be the reason why 0.59 works for some but not others.

So this is the thing that fixed it for me. Others with the issue please confirm if this works for you:

In package.json

"jest": {
    "preset": "react-native"
}

I’m not sure if that works in XCode since this solution is jest-specific but it means there’s some babel magic going on under the hood that you should be adding to your XCode setups to get this to work. Hopefully this helps though.

The workaround to mock it is not working for me.

Currently investigating the issue. Here’s what I have so far in case anyone wants to jump in with me. We might be able to do a pull request to resolve this issue.

File: node_modules/react-native/Libraries/react-native/react-native-implementation.js I replaced

const warnOnce = require('warnOnce');

with

const warnOnce = require('../Utilities/warnOnce');

Then in node_modules/react-native/Libraries/Utilities/warnOnce.js I commented out all the flow annotations (as node cannot use a Flow-annotated file directly).

That fixed it. Error gone.

However, running yarn jest -u now gives me:

Cannot find module 'StyleSheet' from 'react-native-implementation.js'

    However, Jest was able to find:
    	'../Card.js'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

StyleSheet is required in line 302 of node_modules/react-native/Libraries/react-native/react-native-implementation.js, but is defined separately with Flow annotations in node_modules/react-native/Libraries/StyleSheet/StyleSheet.js:

  get StyleSheet() {
    return require('StyleSheet');
  }

My guess is that if I fix up this file by removing the type annotations and making the require path explicit in terms of putting down the relative paths instead, this error will disappear and the next React Native element that my component uses will be declared missing.

As an indirect test, I removed the use of StyleSheet in my React Native component and lo and behold, the error disappeared. Now yarn jest -u gives me this:

  The Card Component
    ✕ should render with children correctly (17ms)
    ✕ should render with styles and children correctly (1ms)

  ● The Card Component › should render with children correctly

    Cannot find module 'View' from 'react-native-implementation.js'

      15 |     const component = (
      16 |       <Card>
    > 17 |         <View />
         |          ^
      18 |       </Card>
      19 |     )
      20 |     const tree = renderer.create(component).toJSON()

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:229:17)
      at Object.get View [as View] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:170:12)
      at Object.<anonymous> (src/__tests__/Card.test.js:17:10)

  ● The Card Component › should render with styles and children correctly

    Cannot find module 'View' from 'react-native-implementation.js'

      29 |         }}
      30 |       >
    > 31 |         <View />
         |          ^
      32 |       </Card>
      33 |     )
      34 |     const tree = renderer.create(component).toJSON()

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:229:17)
      at Object.get View [as View] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:170:12)
      at Object.<anonymous> (src/__tests__/Card.test.js:31:10)

From all of this, I gather that React Native is failing to import its own files that are defined in node_modules/react-native/Libraries. It cannot directly import them because those files are Flow-annotated, so there must be a build step somewhere that compiles the code and places the result inside node_modules/react-native/node_modules so that react-native-implementation.js can treat them like modules in the way it’s currently treating them.

However, ls node_modules/react-native/node_modules gives me:

ansi-regex		debug			is-fullwidth-code-point	path-type		read-pkg-up		ws
chardet			external-editor		load-json-file		pretty-format		strip-ansi		yargs
cliui			inquirer		ms			read-pkg		strip-bom		yargs-parser

Which means there is some disconnect between how these library files are being declared and how they’re being consumed. The in-between step is missing.

same here

Nothing worked 😦 For me it’s associated with a particular package, @shoutem/ui. I’ll cross-post an issue there.

Changing metro.config.js to this helped me

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,
      },
    }),
  },
};

I’m having the same issue, Cannot find module 'Dimensions'. No mocks for react-native are working. On 0.60.6 everything works fine but both 0.61.0 and 0.61.1 are giving this error.

I was fixed this error. I add module.exports = { preset: 'react-native', ....} in file jest.config.js. I used "react": "16.8.6", "react-native": "0.60.5", Device macOS Mojave version 10.14.5

I’m having this same issue when trying to run tests, but instead of jest I’m using mocha (planning on migrating to jest in the future).

@empyrical it didn’t work for me, returns same errors

Having the same issue here, I am on RN 0.59.8

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…