react native - How to bundle and read a json in Expo - Stack Overflow

admin管理员组

文章数量:1401673

I want to bundle some files in my expo application and read them during runtime.

Sounds simple, but for some reasons it doesn't work.

MY SETUP

Installed expo-asset and expo-file-system
Created a json file under the path assets/data/recipe.json
Configured metro.config.js

const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.resolver.assetExts.push(
    'json'
  );


module.exports = config;

Configured app.json

{
     ...
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ],
      "expo-asset"
    ],
    .....
}

Created a simple service.ts file with this function which gets called in another react component

    private async getBundledRecipe() : Promise<StorageRecipe> {
        try {
            const nodeRequire  = require("../assets/data/recipe.json")

            const asset = Asset.fromModule(nodeRequire);

            await asset.downloadAsync();

            const payload = await FileSystem.readAsStringAsync(asset.localUri!);
            return JSON.parse(payload) as StorageRecipe
        } catch (error) {
            console.error("error when calling getBundledRecipe()", error)
            throw error;
        }
    }

ERROR: error when calling getBundledRecipe() [Error: Module "[object Object]" is missing from the asset registry] [Component Stack]

I've tried all reasonable possibilities but nothing works. It looks like for some reason it's parsing the content of the file and sending the json object to the Asset.fromModule().

If I tweak the path such as require("./assets/data/recipe.json"), then I will get error when calling getBundledRecipe() [Error: Module "undefined" is missing from the asset registry] [Component Stack] so this make me think that path that I specify is correct (tried all combinations of paths, yet this is the only one which seems to not display undefined)

Reading this bundled json is only the first step, then I need to also read some mp3 files (offline mode).

Could you please explain me what is wrong here and how to fix it ?
Thanks

I want to bundle some files in my expo application and read them during runtime.

Sounds simple, but for some reasons it doesn't work.

MY SETUP

Installed expo-asset and expo-file-system
Created a json file under the path assets/data/recipe.json
Configured metro.config.js

const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.resolver.assetExts.push(
    'json'
  );


module.exports = config;

Configured app.json

{
     ...
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ],
      "expo-asset"
    ],
    .....
}

Created a simple service.ts file with this function which gets called in another react component

    private async getBundledRecipe() : Promise<StorageRecipe> {
        try {
            const nodeRequire  = require("../assets/data/recipe.json")

            const asset = Asset.fromModule(nodeRequire);

            await asset.downloadAsync();

            const payload = await FileSystem.readAsStringAsync(asset.localUri!);
            return JSON.parse(payload) as StorageRecipe
        } catch (error) {
            console.error("error when calling getBundledRecipe()", error)
            throw error;
        }
    }

ERROR: error when calling getBundledRecipe() [Error: Module "[object Object]" is missing from the asset registry] [Component Stack]

I've tried all reasonable possibilities but nothing works. It looks like for some reason it's parsing the content of the file and sending the json object to the Asset.fromModule().

If I tweak the path such as require("./assets/data/recipe.json"), then I will get error when calling getBundledRecipe() [Error: Module "undefined" is missing from the asset registry] [Component Stack] so this make me think that path that I specify is correct (tried all combinations of paths, yet this is the only one which seems to not display undefined)

Reading this bundled json is only the first step, then I need to also read some mp3 files (offline mode).

Could you please explain me what is wrong here and how to fix it ?
Thanks

• react-native
• expo

Share Improve this question Follow asked Mar 25 at 1:15 blessed01blessed01 5988 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Haha, I figured it out:
(took some time as I'm ts / js beginner)

It seems that xyz.json files are treated differently by require() vs other file types (e.g. mp3).

If the file type is json, then it will read its content and prepare an object, therefore require("assets/data/file.json") returns an object.

If the file type is not (js, ts, json or other special types to node), then require("assets/data/audio.mp3") returns a resource id, which is compatible with Asset.fromModule().

In my case the easiest fix was to rename the file as assets/data/file.txt and allow .txt asset extension in metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.resolver.assetExts.push(
    "mp3", "txt"
 );


module.exports = config;

本文标签： react nativeHow to bundle and read a json in ExpoStack Overflow