Upgrade to Babel 7 React Native 0.56 -- Breaking Change #2028

dharmilsan · 2018-06-19T08:14:15Z

RN v0.56 is going to introduce a breaking change in terms of upgrading to babel7. babel7 is NOT backwards-compatible with babel6 and hence all the plugins will need to be manually updated to import the new babel scoped packages. Read more here: https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#056 and https://babeljs.io/docs/en/next/v7-migration

Given that native-base's dependencies use babel 6 (native-base-shoutem-theme, react-native-vector-icons amongst the ones I've checked), what is the migration plan? I've tried monkey patching both the packages manually but ES6 imports still fail with my config.

SupriyaKalghatgi · 2018-06-20T09:58:20Z

facebook/react-native#19819

SupriyaKalghatgi · 2018-06-20T10:10:28Z

@dharmilsan Did you try to run RN app with RN 0.56.0 or 0.56.0-rc.2?

dharmilsan · 2018-06-22T04:15:54Z

@SupriyaKalghatgi Honestly speaking, I was trying to get this running using react-native-web and Next.js which uses Babel 7 by default. That being said, I can probably try checking if I can build v0.56 today

SupriyaKalghatgi · 2018-06-22T05:18:47Z

facebook/react-native#19820
facebook/react-native#19789

jacargentina · 2018-06-25T02:09:45Z

@SupriyaKalghatgi about #2035, ReactNativePropRegistry exists in 0.55.4 but it does not exists in 0.56.0-rc.3

So that should be taken into account here too!

It was removed here facebook/react-native@a8e3c7f

ms502040 · 2018-07-01T00:38:58Z

Any patch for RN 0.56.0?
if I manual copy old react-native/Libraries/Renderer/shims/ReactNativePropRegistry.js I can run RN app, but it`s dirty workaround.

"@babel/core": "^7.0.0-beta.47",
"native-base": "^2.6.1",
"react": "^16.4.1",
"react-native": "^0.56.0-rc.3",
"babel-jest": "23.0.1",
"babel-plugin-module-resolver": "^3.1.1",
"babel-preset-react-native": "^5.0.2",

stokesbga · 2018-07-01T20:26:52Z

rn 56 removed everything, just spent the entire day replacing all my @providesModule

IF anyone reading this wants a temporary solution until nativebase moves to babel7 you can use my rn fork of 56rc4 --> https://github.com/stokesbga/react-native

Sorry I can't help with a real PR - Love what you guys are doing!

fhadsheikh · 2018-07-05T16:19:41Z

Getting the same error:

Error: Unable to resolve module react-native/Libraries/Renderer/shims/ReactNativePropRegistry from /node_modules/native-base/dist/src/Utils/computeProps.js: Module react-native/Libraries/Renderer/shims/ReactNativePropRegistry does not exist in the Haste module map

Is there a plan to fix this?

elhachimi · 2018-07-05T16:32:14Z

hey! getting the same error as @fhadsheikh after upgrading to RN 0.56.0

adding the file manually seems to fix the issue
https://github.com/facebook/react-native/blob/0.49-stable/Libraries/Renderer/shims/ReactNativePropRegistry.js

stueynet · 2018-07-05T16:38:17Z

Anyone on Nativebase team seeing this? Can you acknowledge?

stokesbga · 2018-07-05T18:33:37Z

Im glad people are getting blocked if they're too stupid to read.

Nativebase team is very aware of the issue, considering they have referenced several hundred threads in the react-native repo.

Until they upgrade to babel 7 and make changes to support the removed props shim, you can use my 56rc4 fork that has the file added back https://github.com/stokesbga/react-native

stueynet · 2018-07-05T18:40:45Z

Im glad people are getting blocked if they're too stupid to read

@stokesbga Too stupid to read what? We saw your fork and thanks for taking the time to do it. I think on our end we would prefer to not adjust react native to make native-base work so we were hoping, as the first post asks, we could see if there is a migration plan for it.

stueynet · 2018-07-05T18:42:17Z

@stokesbga here is a search of this repo's issues relating to 56. https://github.com/GeekyAnts/NativeBase/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+56

As you can see this is the only thread. I think its more than appropriate to comment right here.

stokesbga · 2018-07-05T18:44:13Z

The answer to your question is yes. There is a plan for native-base support RN56. If you insist of moving to latest RN version, you have to be patient with third party libs.

stueynet · 2018-07-05T18:46:37Z

Yeah we have not moved yet. We just started testing 56 and so far this is the only stopper. This issue has been open for a few weeks now with no specific reply so I think people here are just trying to drum up some attention from the team. If they are on it then a simple comment would be all thats required.

ujwal-setlur · 2018-07-05T21:28:51Z

The contents of said file ReactNativePropRegistry.js is interesting:

/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @providesModule ReactNativePropRegistry
 * @flow
 */

'use strict';

const {
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
} = require('ReactNative');

module.exports =
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactNativePropRegistry;

I don't believe any third party library should be dependent on this. It's been an issue with native-base for a while, unfortunately.

SupriyaKalghatgi · 2018-07-06T02:17:03Z

We are aware of this, and will fix soon

SupriyaKalghatgi · 2018-07-06T02:20:31Z

This issue is opened quite days ago, but we cannot start making changes to our package depending on rc release of React Native

ujwal-setlur · 2018-07-06T02:46:54Z

Completely understand that. I was just questioning the dependency of a third party library like native-base on an internal API.

redefinered · 2018-07-06T06:20:06Z

I have a project which is due 4 business days from now and I heavily rely on native base. Someone please help? :( Please tell me what RN version is going to work with the latest native base release? Thanks!

SupriyaKalghatgi · 2018-07-06T06:24:49Z

@redefinered React Native after a gap of 2 months released 0.56 couple of days back. Hope you understand why they took this long to rollout 0.56, same applies to 3rd party libraries
Need to restructure many things, not simple one

I dont think its so very important to move to 0.56 immediately after its release. So RN 0.55.4 and latest NativeBase will work in this case
But if you still want to go with 0.56, then you will have to temporarily add ReactNativePropRegistry, this works with NativeBase

SupriyaKalghatgi · 2018-07-06T06:40:10Z

facebook/react-native#20015
facebook/react-native#18247

SupriyaKalghatgi · 2018-07-06T15:44:23Z

Fixed with 2.7.0

SupriyaKalghatgi · 2018-07-06T15:44:42Z

Keeping this issue open over this weekend
let me know in case of any issues

SupriyaKalghatgi · 2018-07-06T15:49:25Z

Upgraded NativeBase KitchenSink

ujwal-setlur · 2018-07-06T15:55:28Z

@SupriyaKalghatgi, thanks! Very prompt!

Is this still backwards compatible with react-native < 0.56.0? Some of other libraries that I use have issues as well so I need to wait 😄

SupriyaKalghatgi · 2018-07-06T15:56:45Z

@ujwal-setlur This is mentioned in release notes
You can also find this information with ReadMe

SupriyaKalghatgi · 2018-07-06T16:12:04Z

I tried these

    "native-base": "2.7.0",
    "react": "16.3.1",
    "react-native": "0.55.4",

worked fine @ujwal-setlur

ujwal-setlur · 2018-07-06T16:15:59Z

Thanks!

stueynet · 2018-07-06T16:16:33Z

Thanks you so much @SupriyaKalghatgi! I think everyone here appreciates the work to get this updated!

stokesbga · 2018-07-07T04:54:13Z

Thank you guys. Not the useless morons, but the native-base team

stueynet · 2018-07-07T10:08:26Z

Thank you guys. Not the useless morons, but the native-base team

@stokesbga for posterity

redefinered · 2018-07-08T22:51:32Z

@SupriyaKalghatgi I tried

   "native-base": "2.7.0",
    "react": "16.3.1",
    "react-native": "0.55.4",

I get this error:

JonathanGuo · 2018-07-08T23:44:05Z

@redefinered Have you upgraded your babel-preset-react-native?

Try upgrade it in your package.json.

"babel-preset-react-native": "^5.0.2",

SupriyaKalghatgi · 2018-07-09T04:09:54Z

@redefinered The screenshot says error is due to babel-preset-react-native, then you must share this too along with NativeBase, React and React Native versions

SupriyaKalghatgi · 2018-07-09T04:10:46Z

Closing this today

rfviolato · 2018-07-09T07:56:12Z

I can confirm that the issue is gone and everything is working. Thanks! :)

"native-base": "^2.7.0",
"react": "16.4.1",
"react-native": "0.56.0",
"babel-preset-react-native": "^5",

bonlemuel · 2018-07-30T06:38:36Z

@redefinered were you able to solve the issue?

duranmla · 2018-08-11T00:23:30Z

Whereas the application is running nobody is getting errors when trying to run a jest test that uses native-base? for my case I check the issues:

Besides, there is a great comment at: facebook/react-native#19859 (comment)

While it solves my issue to run jest it doesn't allow me to solve the issue to run the tests once I add native-base to my project.

My package.json file can be found at: https://gist.github.com/duranmla/d0e06870f39d2452867d4cbde1629531

An overview to the error:

Test suite failed to run

    /Users/Alexis/Projects/client/handypass/node_modules/native-base-shoutem-theme/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import connectStyle from "./src/connectStyle";

Looks pretty much as there is something wrong when the code is being read for jest (or something like that). In any case, thanks for the work at native-base, if someone face the same issue or knows the solution please comment below.

Cheers! 🍻

duranmla · 2018-08-11T00:38:27Z

Basically, I use the same approach as #396 (comment) and now it works as expected.

haotangio · 2018-10-04T01:30:04Z

Problem reoccur on RN 0.57 & "native-base": "^2.8.1"

haotangio · 2018-10-04T02:18:35Z

Problem reoccur on RN 0.57 & "native-base": "^2.8.1"

Fixed with last effort of adding the file manually seems to fix the issue
https://github.com/facebook/react-native/blob/0.49-stable/Libraries/Renderer/shims/ReactNativePropRegistry.js

SupriyaKalghatgi · 2018-10-04T05:02:00Z

All fine with React Native 0.57 and NativeBase 2.8.1

pabloLarios24 · 2018-10-04T18:46:51Z

Module react-native/Libraries/Renderer/shims/ReactNativeBridgeEventPlugin does not exist in the Haste module map, how fix it?

SEWilco · 2018-10-05T23:00:56Z

I've spent several days fighting dependencies, and now find that my fresh install can't handle my app's code because the development platform broke itself? Ick.

SEWilco · 2018-10-06T02:43:20Z

I've spent several days fighting dependencies, and now find that my fresh install can't handle my app's code because the development platform broke itself? Ick.

Hey, is there a link in here to where all the similar breaking items are listed? I need to know what else has been broken in the past year.

melkishengue · 2019-02-15T15:57:34Z

I am also facing the same issue with the following configuration:

    "@ptomasroos/react-native-multi-slider": "^0.0.12",
    "apisauce": "^0.14.3",
    "babel-core": "7.0.0-bridge.0",
    "eslint": "^4.15.0",
    "metro-react-native-babel-preset": "^0.51.1",
    "moment": "^2.21.0",
    "native-base": "^2.7.0",
    "prop-types": "^15.6.0",
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-autolink": "^1.4.0",
    "react-native-collapsible": "^0.10.0",
    "react-native-config": "^0.11.5",
    "react-native-easy-grid": "^0.1.17",
    "react-native-fast-image": "4.0.14",
    "react-native-i18n": "^2.0.10",
    "react-native-maps": "^0.21.0",
    "react-native-modal": "^5.3.0",
    "react-native-render-html": "^3.9.0",
    "react-native-router-flux": "^4.0.0-beta.28",
    "react-native-splash-screen": "^3.0.6",
    "react-native-swiper": "^1.5.13",
    "react-native-timer": "^1.3.1",
    "react-native-vector-icons": "^4.5.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"

.babelrc:

{
  "presets": ["react-native"]
}

The error trace:

error: bundling failed: Error: Unable to resolve module `react-native/Libraries/Renderer/shims/ReactNativePropRegistry` from `/node_modules/react-native-easy-grid/Utils/computeProps.js`: Module `react-native/Libraries/Renderer/shims/ReactNativePropRegistry` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.

radjivF · 2019-05-01T11:38:31Z

I have following all the steps in this issue but I still have it the error.

 "babel-preset-react-native": "^5.0.2",
    "react-test-renderer": "16.4.1",
    "native-base": "^2.7.0",
    "react": "16.4.1",
    "react-native": "0.56.1",

I'm on my way to upgrade my app 0.55.4 to 0.56.1 and I would love to compile it before I increase my RN version again

Anyone can help? @melkishengue @SupriyaKalghatgi

SupriyaKalghatgi mentioned this issue Jun 20, 2018

RN 0.56 ReactNAtivePropRegistry does not exist in haste map #2035

Closed

GeekyAnts deleted a comment from trandromeda Jul 6, 2018

This was referenced Jul 6, 2018

Module react-native/Libraries/Renderer/shims/ReactNativePropRegistry does not exist in the Haste module map #2107

Closed

Compatibility with React-Native 0.56 GeekyAnts/react-native-easy-grid#68

Closed

SupriyaKalghatgi closed this as completed Jul 10, 2018

Upgrade to Babel 7 React Native 0.56 -- Breaking Change #2028

Upgrade to Babel 7 React Native 0.56 -- Breaking Change #2028

Comments

dharmilsan commented Jun 19, 2018 • edited Loading

SupriyaKalghatgi commented Jun 20, 2018

SupriyaKalghatgi commented Jun 20, 2018

dharmilsan commented Jun 22, 2018

SupriyaKalghatgi commented Jun 22, 2018

jacargentina commented Jun 25, 2018 • edited Loading

ms502040 commented Jul 1, 2018

Any patch for RN 0.56.0? if I manual copy old react-native/Libraries/Renderer/shims/ReactNativePropRegistry.js I can run RN app, but it`s dirty workaround.

stokesbga commented Jul 1, 2018 • edited Loading

fhadsheikh commented Jul 5, 2018 • edited Loading

elhachimi commented Jul 5, 2018 • edited Loading

stueynet commented Jul 5, 2018

stokesbga commented Jul 5, 2018 • edited Loading

stueynet commented Jul 5, 2018 • edited Loading

stueynet commented Jul 5, 2018

stokesbga commented Jul 5, 2018

stueynet commented Jul 5, 2018

ujwal-setlur commented Jul 5, 2018

SupriyaKalghatgi commented Jul 6, 2018

SupriyaKalghatgi commented Jul 6, 2018

ujwal-setlur commented Jul 6, 2018

redefinered commented Jul 6, 2018

SupriyaKalghatgi commented Jul 6, 2018

SupriyaKalghatgi commented Jul 6, 2018

SupriyaKalghatgi commented Jul 6, 2018

SupriyaKalghatgi commented Jul 6, 2018

SupriyaKalghatgi commented Jul 6, 2018

ujwal-setlur commented Jul 6, 2018

SupriyaKalghatgi commented Jul 6, 2018

SupriyaKalghatgi commented Jul 6, 2018 • edited Loading

ujwal-setlur commented Jul 6, 2018

stueynet commented Jul 6, 2018

stokesbga commented Jul 7, 2018

stueynet commented Jul 7, 2018

redefinered commented Jul 8, 2018

JonathanGuo commented Jul 8, 2018

SupriyaKalghatgi commented Jul 9, 2018

SupriyaKalghatgi commented Jul 9, 2018

rfviolato commented Jul 9, 2018

bonlemuel commented Jul 30, 2018

duranmla commented Aug 11, 2018

duranmla commented Aug 11, 2018

haotangio commented Oct 4, 2018

haotangio commented Oct 4, 2018

SupriyaKalghatgi commented Oct 4, 2018

pabloLarios24 commented Oct 4, 2018

SEWilco commented Oct 5, 2018

SEWilco commented Oct 6, 2018

melkishengue commented Feb 15, 2019 • edited Loading

radjivF commented May 1, 2019 • edited Loading

dharmilsan commented Jun 19, 2018 •

edited

Loading

jacargentina commented Jun 25, 2018 •

edited

Loading

Any patch for RN 0.56.0?
if I manual copy old react-native/Libraries/Renderer/shims/ReactNativePropRegistry.js I can run RN app, but it`s dirty workaround.

stokesbga commented Jul 1, 2018 •

edited

Loading

fhadsheikh commented Jul 5, 2018 •

edited

Loading

elhachimi commented Jul 5, 2018 •

edited

Loading

stokesbga commented Jul 5, 2018 •

edited

Loading

stueynet commented Jul 5, 2018 •

edited

Loading

SupriyaKalghatgi commented Jul 6, 2018 •

edited

Loading

melkishengue commented Feb 15, 2019 •

edited

Loading

radjivF commented May 1, 2019 •

edited

Loading