Integrating non-compiled es modules

[MiguelNiblock]

There's been a few suggestions that a feasible approach to integrate libraries that require compilation/ transpilation would be to pre-compile locally to es5. I created a pet repo in the hopes we can develop a sample of how this approach would work. My aim is to demonstrate whether it's possible to use remix with ui component libraries that use react-native-web, specifically native-base, since they have the best documentation and official integration with nextjs.

here's the starter repo. https://github.com/MiguelNiblock/remix-samples-rn . I followed the installation instructions except for the compiler setup, which made the compilation fail with:

    node_modules/react-native/Libraries/Image/resolveAssetSource.js:19:12:
      19 │ import type {ResolvedAssetSource} from './AssetSourceResolver';
         │             ^
         ╵             from

 ✘ [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js:14:12:
      14 │ import type {HostComponent} from '../../Libraries/Renderer/shims/R...
         │             ^
         ╵             from

 ✘ [ERROR] Unexpected "typeof"

    node_modules/react-native/index.js:14:7:
      14 │ import typeof AccessibilityInfo from './Libraries/Components/Acces...
         ╵        ~~~~~~

and native base says there's a few different ways to integrate it into a web project. there's directions for 1)CRA, 2)nextjs via expo adapter, and 3)nextjs via their own adapter. Here's all the info:

• Next via expo adapter https://docs.nativebase.io/install-next
• Next via native-base adapter https://docs.nativebase.io/next-adapter
• CRA https://docs.nativebase.io/install-cra

Interestingly, the CRA directions don't require any additional setup, it seems to work the same as a simple installation in react-native for mobile.

Some of the requirements for transpiling for nextjs:

• transpile these dependencies: "react-native-web",
  "react-native-svg",
  "native-base",
  "react-native-svg",
• re-create the babel configuration of expo-next's adapter. https://github.com/expo/expo-cli/blob/main/packages/next-adapter/src/withExpo.ts , most notably, 'next/babel', 'babel-preset-expo'.
• babel-preset-expo: https://github.com/expo/expo/tree/master/packages/babel-preset-expo#readme and the actual presets it incorporates: https://github.com/expo/expo/blob/master/packages/babel-preset-expo/index.js
• also it's necessary to alias react-native to react-native-web, and resolve .web.tsx, .web.jsx, .web.ts, .web.js files with priority.
• and react-native-web also has a recommended babel plugin https://necolas.github.io/react-native-web/docs/multi-platform/ I'm not sure if the expo adapter preset already takes care of that.

@Kilian do you think this is feasible? I think these requirements are based on the current paradigm of on-the-fly compilation, so compiling statically becomes non-trivial when all the proven-to-work resources and official docs & examples assume you will compile onthefly like everybody does. I don't even find any guides online for how to approach transpiling a module statically & locally to use as a dependency. Perhaps that's why they don't ship it pre-compiled?

[kiliman]

I'm getting ready to startup a react native project next week, so I'll be able to try out these options to see what works. Thanks for getting a sample project setup.