search

tinyplex / tinybase

The reactive data store for local‑first apps.
https://tinybase.org
MIT License
3.72k stars 78 forks source link

Importing tinybase/ui-react with React Native / Metro #59

Closed brentvatne closed 1 year ago

brentvatne commented 1 year ago

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 image
  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

Additional context

Issue previously described in this comment: https://github.com/tinyplex/tinybase/issues/28#issuecomment-1331658910

jamesgpearce commented 1 year ago

Ugh, ok. Thanks!

jamesgpearce commented 1 year ago

@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 https://github.com/facebook/metro/issues/670 - any inside news on whether that's soon enough to resolve this 'properly'?

jamesgpearce commented 1 year ago

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 commented 1 year ago

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

devYonz commented 1 year ago

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 commented 1 year ago

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