Google Speech API React-Native Error when running

Question

Trying to move the Google Speech to text API into React-Native. This is the code that I have so far. The error that I get is this: "bundling failed: Error:

Unable to resolve module fs from /Users/Desktop/finalTest/final3/App.js: Module fs does not exist in the Haste module map".

I tried running the suggested commands but it still didnt work:

1. Clear watchman watches: watchman watch-del-all.
   2. Delete the node_modules folder: rm -rf node_modules && npm install.
   3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
   4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.

Any help would be appreciated.

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import axios from "axios";

const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

const fs = require("fs");
const axios = require("axios");

const API_KEY = "./keyfile.json";
const fileName = "./audio.raw";

// Reads a local audio file and converts it to base64
const file = fs.readFileSync(fileName);
const audioBytes = file.toString("base64");

// The audio file's encoding, sample rate in hertz, and BCP-47 language code
const audio = {
  content: audioBytes
};
const config = {
  encoding: "LINEAR16",
  sampleRateHertz: 16000,
  languageCode: "en-US"
};
const request = {
  audio: audio,
  config: config
};

const apiKey = API_KEY;
const url = `https://speech.googleapis.com/v1/speech:recognize?key=${apiKey}`;

axios
  .request({
    url,
    method: "POST",
    data: request
  })
  .then(response => {
    const transcription = response.data.results
      .map(result => result.alternatives[0].transcript)
      .join("\n");
    console.log(`Transcription: ${transcription}`);
  })
  .catch(err => {
    console.log("err :", err);
  });

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

Answer 1

You can't use fs, or any node core modules for that matter, in react native. You can read more about that here, but it's best to think of your JS as being pure JavaScript without any added APIs or modules.

If you need filesystem access then you'll need a third party library, for example react-native-fs