New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

import NativeMethodsMixin & requireNativeComponent failed #507

Closed
Creemli opened this Issue Jun 7, 2017 · 6 comments

Comments

5 participants
@Creemli

Creemli commented Jun 7, 2017

It turns out to be error when use:

import NativeMethodsMixin from 'NativeMethodsMixin';

import { requireNativeComponent } from 'react-native'

Is there any better way to access the private class( never export ) such as NativeMethodsMixin?
eg:

  1. configure alias in webpack
  2. custom a webpack plugin to fix this issue.

Thanks

@necolas

This comment has been minimized.

Owner

necolas commented Jun 7, 2017

Hmm, React Native doesn't export NativeMethodsMixin - does the RN packager allow you to import NativeMethodsMixin using Haste? And requireNativeComponent doesn't make sense for Web (you should probably avoid importing it in modules that need to run on web)

@Creemli

This comment has been minimized.

Creemli commented Jun 12, 2017

Yeah, RN packager supports haste ( with providesModule declare ). And I agree with you that the APIs don't make sense.
Actually, if we wanna build a web app with ReactNative Code, some of the APIs are very necessary to be translated in web. When we use this project, we must have already developed a RN app first, so I think we should translate them rather than avoiding importing these functions, How about you?

@necolas

This comment has been minimized.

Owner

necolas commented Jun 12, 2017

I'm going to close this because a) RN doesn't explicitly export NativeMethodsMixin, b) and requireNativeComponent doesn't make sense for web. If you were to import/use RNW's createDOMElement that would also throw an error. You should consider requireNativeComponent as an iOS/Android specific module and it should be avoided in any code that needs to run on web.

@necolas necolas closed this Jun 12, 2017

@L1fescape

This comment has been minimized.

Contributor

L1fescape commented Jul 27, 2017

I think a custom webpack plugin that resolves requireNativeComponent is the best temporary solution, but I wasn't able to figure out how to do so. Instead I opted to create a very basic implementation inside of react-native-web so that I could use react-native-iterable on web, iOS, and Android. There's still a lot left to implement.

I have mixed feelings about requireNativeComponent being considered an iOS/Android specific module. While I agree with your argument @necolas, it'd still be very convenient to use libraries that don't currently target web.

@vladp

This comment has been minimized.

vladp commented Apr 24, 2018

@L1fescape , WRT " it'd still be very convenient to use libraries that don't currently target web". You were right...
I am running into the same issue with React-native-material kit, which I am struggling to keep for the web (as I used it extensively in my react-native app).


./node_modules/react-native-material-kit/lib/internal/MKTouchable.js:66
  63 |   onTouch: PropTypes.func,
  64 | };
  65 | 
> 66 | const NativeTouchable = requireNativeComponent('MKTouchable', {
  67 |   name: 'MKTouchable',
  68 |   propTypes: MKTouchable.propTypes,
  69 | }, {

Seems like I have rewrite my app to remove usage of RNMK (at least for the web).

@hiteshagja

This comment has been minimized.

hiteshagja commented Sep 17, 2018

@necolas

It's used in popular library react-native-svg and it's really not possible not use svg.

Any work around for by pass this error?

kmagiera added a commit to kmagiera/react-native-screens that referenced this issue Oct 2, 2018

Fix for unsupported platforms (#22)
Fixes #13 for real
Fixes react-navigation/react-navigation#5004

Use different `index.js` files for supported and unsupported platforms.

Tested on iOS and on an existing web project that uses react-navigation.

---

!['react-native' does not contain an export named 'requireNativeComponent'.](https://user-images.githubusercontent.com/619186/46323012-8164e300-c5c2-11e8-964e-b6f233776dab.png)

Necolas explained here that this import should not be on any file that runs on web: necolas/react-native-web#507 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment