Studio presents an empty page on all browsers

[danb4r]

As other users reported at the end of the #4 thread, the plugin is presenting an empty page to the user. I've tested with Chrome, Edge, Brave and Firefox with the same response as the picture above.

Expo doctor did not report any issues with dependencies in my project. I followed the instructions in the README.

This is my expo-info:

expo-env-info 1.2.1 environment info:
System:
OS: Windows 11 10.0.22631
Binaries:
Node: 18.20.4 - ~\AppData\Local\fnm_multishells\39820_1733703331795\node.EXE
npm: 10.9.0 - ~\AppData\Local\fnm_multishells\39820_1733703331795\npm.CMD
SDKs:
Android SDK:
API Levels: 34, 35
Build Tools: 34.0.0, 35.0.0
System Images: android-24 | Google Play Intel x86 Atom, android-35 | Google Play Intel x86_64 Atom
IDEs:
Android Studio: AI-242.23339.11.2421.12550806
npmPackages:
babel-preset-expo: ~11.0.0 => 11.0.15
expo: ~51.0.39 => 51.0.39
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.74.5 => 0.74.5
react-native-web: ~0.19.6 => 0.19.12
Expo Workflow: bare

[devethan]

In my case, "crypto.randomUUID is not a function" error shown on console. Same on Chrome, Brave.
I think it is because of that some of dependencies are using window.crypto module which is not supported on Http protocol.

[danb4r]

As other users reported at the end of the #4 thread, the plugin is presenting an empty page to the user. I've tested with Chrome, Edge, Brave and Firefox with the same response as the picture above.

Expo doctor did not report any issues with dependencies in my project. I followed the instructions in the README.

I would like to add that there is no error presented in the expo console neither in the Android Studio Logcat for me.

[icastillejogomez]

Same here! White screen, no network or console errors

[pmk1c]

In my case, "crypto.randomUUID is not a function" error shown on console. Same on Chrome, Brave.

I had the same error, but then I realized it was coming from a 1Password extensions. So this does not seem to be related (at least in my case). Deactivating the extension made the error disappear.

Now I have a blank screen without any error...

Edit: In fact, I just realized, it is a Loading Screen with tini, tiny loading spinner at the center... and it is doing something, looking at the WebSocket connection. But it doesn't seem to receive anything.

[florentmsl]

I’m experiencing the same issue. When I open the app, the browser displays an empty page with a small loading spinner in the center. There are no network errors or console errors, but after a few seconds, I encounter an error in the terminal when I open the tools: [TypeError: db.prepareAsync is not a function (it is undefined)]. Has anyone else encountered this issue?

Versions:

• "expo": "~52.0.11",
• "expo-drizzle-studio-plugin": "^0.1.1",
• "drizzle-orm": "^0.38.2",
• "drizzle-kit": "^0.30.1"

[babucarr32]

Make sure useDrizzleStudio is using your actual database.

import { useDrizzleStudio } from "expo-drizzle-studio-plugin";
import * as SQLite from "expo-sqlite";
import { View } from "react-native";

const actualDatabse = SQLite.openDatabaseSync("db");

export default function App() {
    useDrizzleStudio(actualDatabse);

    return <View></View>;
}

[florentmsl]

Make sure useDrizzleStudio is using your actual database.

import { useDrizzleStudio } from "expo-drizzle-studio-plugin";
import * as SQLite from "expo-sqlite";
import { View } from "react-native";

const actualDatabse = SQLite.openDatabaseSync("db");

export default function App() {
    useDrizzleStudio(actualDatabse);

    return <View></View>;
}

That was it! Thanks! I did use const db = drizzle(sqlite); with useDrizzleStudio instead of directly using the sqlite object

[danb4r]

Make sure useDrizzleStudio is using your actual database.

Perfect! Thank you. As @florentmsl mentioned, I was also using drizzle(actualDatabase, ...) as the wrong db source to studio.

[LoganRupe]

pmk

I'm getting the same. A blank screen without any error, or almost blank, it has the tiniest spinner. No errors anywhere and no data returned from ws network.

[danb4r]

pmk

I'm getting the same. A blank screen without any error, or almost blank, it has the tiniest spinner. No errors anywhere and no data returned from ws network.

Did you see @florentmsl solution?

This is the right way, passing the SQLite db straight to useDrizzleStudio:

const actualDatabse = SQLite.openDatabaseSync("db");

Not this one:

const expoSqlite = SQLite.openDatabaseSync("db");
const wrongDatabase= drizzle(expoSqlite, { schema: schema.default });

[LoganRupe]

pmk

I'm getting the same. A blank screen without any error, or almost blank, it has the tiniest spinner. No errors anywhere and no data returned from ws network.

Did you see @florentmsl solution?

This is the right way, passing the SQLite db straight to useDrizzleStudio:

const actualDatabse = SQLite.openDatabaseSync("db");

Not this one:

const expoSqlite = SQLite.openDatabaseSync("db");
const wrongDatabase= drizzle(expoSqlite, { schema: schema.default });

Yes, I tried that and unfortunately it did not resolve my issue. I'm afk today but will work on a minimal repro tomorrow and link. Sorry.

[babucarr32]

pmk

I'm getting the same. A blank screen without any error, or almost blank, it has the tiniest spinner. No errors anywhere and no data returned from ws network.

Did you see @florentmsl solution?
This is the right way, passing the SQLite db straight to useDrizzleStudio:

const actualDatabse = SQLite.openDatabaseSync("db");

Not this one:

const expoSqlite = SQLite.openDatabaseSync("db");
const wrongDatabase= drizzle(expoSqlite, { schema: schema.default });

Yes, I tried that and unfortunately it did not resolve my issue. I'm afk today but will work on a minimal repro tomorrow and link. Sorry.

No worries, we all need help at some point. You can share the repro.

[LoganRupe]

Did you see @florentmsl solution?
This is the right way, passing the SQLite db straight to useDrizzleStudio:

const actualDatabse = SQLite.openDatabaseSync("db");

Not this one:

const expoSqlite = SQLite.openDatabaseSync("db");
const wrongDatabase= drizzle(expoSqlite, { schema: schema.default });

Yes, I tried that and unfortunately it did not resolve my issue. I'm afk today but will work on a minimal repro tomorrow and link. Sorry.

No worries, we all need help at some point. You can share the repro.

I managed to resolve the issue through the creation on a minimal reproduction.

The issue for me ended up being that I need to upgrade to expo@52 and set newArchEnabled=true in app.json.
Anyway, the minimal reproduction is working correctly here: https://github.com/LoganRupe/drizzle-rnr-min-repro
Also, it took a while for the loading icon to disappear on load (my machine is probably slow or schema is large) but it WORKS! 🎉

Thanks for your time.

[babucarr32]

Did you see @florentmsl solution?
This is the right way, passing the SQLite db straight to useDrizzleStudio:

const actualDatabse = SQLite.openDatabaseSync("db");

Not this one:

const expoSqlite = SQLite.openDatabaseSync("db");
const wrongDatabase= drizzle(expoSqlite, { schema: schema.default });

Yes, I tried that and unfortunately it did not resolve my issue. I'm afk today but will work on a minimal repro tomorrow and link. Sorry.

No worries, we all need help at some point. You can share the repro.

I managed to resolve the issue through the creation on a minimal reproduction.

The issue for me ended up being that I need to upgrade to expo@52 and set newArchEnabled=true in app.json. Anyway, the minimal reproduction is working correctly here: https://github.com/LoganRupe/drizzle-rnr-min-repro Also, it took a while for the loading icon to disappear on load (my machine is probably slow or schema is large) but it WORKS! 🎉

Thanks for your time.

You are welcome.

[icastillejogomez]

In my case, the problem is a that I have a system to manage the database and a hook to provide the database like this:

...
import { useDrizzleStudio } from 'expo-drizzle-studio-plugin';
...

export default function App() {
  const db = useDb();
  useDrizzleStudio(db);
  
  return (
    ...
  )
}

And my custom hook returns null at the first time and because in this line the useEffect dependencies don't contain the db the listener is not set again propertly.

drizzle-studio-expo/src/useDrizzleStudio.tsx

Line 41 in adb0167

}, [client]);

[icastillejogomez]

I just opened this PR to offer a possible fix for this issue: #8

[samhornstein]

Did you see @florentmsl solution?
This is the right way, passing the SQLite db straight to useDrizzleStudio:

const actualDatabse = SQLite.openDatabaseSync("db");

Not this one:

const expoSqlite = SQLite.openDatabaseSync("db");
const wrongDatabase= drizzle(expoSqlite, { schema: schema.default });

Yes, I tried that and unfortunately it did not resolve my issue. I'm afk today but will work on a minimal repro tomorrow and link. Sorry.

No worries, we all need help at some point. You can share the repro.

I managed to resolve the issue through the creation on a minimal reproduction.

The issue for me ended up being that I need to upgrade to expo@52 and set newArchEnabled=true in app.json. Anyway, the minimal reproduction is working correctly here: https://github.com/LoganRupe/drizzle-rnr-min-repro Also, it took a while for the loading icon to disappear on load (my machine is probably slow or schema is large) but it WORKS! 🎉

Thanks for your time.

Thanks, I ran into this same issue and your solution resolved it for me. Unfortunately, npx expo run:ios fails after running npm install expo@52. Running npx install-expo-modules@latest as per this comment (expo/expo#15959 (comment)) reverts back to expo@51 and resolves the build error but of course Drizzle Studio doesn't load unless I run npm install expo@52 again after building.

[Al-Plum]

Had the same problem with a blank screen but have it working now.
Took me a bit to figure it out that I had actually called my database reports and not db.

import { StyleSheet, Text, View } from "react-native";
import React from "react";
import { Drawer } from "expo-router/drawer";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { useDrizzleStudio } from "expo-drizzle-studio-plugin";
import * as SQLite from "expo-sqlite";

const reports = SQLite.openDatabaseSync("reports.db"); 
//My database is called reports

const Layout = () => {
  useDrizzleStudio(reports);
  return (
    <GestureHandlerRootView>
      <Drawer
        screenOptions={{

[RobertoJoseph]

Still having the same issue
"expo-drizzle-studio-plugin": "^0.1.1",
"expo-sqlite": "~14.0.6",
"expo": "~51.0.28",

Any help?

[sobi916]

I have experienced the same issue but resolved it like this:-

const [db, setDb] = useState<SQLite.SQLiteDatabase | null>(null);

  useDrizzleStudio(db);

  useEffect(() => {
    const initializeDatabase = async () => {
      try {
        const db = await SQLite.openDatabaseAsync('databaseName');
        setDb(db);
        console.log('Database opened successfully', db);
      } catch (error) {
        console.error('Error opening database:', error);
      }
    };

    initializeDatabase();
  }, []);