Do you think it's possible to get this working in the browser?

[cmaycumber]

I'm curious if you think it's possible to get this working with react-native-web as well as a mobile device.

Would all I need to do is include react-native-web as a module in the wormhole and modify the babel output to support RNW?

[cawfree]

Hello! I think this should work fine in a browser. I don't think there's anything specific to the native runtime that we're doing with this module.

Yes that's right. react-native-web uses Webpack aliases to remap references from react-native to react-native-web, but since this happens at build time it means you'd probably have to emulate a similar behaviour at runtime when a Wormhole tries to resolve a dependency. So yeah, sounds like you hit the nail on the head.

You should be able to experiment with this directly using the Example App.

[cawfree]

This will probably work:

const { Wormhole } = createWormhole({
  global: {
    require: (moduleId: string) => {
      if (moduleId === 'react') {
        return require('react');
+     } else if (moduleId === 'react-native' || moduleId === 'react-native-web') {
        return require('react-native');
      } else if (moduleId === 'react-native-webview') {
        return require('react-native-webview);
      }
      return null;
    },
  },
  verify: async () => true,
});

[cmaycumber]

This will probably work:

const { Wormhole } = createWormhole({
  global: {
    require: (moduleId: string) => {
      if (moduleId === 'react') {
        return require('react');
+      } else if (moduleId === 'react-native' || moduleId === 'react-native-web') {
        return require('react-native');
      } else if (moduleId === 'react-native-webview') {
        return require('react-native-webview);
      }
      return null;
    },
  },
  verify: async () => true,
});

Sweeeet I'll try this right now.

[cawfree]

Don't get your hopes up. 😛

The thinking here was that Webpack should make the appropriate decision for us, so even though we're saying require('react-native'), it should still just import react-native-web because that will have been rewritten.

[cmaycumber]

After some experimenting I got this working with the following setup and using babel-preset-expo to compile the code! Thanks for the help.

     if (moduleId === "react") {
        return require("react");
      } else if (moduleId === "react-native" || moduleId === "react-native-web") {
        return require("react-native");
      } else if (moduleId === "@babel/runtime/helpers/interopRequireDefault") {
        return require("@babel/runtime/helpers/interopRequireDefault");
      }