React Native: Unable to resolve module tinybase/ui-react/with-schemas

[ansavchenco]

Describe the bug

I have a React Native app and was following Typing The ui-react Module section. When running the app i'm getting the following error:

Error: Unable to resolve module tinybase/ui-react/with-schemas

I tried importing from tinybase/lib/ui-react/with-schemas instead but it didn't help.

Additional context

Package versions:

"tinybase": "^4.0.1"
"react-native": "0.72.3"

[ansavchenco]

Okay, i don't know what the problem is but seems like I found a workaround. Instead of this (from the docs):

import * as UiReact from 'tinybase/ui-react/with-schemas';
import React from 'react';
import {createStore} from 'tinybase/with-schemas';

...

const UiReactWithSchemas = UiReact as UiReact.WithSchemas<
  [typeof tablesSchema, typeof valuesSchema]
>;
const {TableView, useTable, ValueView} = UiReactWithSchemas;

I only imported WithSchemas as a type from tinybase/ui-react/with-schemas while importing the actual functions as UiReact from tinybase/ui-react:

import * as UiReact from 'tinybase/ui-react'
import type { WithSchemas } from 'tinybase/ui-react/with-schemas'
import { createStore, TablesSchema, ValuesSchema } from 'tinybase/with-schemas'
import { newId } from './nanoid'

...

const UiReactWithSchemas = UiReact as unknown as WithSchemas<
  [typeof tablesSchema, typeof valuesSchema]
>

const { TableView, useTable, ValueView } = UiReactWithSchemas

[jamesgpearce]

Interesting... so we have all sorts of little challenges with the React Native bundler. Likely the types are being resolved differently to runtime code.

Glad you were able to get going! If I can repro this I will see if the docs need updating.

[ansavchenco]

My guess is that it has something to do with the exports field of package.json file support for which is still beta in the version of react native i was using. And when importing a type since it's just a type it's not needed in runtime and therefore no error. But yeah, this is all just my guesses.

[jamesgpearce]

Yes, so the TinyBase package.json configures that, when you are using with-schemas, the code still comes from the same folder (lib) but the types come from a different folder (types/with-schemas). I will add something to the docs - thank you!

[jamesgpearce]

Added your solution to https://tinybase.org/guides/schemas-and-persistence/schema-based-typing/#typing-the-ui-react-module - many thanks again!