React native metro code target

[kastriotkastrati]

Describe the bug

Hello, so I'm configuring eas update in one of my apps in react-native where I'm encountering a problem.

[expo-cli] SyntaxError: node_modules\tinybase\lib\indexes.js: Unexpected token: operator (?) in file node_modules\tinybase\lib\indexes.js at 224:11
[expo-cli] Error: Unexpected token: operator (?) in file node_modules\tinybase\lib\indexes.js at 224:11
[expo-cli]     at minifyCode (--path--\node_modules\metro-transform-worker\src\index.js:101:13)
[expo-cli]     at transformJS (--path--\node_modules\metro-transform-worker\src\index.js:319:28)
[expo-cli]     at transformJSWithBabel (--path--\node_modules\metro-transform-worker\src\index.js:410:16)
[expo-cli]     at processTicksAndRejections (node:internal/process/task_queues:96:5)
[expo-cli]     at async Object.transform (--path--\node_modules\metro-transform-worker\src\index.js:571:12)

It seems that the transpiling target for tinybase is too high for metro which makes metro fail when it encounters new syntax like optional chaining etc.

It would be nice if the target was set to something that includes these features.

I have been debugging the problem for a while and it appears to me that adding this would help:

https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining.

I patched tinybase from node_modules with yarn by importing things from "lib/debug" and literally replacing lib/debug/*.js with the babel ie9 transpiled versions of those files and it all works, but it would be nice to have this from the package as others will probably encounter this problem in the future too.

Thank you

Your Example Website or App

No stackblitz for react-native

Steps to Reproduce the Bug or Issue

.

Expected behavior

.

Screenshots or Videos

No response

Platform

• OS: [Windows]
• Tinybase Version: [1.3.2]

Additional context

No response

[jamesgpearce]

This is a bit surprising since I was able to compile TinyBase into a RN app back in issue #17 and I don't think the indexes module has changed since then. I don't want to drop the modernity across the board if it increases size meaningfully. Perhaps I can offer a parallel set of packages with a different target.

[kastriotkastrati]

I'm doing over the wire updates of the application, at which point the code gets compiled for distribution with a different target. I feel like it's asking too much to have a set of packages offered with a different target given that I can just make a personal fork and compile it as I wish without putting you through the hassle.

On the other hand, I think it could be valuable for other people facing this issue, so if you could provide a parallel set with different target that it would be nice.

[jamesgpearce]

Ah, got it. No worries with a 'legacy' folder of down-leveled bundles... we already have the debug folder anyway. So it sounds like you are saying IE9 is a good baseline?

[kastriotkastrati]

Yes, IE9 would work nicely. Thank you.

[jamesgpearce]

Hey @kastriotkastrati! I wasn't able to dial esbuild as far down as ie9 but I do notice that the es6 build successfully transpiles away the null coalescing, so that may well work for you without too much size burden.

I just released v2.0.1 that contains two es6 build directories in lib. The es6 directory is ESM, and the umd-es6 directory is (obviously) UMD. So if you explicitly import from those deeper directories, you should be good on older devices and build targets.

Can you npm install v2.0.1, give it a whirl and see if my guess is correct? If so we can close this out.

All the build combos are now documented in a table here: https://tinybase.org/guides/how-tinybase-is-built/architecture/#lib

[jamesgpearce]

Friendly ping, @kastriotkastrati - did this work for you?

[kastriotkastrati]

hello @jamesgpearce, sorry for the delay. I have not had much time lately. I will test this today and get back to you:)

[kastriotkastrati]

hello @jamesgpearce . I can verify that this worked. After updating to 2.0.1 and fixing the imports to the new es6 module, metro does not error on me and is able to send over the wire updates.

Here is the previous output:

✔ Provide an update message. … run: tinybase < 2.0.1 without es6 folder

[expo-cli] --non-interactive is not supported, use $CI=1 instead
[expo-cli] Starting Metro Bundler
[expo-cli] iOS Bundling failed 13279ms
[expo-cli] 
[expo-cli] SyntaxError: node_modules/tinybase/lib/debug/indexes.js: Unexpected token: operator (?) in file node_modules/tinybase/lib/debug/indexes.js at 399:13
[expo-cli] Error: Unexpected token: operator (?) in file node_modules/tinybase/lib/debug/indexes.js at 399:13
[expo-cli]     at minifyCode (--project--/node_modules/metro-transform-worker/src/index.js:101:13)
[expo-cli]     at transformJS (--project--/node_modules/metro-transform-worker/src/index.js:319:28)
[expo-cli]     at transformJSWithBabel (--project--/node_modules/metro-transform-worker/src/index.js:410:16)
[expo-cli]     at processTicksAndRejections (node:internal/process/task_queues:96:5)
[expo-cli]     at async Object.transform (--project--/node_modules/metro-transform-worker/src/index.js:571:12)
✖ Failed to build bundle!

Note: The imports are there from lib/debug because I would overwrite the code there.

Current successful output:

expo-cli] Dumping source maps
[expo-cli] Preparing additional debugging files
[expo-cli] Export was successful. Your exported files can be found in dist
✔ Built bundle!
✔ Uploaded 2 assets!
✔ Published!

Branch             preview
Runtime version    3.0.0
Platform           android, ios

Thank you:)

[jamesgpearce]

Great! Closing this out and good luck...

[devYonz]

Also facing the same issue with Expo and haven't been able to follow the solution. Can you share a snippet or details on how to get this working? Importing from tinybase/lib doesn't work and I am not sure how to select tinybase/es6 correctly.

I have tried to install and add the plugins to babel.config.js but still facing the issue.

["@babel/plugin-proposal-optional-chaining","@babel/plugin-proposal-nullish-coalescing-operator"]

Likely caused by https://github.com/expo/expo/issues/1150

The problem is reproducible with a fresh expo project.

npx create-expo-app tinyBaseTest npm i tinybase --save // Add some changes to call Store

import { createStore } from "tinybase";
const INITIAL_TODOS = {
  todos: {
    0: { text: "Clean the floor" },
    1: { text: "Install TinyBase" },
    2: { text: "Book holiday" }
  }
};

export default function App() {
  React.useEffect(() => {
    const store = createStore();
    store.setTables(INITIAL_TODOS);
    console.log(store.getTables());
  }, []);

npx react-native bundle --dev false --entry-file node_modules/expo/AppEntry.js --bundle-output ios/build/main.jsbundle --platform ios

[devYonz]

Dooh, es6 is working fine. Make sure to import form tinybase/lib/es6/store to resolve the packaging issue. I should have paid closer attention to the directory structure.

import { createStore } from "tinybase/lib/es6/store"; or import { createStore } from "tinybase/lib/es6/tinybase";

For the next poor chap using Expo

Tinybase works perfectly fine, including the ui-react hooks. Watch-out for Module import gotchas, for example the below imports won't work:

import { createStore } from "tinybase/es6";
import { createStore } from "tinybase/lib/es6";
import { createStore } from "tinybase/lib/es6/lib/store";

Vs-code will incorrectly complains about import { useRow, CellView } from "tinybase/lib/ui-react"; The code runs fine, but if the error bothers you patch tinybase/lib/tinybase.d.ts with +export * from './ui-react'; Typescript module resolution will check the .d.ts and error out

James, I recommend adding a note for expo use in the getting started docs or a sample project with file persistence.

[jamesgpearce]

@yfeleke, see https://github.com/tinyplex/tinybase/releases/tag/v3.0.4 (and the guide) which I think should help now

[devYonz]

LFG! This was my hack. Looking forward to also using the 3.1 beta changes for typing in tools generated stores. ReExport.ts