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

teerasej · 2017-07-11T08:13:43Z

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)

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

Screenshot of emulator/device

iOS
Android

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.

The text was updated successfully, but these errors were encountered:

shivrajkumar · 2017-07-11T08:18:13Z

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

Jaiborge · 2017-07-14T21:49:02Z

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 · 2017-07-18T09:29:26Z

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 · 2017-07-18T14:58:50Z

@sankhadeeproy007 Can you help us ?

sankhadeeproy007 · 2017-07-18T17:35:11Z

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 · 2017-07-18T18:53:14Z

+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 · 2017-07-19T07:45:07Z

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

benweizhu · 2017-07-24T01:17:30Z

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 · 2017-07-24T06:14:23Z

@benweizhu Did you check the above mentioned comment?

j2l · 2017-07-24T12:38:15Z

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

byoungdale · 2017-08-12T19:17:32Z

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:

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 · 2017-08-20T18:41:34Z

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

byoungdale · 2017-08-22T15:54:55Z

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 · 2017-09-03T11:42:45Z

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 · 2017-09-11T14:13:04Z

@trickeyd Can you post your dependency list here

trickeyd · 2017-09-11T14:22:52Z

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 · 2017-09-11T14:24:37Z

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

shivrajkumar mentioned this issue Aug 2, 2017

Nativebase Kitchen Sink CRNA branch not able to run on ubuntu #1122

Closed

shivrajkumar closed this as completed Sep 11, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

teerasej commented Jul 11, 2017

shivrajkumar commented Jul 11, 2017

Jaiborge commented Jul 14, 2017

lionel95200x commented Jul 18, 2017

lionel95200x commented Jul 18, 2017

sankhadeeproy007 commented Jul 18, 2017

ozziexsh commented Jul 18, 2017 •

edited

Loading

SupriyaKalghatgi commented Jul 19, 2017 •

edited

Loading

benweizhu commented Jul 24, 2017

SupriyaKalghatgi commented Jul 24, 2017

j2l commented Jul 24, 2017

byoungdale commented Aug 12, 2017

gpawlik commented Aug 20, 2017

byoungdale commented Aug 22, 2017

trickeyd commented Sep 3, 2017

shivrajkumar commented Sep 11, 2017

trickeyd commented Sep 11, 2017 •

edited

Loading

shivrajkumar commented Sep 11, 2017

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

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

Comments

teerasej commented Jul 11, 2017

react-native, react and native-base version

Expected behaviour

Actual behaviour

Steps to reproduce (code snippet or screenshot)

Screenshot of emulator/device

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

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

shivrajkumar commented Jul 11, 2017

Jaiborge commented Jul 14, 2017

lionel95200x commented Jul 18, 2017

lionel95200x commented Jul 18, 2017

sankhadeeproy007 commented Jul 18, 2017

ozziexsh commented Jul 18, 2017 • edited Loading

SupriyaKalghatgi commented Jul 19, 2017 • edited Loading

benweizhu commented Jul 24, 2017

SupriyaKalghatgi commented Jul 24, 2017

j2l commented Jul 24, 2017

byoungdale commented Aug 12, 2017

gpawlik commented Aug 20, 2017

byoungdale commented Aug 22, 2017

trickeyd commented Sep 3, 2017

shivrajkumar commented Sep 11, 2017

trickeyd commented Sep 11, 2017 • edited Loading

shivrajkumar commented Sep 11, 2017

ozziexsh commented Jul 18, 2017 •

edited

Loading

SupriyaKalghatgi commented Jul 19, 2017 •

edited

Loading

trickeyd commented Sep 11, 2017 •

edited

Loading