Usage on web

[johnwils]

trafficstars

Describe the bug This error shows up when in a plain React web project:

Uncaught Error: Cannot find module 'react-native/Libraries/Renderer/shims/ReactNative'
    at webpackMissingModule (main.js:153692)
    at ./node_modules/@meteorrn/core/src/Data.js (main.js:153692)
    at Module.options.factory (main.js:489768)
    at __webpack_require__ (main.js:489182)
    at fn (main.js:489424)
    at ./node_modules/@meteorrn/core/src/Meteor.js (main.js:153795)
    at Module.options.factory (main.js:489768)
    at __webpack_require__ (main.js:489182)
    at fn (main.js:489424)
    at ./node_modules/@meteorrn/core/src/index.js (main.js:155028)

The Using on Web doc section say all that is needed is AsyncStorage setup, which it is.

Wondering does react-native have to be installed for this to work? In src/Data.js React Native node_modules are required, which I think is where this error is coming from: https://github.com/TheRealNate/meteor-react-native/blob/f45c973f511ac05590fb1d6400378765da244f84/src/Data.js#L1-L8

[TheRealNate]

Hey @johnwils,

You may be right that it may require installation of the react-native package. This is mainly to access the batchedUpdates feature.

Would it be possible for you to try installing the react-native package? Alternatively, if you're willing to try forking the package, I believe react-dom also exposes an unstable_batchedUpdates api.

Thanks!

[jankapunkt]

I suggest to provide a drop-in replacement for batchedUpdates, that can be used if react-native is not installed, which is also the case for tests recently (installing it would create a great mess for the tests, since we would have to add a huge transpilation chain just for two functions from react-native).

I currently implement it for testability like so:

const bindings = {}

// TODO:
// we should consider implementing an injection-based pattern for
// unstable_batchedUpdates and runAfterInteractions simply because
// - this allows a much easier test-setup, where we don't need to mock modules
// - we can be independent of any folder structure or refactoring
//   that happens in react-native
// - we can provide a default behaviour out-of-the box that gets overwritten
//   when devs inject their favourable behaviour

try {
  require.resolve('react-native')
  bindings.batchedUpdates = require('react-native/Libraries/Renderer/shims/ReactNative').unstable_batchedUpdates;
  bindings.runAfterInteractions = require('react-native').InteractionManager.runAfterInteractions;
} catch (e) {
  // if the module is not installed (for example when running tests)
  // we fall back to some defaults that seem to be close to what
  // the original functions implement
  bindings.batchedUpdates = cb => cb()
  bindings.runAfterInteractions = fn => setTimeout(() => fn(), 50)
}

module.exports = bindings

See: https://github.com/jankapunkt/meteor-react-native/blob/feature-test-coverage/helpers/reactNativeBindings.js

I assume this approach would fix this issue but still being compatible to default mobile setups.

[TheRealNate]

@jankapunkt looks good to me, would need to test on web to confirm this works.

[github-actions[bot]]

Closing this issue due to no activity. Feel free to reopen.