Shared component library with React Native web

[sergioisidoro]

I'm trying to build a react native component library to be used both in a React native project but also with a React Native web project. I'm using Vite on the web side

For most cases this has been working ok, but React Reanimated has been a big struggle (eg. JSX in .js files, usage of global). I've managed to get past some of those problems, but now I'm getting the following error:

project:build: [vite:load-fallback] Could not load react-native-web/Libraries/Renderer/shims/ReactNative (imported by ../../node_modules/react-native-reanimated/lib/module/reanimated2/platform-specific/RNRenderer.js): ENOENT: no such file or directory, open 'react-native-web/Libraries/Renderer/shims/ReactNative'

I've tried a couple of things, and managed by accident to make it work once, but now I cannot reproduce it to work again. Has anyone attempted such a setup, and is there anything I'm missin?

[tomhendra]

Hey @sergioisidoro did you manage to get past your issue?

I am struggling to get things to even work with Vite! I don't suppose you would be kind enough to share a config or some guidance would you please?

This is where I am so far: https://stackblitz.com/edit/vitejs-vite-zlodww?file=vite.config.ts

[sergioisidoro]

I had completely forgotten about this issue. Leaving some findings here in case someone might help someone.

Some problems are easy to go around, like the usage of global. The important thing there is to NOT use define, because it will cause you issues in the long run. Use a simple polyfill instead:

    <script>
      // Polyfill https://github.com/vitejs/vite/discussions/5912
      if (global === undefined) {
        var global = window;
      }
    </script>

The other issues I think were solved with declaring the dependencies as external.

  "peerDependencies": {
      "react": "xxxx",
      "react-native": "xxx"
 }

And even declaring some libs as external

 "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react"

This ensures the bundler will not add multiple versions or react. In the end I don't know if this solved the issue.

@tomhendra Your problem has nothing to do with shared libraries or react native web. But the polyfill I mention might help
Also check this -- #1823

I managed to make your solution work with some strange state, but then I could not reproduce it. Hope this helps somehow