Tinybase not compatible with metro in react-native

[kastriotkastrati]

Describe the bug

Hello, I'm trying to use tinybase for a project with react-native and I keep getting this error:

While trying to resolve module `tinybase` from file `---path---\App.tsx`, the package `--path--\node_modules\tinybase\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`--path---\node_modules\tinybase\index`. Indeed, none of these files exist.:.....

In my opinion, looks like metro has issues with the way the package is exported in package.json and cannot resolve the correct path.

Your Example Website or App

React native is not an option in stackblitz

Steps to Reproduce the Bug or Issue

1. Initialize a react native app
2. Install tinybase
3. Import and interact with tinybase

Expected behavior

I would expect tinybase to work similar to how it does in a react or next app, with webpack.

Screenshots or Videos

No response

Platform

• OS: [macOS, Windows, Linux]
• Browser: [Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[jamesgpearce]

Alright, this is a good one! I will take a look.

[jamesgpearce]

I think this is caused by TinyBase using the exports field, not supported by Metro as per facebook/metro#670 - I'm looking at workarounds.

[jamesgpearce]

OK, fixed. Please update to v1.3.2. This adds a "react-native" field to package.json that allows Metro to find the file directly (since it doesn't currently support exports).

The ui-react library works too! - because it doesn't rely on the HTML DOM. But Note that until Metro fixes facebook/metro#670 you will still have to be slightly creative and reference it explicitly from the lib folder directly:

Have fun and let me know how it goes!

[jamesgpearce]

Fixed in https://github.com/tinyplex/tinybase/releases/tag/v1.3.2

[jamesgpearce]

@kastriotkastrati how is your experience going so far?

[kastriotkastrati]

@jamesgpearce
Hello, It's going really well. Typescript throws me errors whenever I import something from 'lib/ui-react' since tinybase.d.ts does not export ui-react and that's where the imports are looking for the types. I don't know if there's something wrong with my ts configuration or whether this is expected (as you know there's a perfectly fine ui-react types file wherefrom I would have rather gotten the types). To solve my issues, I've either added @ts-ignore on the imports or primarily used other means of recreating the behavior of ui-react. I'm also obviously using a custom persister to accommodate for react-native. I've been making some helper functions to serve me somewhat like a mini-ORM, which I'm curious to know whether you think they're something that tinybase should have.

[jamesgpearce]

Oh no! I wonder if you can use tsconfig to force it to resolve the .d.ts at that path? Or try some explicit things in the typesVersions field in package.json. Happy to merge in anything that fixes it until facebook/metro#670 happens.