React-native: Requiring unknown module "undefined"

Created on 3 Mar 2018 · 49Comments · Source: facebook/react-native

Error after upgrading 0.54.0 from 0.53.3.

Requiring unknown module "undefined".If you are sure the module is there, try restarting Metro Bundler. You may also want to run yarn, or npm install (depending on your environment).
handleException @ ExceptionsManager.js:65
handleError @ InitializeCore.js:115
reportFatalError @ error-guard.js:44
guardedLoadModule @ require.js:141
_require @ require.js:130
executeApplicationScript @ debuggerWorker.js:40
(anonymous) @ debuggerWorker.js:65
ExceptionsManager.js:65 Module AppRegistry is not a registered callable module (calling runApplication)

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.4
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.0 => 0.54.0

Expected Behavior

App should launch

Actual Behavior

UnknownModuleError

Steps to Reproduce

react-native run-android

Bug Help Wanted Locked

Source

jkbreunig

👍41

Most helpful comment

I was able to resolve this issue for my project by doing the following...

Given that this issue seems to be caused when there is import {y} from './x' and import {z} from 'myapp/x' in the same file, I was able to track down these files with these steps:

Run your app until you get the error message
In the stack trace, click on the filename included from your project, under one of the _require items in the stack trace. See screenshot below:

_Be sure you have set the REACT_EDITOR variable set so react-native can open the file with an editor_

simulator screen shot - iphone 7 - 2018-03-14 at 07 23 53

In my file (actions.js), before changes

import {
  getUserEmail
} from 'myapp/user/selectors';

import {
  getUserName
} from './selectors';  //<-- same file as 'myapp/user/selectors'. This is why metro crashes

actions.js after changes

// Change the above to: 
import {
  getUserEmail,
  getUserName
} from 'myapp/user/selectors';

This will also work:


// Or you can change it to: 
import {
  getUserEmail,
  getUserName
} from './selectors';

Now run your app again, and you may get the same error, but it will now point to a different file (assuming you have resolved all imports in the first file). If you get the error in a new file, repeat steps above until all files are cleaned up.

I had to do this 3-4 times before I had found all of the modules that have import {y} from './x' and import {z} from 'myapp/x' in the same file. Hope this helps someone else.

wildseansy on 14 Mar 2018

👍33 🎉17 ❤6

All 49 comments

Same problem

Jeepeng on 4 Mar 2018

👍20

Same here! This is a blocking issue for us.

itchingpixels on 4 Mar 2018

Same problem. A few days can't solve.

mobdim on 4 Mar 2018

same problem, stuck too

HumanUndead on 5 Mar 2018

same issue

Maydar on 5 Mar 2018

https://github.com/react-community/react-native-maps/issues/2051#issuecomment-370055156

hugoskwirrel on 5 Mar 2018

👍3

Can you clarify - this happens on a brand new project?

hramos on 5 Mar 2018

this happens after upgrading from 0.53.3 to 0.54 not on the whole project but some screens

HumanUndead on 5 Mar 2018

ok fixed my problem, in my case it was An import for a component using relative path, instead of the @ way. replacing that fixed it

HumanUndead on 5 Mar 2018

👍2

@HumanUndead Do you have an example of what your problem is? I have a simple class export that is failing with undefined

export class TouchableOpacityWebSafe extends Component { ... }

and importing with

import { TouchableOpacityWebSafe } from '../../components/webSafe/TouchableOpacityWebSafe'

fails.

This happened after upgrade from 0.53.3 to 0.54

cipriancaba on 6 Mar 2018

Fix your import, dont use ../../ for your import, use @.

HumanUndead on 6 Mar 2018

👎18 👀1 😕1

How would that work? This is a relative path in my custom components.. It's not related to any package.. Maybe I'm missing something about the @ import syntax?

cipriancaba on 6 Mar 2018

Place a packages.json file in your components folder, give it name: ‘components’
Then you can use the @ import syntax

HumanUndead on 6 Mar 2018

Even if that might work, I don't think this is the solution for the problem.. The problem is that the imports are failing and I don't really understand why..

Reverted to 0.53.3 for now..

cipriancaba on 6 Mar 2018

👍10

It will work but its up to you

HumanUndead on 6 Mar 2018

👎37

@HumanUndead - I removed relative imports that go 'up' directories, using the package.json and import MyComponent from 'components/MyComponent' syntax. What do you mean by the '@ syntax' though...? I'm still getting the issue with unknown module 'undefined'. Did you have to replace ALL relative imports, including ones with './MyModule'? ...or just ones that go up 1 or more directories ('../MyModule')?

wildseansy on 6 Mar 2018

Are you using react-native-maps ?

If so, react-native-maps may be the problem preventing upgrading to 0.54.0

See: Requiring unknown module "undefined". #2051

esutton on 7 Mar 2018

👎2

This is a big show stopper for our team. We've been waiting for 0.54 to get Android's keyboard crash fixes but can't due to this issue. The error occurs even on our internal file import from the same directory (import * as util from './util'). Try to fix for a few days but no luck. Also already tried putting package.json in the component folder but got same error. Not sure how to use '@ syntax'. So painful to see the app crashes on users everyday. Could anyone shed some light or share any workaround? Thanks!

kengjungwa on 8 Mar 2018

We're blocked here as well. I had to change several of our dynamic requires into static imports but finally got blocked at a third-party library that is having the same issue. It's unclear to me if this is a Metro bundler issue, or if this is a change that libraries need to accommodate. If it's the latter, I guess I'll start digging in and making pull requests.

seantimm on 9 Mar 2018

In case anyone was wondering, I tried 0.54.1, still same issue

wildseansy on 9 Mar 2018

This happens also on iOS. Is this related to the metro-bundler? 0.54.1 is facing the same issue and it´s currently blocking from upgrading. Moving to absolute paths would be a huge change right now, so we planned to move the components one after another instead of all 500 files.

Is there maybe any workaround to allow relative paths through the rn-cli.config ?

mkuczera on 12 Mar 2018

👍5

Happens as well on
"react": "16.3.0-alpha.1",
"react-native": "0.54.2"

webraptor on 13 Mar 2018

any updates?

pavel-beloborodov on 13 Mar 2018

@pavel-beloborodov I opened an issue on the metro repository (here) but I can't seem to create a minimal example showing this. Does it only occur in large projects?

andrew-wagner89 on 13 Mar 2018

@pavel-beloborodov seems like they found the problem and are looking into a metro fix now!

andrew-wagner89 on 13 Mar 2018

i upgraded to 0.54 for this #18359 reason.and now this issue :|

Arshiamidos on 13 Mar 2018

It looks like the issue is if you have the same file imported twice by different names in

import string from 'strings'
import commonStrings from 'strings'

schlaegerz on 14 Mar 2018

🎉3 👍3 😄1

React native requiring unknown module "492", if you are sure module is there try restarting metro-bundler.

I got the above error on android OS. I closed the app on the multi-task button and opened the app again from within the emulator and it worked for me.

rnageli on 14 Mar 2018

👍2

@rnageli - that is likely a different issue. This one produces Requiring unknown module "undefined", on both Android and iOS consistently. Have tried restarting metro-bundler, re-installing node_modules, clearing caches etc... Doesn't help.

wildseansy on 14 Mar 2018

👍1

I was able to resolve this issue for my project by doing the following...

Given that this issue seems to be caused when there is import {y} from './x' and import {z} from 'myapp/x' in the same file, I was able to track down these files with these steps:

Run your app until you get the error message
In the stack trace, click on the filename included from your project, under one of the _require items in the stack trace. See screenshot below:

_Be sure you have set the REACT_EDITOR variable set so react-native can open the file with an editor_

simulator screen shot - iphone 7 - 2018-03-14 at 07 23 53

In my file (actions.js), before changes

import {
  getUserEmail
} from 'myapp/user/selectors';

import {
  getUserName
} from './selectors';  //<-- same file as 'myapp/user/selectors'. This is why metro crashes

actions.js after changes

// Change the above to: 
import {
  getUserEmail,
  getUserName
} from 'myapp/user/selectors';

This will also work:


// Or you can change it to: 
import {
  getUserEmail,
  getUserName
} from './selectors';

I had to do this 3-4 times before I had found all of the modules that have import {y} from './x' and import {z} from 'myapp/x' in the same file. Hope this helps someone else.

wildseansy on 14 Mar 2018

👍33 🎉17 ❤6

@wildseansy Thanks!

Similar to other metro errors that have blocked upgrading ( more than once ) over the past few months...

I was totally clueless on how to track this down and had given up upgrading to RN 0.54

yarn usually gives a clue when something goes wrong.
metro "not so much"

esutton on 14 Mar 2018

Ran into this issue with RN 0.54.2 with latest react-native-maps update; they now "fixed" it in their master branch.
https://github.com/react-community/react-native-maps/blob/master/index.js

davidck on 14 Mar 2018

i also solved with package.json manipulatoin
check this out #2051

Arshiamidos on 14 Mar 2018

❤1 🎉1 👍1

you can use a eslint rule to help on this https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md

sibelius on 14 Mar 2018

👍8 🎉4 ❤3

Hey guys, for me the problem was the following
in my index.js (or whatever you call it)

import { AppRegistry } from 'react-native';
import { MyApp } from './app/index';

AppRegistry.registerComponent('my-app', () => MyApp);

MyApp was exported like

export default () => (
    ... some stuff
);

so instead I did the following

const MyApp = () => (
    .. some stuff
);

export { MyApp };

So you may try converting some default exports to named ones.

cyardimci on 15 Mar 2018

👍1

Seems like this has been fixed in metro with this commit and released in v0.30.2, which react native just bumped its dependency to in master with this commit so hopefully its included in the next release

andrew-wagner89 on 16 Mar 2018

👍2

@wildseansy saved me

tahatag on 17 Mar 2018

🎉1

@wildseansy good call. That's the issue, spot on.

thatjuan on 3 Apr 2018

@wildseansy you saved my life :)) sometime the error show on console.error not correct line, but correct filename

huy-lv on 6 Apr 2018

My Error was:

Requiring unknown module "492"

The problem was in my index.js file and App.js file both! My index,js file was like:

import { AppRegistry } from 'react-native';
import { MyApp } from './app';

AppRegistry.registerComponent('my-app', () => MyApp);

And my App.js had the same sentences as the first and the last sentence in my index.js file. Meaning my App.js file was like:

import React, { Component } from 'react'
import {
  AppRegistry,
...,
...,
}
 My code;
.
.
AppRegistry.registerComponent('my-app', () => MyApp);

I just deleted the first line and the last line of index.js file and it worked. Meaning the index.js file of mine turned into:

import { MyApp } from './app';

Hope this help you too.

mshavandi on 21 May 2018

Also seeing this issue with a node_module item that is calling a local file. However calling the file from the source (for example import {ITEM} from 'MODULE/FILE') works fine. I've trying to see if renaming the file or just moving the file helps but so far no luck. Also all of the exports within the file are named.