React native paper Firefox error

Expo SDK
1

Hi all,

I’m having an issue using react native paper on Firefox. Even in the snack example on web I get the following error:
A mutation operation was attempted on a database that did not allow mutations.
Evaluating module://react-native-paper.js
Evaluating module://App.js.js
Loading module://App.js

In a production app that works fine on Chrome I find that all the react native paper icons do not appear on Firefox. And the console shows the same error shown in Snack above.

Thanks in advance for your help!

2

Hi

There is currently a problem on snack that’s causing the react native paper icons not to show unless you also add something like this:

import { MaterialCommunityIcons } from '@expo/vector-icons';
...
<MaterialCommunityIcons name="magnify" />
...

This is on Firefox and Chrome. But this workaround is not needed on Android or iOS or when running locally with expo start --web. So I think that’s separate from the “mutation” error you’re seeing.

Compare:

Can you post a link to the snack where you see this “mutation” problem?

3

I see the problem on https://snack.expo.io. Meaning on Firefox I can’t run the default Expo example. I’m running Firefox on Linux by the way. Yes I am aware of the icons issue. This Firefox issue is independent of any icons though.

4

hmmm… it works for me on macOS and Linux. The screenshot below is from an Ubuntu MATE VM:

image
image3104×1978 698 KB

Sorry, I forgot it was you that found the issue the other day.

Searching for the error turns up some possibilities.

If you type about:config in the location bar and search for dom.indexedDB.enabled, is it set to false? I assume there’s something in the preferences that corresponds to that setting, but off hand I don’t know what it is. Mine is set to true.

There’s also a mention of “may have set to block offline storage for all sites in the permissions manager which disables IndexedDB” in this one:

There’s also some mention of Tor and private browsing possibly disabling IndexedDB and the above setting no longer being available:

EDIT: Indeed, if I browse to snack.expo.io in a Private window I get the “mutation” error and the web preview shows an error.

5

Mine is also set to true. Is this the expected behavior then?

6

It seems to be expected if you’re in Firefox’s “Private” mode, or if you have IndexedDB disabled.

Otherwise it’s not expected, but it does not seem to be something that Expo/snack can control. It seems to be a client-side thing.

7

I am not in private mode and it looks like IndexedDB is enabled.

Could this issue be related?
https://github.com/expo/expo/issues/5935

8

I do not believe so.

  • The icons not appearing is a separate issue from IndexedDB not working for you and I believe the IndexedDB issue is either a Firefox configuration issue or maybe another issue with your Firefox profile.
  • Vector icons are working in Firefox (and Chrome. I haven’t tested other browsers.) as long as you include them directly. It’s only via React Native Paper in snack that they are not working.
  • React Native Paper icons are working fine for me locally. The bug report you linked to is about the icons not showing when serving the app locally. Not specifically from snack.

Can you create a new Firefox profile and test it with the new profile? (I still expect the React Native Paper icons not to work in snack, since that is a separate issue, but I suspect the “mutation” issue will have disappeared.)

9

Hello! Thanks for the clarification. I agree that the IndexedDB issue is separate from the icons issue.

I have encountered the React Native Paper icons issue outside of snack. I noticed that the icons issue goes away when I do not load fonts. Specifically, the icons do show up with the following code, but only while the require() line is commented out:

useEffect(() => {
async function loadFonts() {
await Font.loadAsync({
//‘twitchFont’: require(“./assets/fonts/RussoOne-Regular.ttf”)
});
setFontsLoaded(true);
}
try {
loadFonts();
} catch (e) {
console.log(e);
}
}, );

However, in this case I am obviously not able to load the font.

Thanks for your help,
George

10

I can confirm. The following does not show an icon on the button with expo start --web, but does work on a physical device (tested on Android):

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { Button } from "react-native-paper";
import * as Font from "expo-font";

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    async function loadFonts() {
      await Font.loadAsync({
        "twitchFont": require("./assets/DejaVuSansMono.ttf")
      });
      setFontsLoaded(true);
    }
    try {
      loadFonts();
    } catch (e) {
      console.log(e);
    }
  });

  return (
    <View style={styles.container}>
      <Text>Font loaded: {JSON.stringify(fontsLoaded)}</Text>
      <Button mode="contained" icon="magnify">
        Button
      </Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.