search

GeekyAnts / NativeBase

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
https://nativebase.io/
MIT License
20.21k stars 2.39k forks source link

Unable to resolve module: createReactNativeComponentClass from react-native-svg/elements/Rect.js #1030

Closed teerasej closed 7 years ago

teerasej commented 7 years ago

I tried to use Native-base 2.2.1 with react-native 0.46.0, according to 2.2.1 release

But unfortunately when start the packager and run on device. It's fail and show error I don't see before.

react-native, react and native-base version

"dependencies": {
    "native-base": "2.2.1",
    "react": "16.0.0-alpha.12",
    "react-native": "0.46.0",
    "react-navigation": "^1.0.0-beta.11"
  }

Expected behaviour

Application should just run and show UI on device

Actual behaviour

After JavaScript bundle finished got following log in terminal 

2:48:41 PM: Failed building JavaScript bundle
2:48:41 PM: Restarted watchman.

Got following error message in both platforms

iOS:

Unable to resolve module `react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass` from `/Users/teerasejjiraphatchandej/Desktop/React Native/login-form/node_modules/react-native-svg/elements/Rect.js`: Module does not exist in the 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 packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.

ABI18_0_0RCTFatal
ABI18_0_0RCTSetFatalHandler
ABI18_0_0RCTSetFatalHandler
<redacted>
<redacted>
_dispatch_main_queue_callback_4CF
<redacted>
<redacted>
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
Exponent
<redacted>

Steps to reproduce (code snippet or screenshot)

  1. Run create-react-native-app test in Terminal
  2. Open package.json, then add the dependencies on 1, then save
  3. Run rm -rf node_modules && npm install
  4. Run npm start
  5. Open App in Expo with barcode, the js bundle created, got error
  6. Ctrl + C to terminate packager process
  7. Run npm run android to deploy directly to device
  8. Got error

Screenshot of emulator/device

Is the bug present in both ios and android or in any one of them?

Both iOS and Android got quite different message, but pointed to same origin, as you can see in screenshot

Any other additional info which would help us debug the issue quicker.

The error shows up when use following dependencies: 

"dependencies": {
    "@expo/vector-icons": "^5.0.0",
    "expo": "^18.0.3",
    "native-base": "2.2.1",
    "react": "16.0.0-alpha.12",
    "react-native": "0.46.0",
    "react-navigation": "^1.0.0-beta.11"
  }

But not if I use previous version of react, react-native, and native-base: 

 "dependencies": {
    "@expo/vector-icons": "^5.0.0",
    "expo": "^18.0.3",
    "native-base": "2.1.4",
    "react": "16.0.0-alpha.12",
    "react-native": "0.45.1",
    "react-navigation": "^1.0.0-beta.11",
    "util" : "*"
  }

I tried both create a fresh project and also with suggestion 

 1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.

But no luck.

shivrajkumar commented 7 years ago

@teerasej I don't think expo 18 supports RN 46. expo 18.0.3 works for 45.1

Jaiborge commented 7 years ago

Same error!!

dependencies": { "color": "~1.0.3", "expo": "^18.0.3", "lodash": "^4.13.1", "moment": "^2.13.0", "native-base": "2.1.4", "react": "16.0.0-alpha.6", "react-native": "^0.38.0", "react-native-barcode-builder": "^1.0.1", "react-native-code-push": "^3.0.0-beta", "react-native-modalbox": "^1.3.4", "react-native-navigation-redux-helpers": "^0.5.0", "react-native-router-flux": "3.38.0", "react-native-scrollable-tab-view": "^0.6.0", "react-native-textinput-effects": "^0.3.1", "react-navigation": "1.0.0-beta.11", "redux-persist": "^4.8.2", "redux-thunk": "^2.2.0" } }

lionel95200x commented 7 years ago

I have same error with this dependencies 👍 "dependencies": { "expo": "^18.0.9", "firebase": "^4.1.3", "geofire": "^4.1.2", "lodash": "^4.17.4", "lottie-react-native": "^1.2.0", "moment": "^2.18.1", "native-base": "^2.2.0", "prop-types": "^15.5.10", "react": "16.0.0-alpha.6", "react-native": "^0.46.0", "react-native-elements": "^0.13.0", "react-native-gifted-chat": "^0.1.4", "react-native-material-design": "^0.3.7", "react-native-material-kit": "^0.4.1", "react-native-multislider": "0.0.14", "react-native-swiper": "^1.5.4", "react-navigation": "^1.0.0-beta.11", "react-redux": "^5.0.5", "redux": "^3.7.1", "redux-thunk": "^2.2.0" }

lionel95200x commented 7 years ago

@sankhadeeproy007 Can you help us ?

sankhadeeproy007 commented 7 years ago

Can you guys remove native-base and check if that solves the issue? I'm not very sure native-base is causing this. It seems to be looking for react-native-svg.

ozziexsh commented 7 years ago

+1 having the same issues. Opened #1063. Managed to get the error to go past react-native-svg.

edit I managed to solve this as per #1039 by deleting node_modules and setting native-base to 2.2.0 (notice there is no ^ before the version) and then re-running yarn install

SupriyaKalghatgi commented 7 years ago

This is not issue with NativeBase Check #401, #360 and #386 of react-native-svg

benweizhu commented 7 years ago

Has the same issue

{
  "name": "EnjoyReactNative",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "~18.0.0",
    "react-native-scripts": "0.0.50",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^18.0.3",
    "react": "^15.6.1",
    "react-native": "^0.46.4"
  }
}
SupriyaKalghatgi commented 7 years ago

@benweizhu Did you check the above mentioned comment?

j2l commented 7 years ago

Same issue with native-base or antd-mobile. Seems related to svg package, thanks @SupriyaKalghatgi for pointing the posts. I wrote to them.

byoungdale commented 7 years ago

Was there a resolution for this issue? I am hitting the same issue.

As soon as I import victory-native:

import { VictoryBar } from "victory-native";

I get this:

react-native-svg error

I have:

"react": "16.0.0-alpha.12",
"react-native": "^0.45.1",
"react-native-router-flux": "^3.40.1",
"react-native-svg": "^5.4.1",
"react-native-swipeout": "^2.1.2",
"react-redux": "^5.0.5",
"redux": "^3.7.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"victory-native": "^0.14.0"

Following the watchman, node_module, and cache steps do not resolve.

I found this issue on react-native-svg repository, but there is no resolution there either.

gpawlik commented 7 years ago

I have just forced the older versions of the react-native-svg (precisely: 5.1.7) and the problem disappeared. Hope it helps.

byoungdale commented 7 years ago

What version of react-native are you using with react-native-svg 5.1.7? I followed there documentation for versioning, but still did not work. It wasn't this error anymore, but the library definitely was still broken (see here

react-native-svg >= 5.2.0 only supports react-native >= 0.45.0 and react == 16.0.0-alpha.12

Are you using react-native 0.45.0 with react-native-svg 5.1.7? It's starting to seem like the headache of using react-native-svg is not worth it. Just a rabbit whole of issues.

trickeyd commented 7 years ago

Did anyone manage to resolve this? I reinstalled all my dependencies today and hit this totally out of the blue!

I've tried everything mentioned so far here, but no joy.

Would really appreciate it if someone could post a list of working/fixed dependencies.

Thanks!

shivrajkumar commented 7 years ago

@trickeyd Can you post your dependency list here

trickeyd commented 7 years ago

Apologies, I meant to repost here.

In the end I had to just upgrade everything to the latest stable versions. I did this by running 'create-react-native-app' in a new folder, and seeing what it used. Fixed the problem. This is obviously a crappy way of checking the latest lib combination. Where should I be looking for this info?

Anyway, it helps anyone, the relevant libs I ended up with were:

"dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "^0.47.0",
    "expo": "^20.0.0"
},
"devDependencies": {
    "react-native-scripts": "1.3.1",
    "jest-expo": "~20.0.0",
    "react-test-renderer": "16.0.0-alpha.12"
}
shivrajkumar commented 7 years ago

We do have the compatibility table here https://github.com/GeekyAnts/NativeBase#6-compatibility-versions