Importing tinybase/ui-react with React Native / Metro

[brentvatne]

Describe the bug

Metro doesn't work with the package.json exports field, so we already use the react-native field in TinyBase to define the entry point for React Native. This is fine until you need to import tinybase/ui-react, at which point Metro will fail to resolve it tinybase/ui-react but TypeScript won't complain. If you import tinybase/lib/ui-react to appease Metro, then TypeScript can't find the types.

One possible solution here is to use the typesVersions field in package.json to point to the types for tinybase/lib/ui-react. This works for now, without breaking anything, but it does lead to a divergence in the API and a quirk to document for React Native users.

Your Example Website or App

https://github.com/brentvatne/example-tinybase

Steps to Reproduce the Bug or Issue

1. Clone the repository (it's a bare-bones React Native / Expo project with TypeScript installed)
2. Open up App.tsx, notice the type error on the import
   
3. See in the commented out import above that we can resolve this type error by importing from tinybase/ui-react instead, but then when you run the app Metro will error.

Expected behavior

As a user, I expect to be able to import tinybase/ui-react in a React Native environment and everything will work - but Metro fails to resolve it. Short of that being possible, I expect there to be another suggested import format that will be compatible with React Native and allow me to use ui-react with Metro and TypeScript.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: React Native
• Version: tinybase@3.0.3

Additional context

Issue previously described in this comment: #28 (comment)

[jamesgpearce]

Ugh, ok. Thanks!

[jamesgpearce]

@brentvatne I remember the react-native field was intended as a temporary solution until exports were properly supported. I notice that's coming along in facebook/metro#670 - any inside news on whether that's soon enough to resolve this 'properly'?

[jamesgpearce]

Hm, OK - I can't repro this. I have your test repo and import { useValue } from 'tinybase/ui-react'; works fine for web. I guess I should also try iOS and Android - is there a different bundler path?

Edit: can repro now on iOS

[jamesgpearce]

https://github.com/tinyplex/tinybase/releases/tag/v3.0.4

[devYonz]

I have been upgrading to 3.1, thanks for making it easy to use.

FYI @jamesgpearce autogenerated -ui-react-.tsx imports from "tinybase/ui-react" for react-native; needs to be changed to tinybase/lib/ui-react? Easy to change the one line after generating, but it would be nice if it worked automatically / with a flag.

[jamesgpearce]

Ah OK. Would you be able to quickly file a new issue for that? Thanks!