React-native: Hot reloading error. (Unknown module "react-native")

[ambrstr]

Hot reloading is not working. #6722 was closed as a dup of #6640. #6640 was Unknown module "React", the error I am getting is "Unknown module "react-native"." I tried to debug, but this is day 1 for me with react, node etc.

If it truly is fixed, please explain how to used the fixed version. I am working with a first time fresh install of everything this morning to try react.

I saw this comment:

Should work now that we have released [email protected]. You'll have to upgrade from 1.5.4 to 1.5.5

As far as I can tell I am up to date using 1.5.5.

Thanks.

[adrienbrault]

Having the same issue. Is there a way to disable hot reloading ?

[magrinj]

@adrienbrault If you are on iOS device do ⌘ + D and click on Disable Hot Reloading

I'm not sure but for android I think it's ⌘ + M, if you are not on a mac try Control instead of ⌘

[RealOrangeOne]

@adrienbrault Hot reloading should be an opt-in option. I too am having this problem with Hot Reloading, although on Android. However someone else I know on another project is having no problems at all, I fear it's something in the project itself that is causing the problems

[hvsy]

+1

[sylvainbaronnet]

Same issue

[sylvainbaronnet]

@magrinj I don't have access to ⌘ + D menu since the app crash, is there another way to disable hot reload ?

[magrinj]

@sylvainbaronnet You can dismiss the error view with the button at the bottom left, after that try again with ⌘ + D, did you do that on an iOS simulator ?

[sylvainbaronnet]

Thanks !! It works again

[satya164]

cc @martinbigio

[jerolimov]

Same error here. After many many try and errors I found that you should always use npm start -- --reset-cache when trying to "find" this issue.

Could reproduce this with a clean react-native init project without any additional dependency.

I found a local project that still works and created two npm-shrinkwrap files which shows that the problem doesn't happen with react 0.14.7 and happen with 0.14.8 (both times react-native 0.22.2).

You find both npm-shrinkwrap files and the npm install output after adding the "old" version and re-run it here: https://gist.github.com/jerolimov/85051d319b69ea6fe8dd24fa0f79f5f4

[martinbigio]

Hmm, mind trying with [email protected]. Looks like for some people we have problems resolved React and for other react-native.

@cpojer, @skevy has anything changed on node-haste that could explain this? This is where react-transform is configures to import React/react-native: https://github.com/facebook/react-native/blob/3a1634ec7b0dfa2b5d8890118565006d845e2039/babel-preset/configs/hmr.js#L28.

[cpojer]

I haven't touched anything in node-haste for a while, might wanna ask @davidaurelio :)

[martinbigio]

Started debugging a bit the repro case of https://github.com/facebook/react-native/issues/6640 and confirmed react is on the Haste map of the resolver when the packager starts. Maybe the issue is that the dependency is added on transform time by the HMR plugin? That doesn't explain though why this stopped working.

[martinbigio]

Taking a step back I realized this problem is different to the one on https://github.com/facebook/react-native/issues/6640. This one happens on runtime whereas the other one on resolution time. The problem we're having now is that the require (react-native) is not getting transformed to the absolute path (react-native/Libraries/react-native/react-native.js). Modifying https://github.com/facebook/react-native/blob/master/babel-preset/configs/hmr.js#L28 with such change fixes the problem.

I need to test this also works internally. If everything is fine I'll update the preset tomorrow with this fix. Sorry for the issue, please remember you can always disable hot reloading. Happy coding!

cc @satya164 :)

[tianwalker2012]

@martinbigio I followed you steps, it doesn't work :(

[martinbigio]

@tianwalker2012 that's really weird, it does work for me. The file you need to modify is located on node_modules/react-native/node_modules/babel-preset-react-native/configs. Was that one the one you changed? What error are you getting now?

[pasqualino0815]

@martinbigio I'm having the same issue. I tried both versions:

• imports: ['react-native']
• imports: ['react']

The red box displays both times: Requiring unknown module "react-native". If you are sure the module is there, try restarting the packager or running "npm install".

[martinbigio]

I just released a new version of the preset which fixes the issue locally on a brand new project for me. Could you update the preset to 1.5.6? Or create a new project to verify it works?

[ambrstr]

@martinbigio Yes that fixed it for me. Thanks.

[martinbigio]

Would be awesome if a couple more of people confirm this is working for them so that I can commit the code to the repo :)

[gaearon]

react-native/Libraries/react-native/react-native.js

:joy:

[pasqualino0815]

The updated present is doing something different. I'm receiving now a tiny redbox in the upper left corner:

;)

[pasqualino0815]

The problem lies definitely in my app code.
Enabling hot reloading rendering only a simple view as follows works just fine.

     <View>
        <Text>
          Hello World
        </Text>
      </View>

I will try to find out how exactly I can reproduce this.

[pohy]

The issue persists for me, am using [email protected].

[maikokuppe]

@martinbigio: Works for me after updating babel-preset-react-native with

npm install [email protected]

Thanks!

[martinbigio]

@pohy as per your screenshot you're not using 1.5.6 because react-native was changed for the full path.

[martinbigio]

@gaearon this is only a temporary hack to fix the issue and unblock people. The underlying problem is not only affecting HMR but also assets, check https://github.com/facebook/react-native/issues/6638. We'll ask @davidaurelio to take a look next week when he comes back.

[pohy]

Interesting, npm ls babel-preset-react-native shows, that I have 1.5.6, and even after fully rebuilding the app, it still does fail with Requiring unknown module "react-native"...

[martinbigio]

make sure to reset the cache npm start -- --reset-cache

[maikokuppe]

@pohy: You could try to stop the gradle daemon (android/gradlew --stop works for me) and rebuild with react-native run-android.
Just an idea

[pohy]

@martinbigio Yes, resetting cache helped, thanks for the help and sorry for the hassle!