I am making a small NPM package which would essentially serve as a convenient data import in a React app. My package currently has one exported method, getSystems(), which returns an array of objects. The module code reads the data file using fs/promises.readFileSync which obviously is not available in a browser environment.

How can I bundle the data in my package so that it can be used in a React app?

Here is what the module is doing:

import { decode } from "@msgpack/msgpack";
import { readFileSync } from "fs";
import path from "path";

const file = readFileSync(path.join(__dirname, "../assets/systems.dat"));
const systems = decode(file);

export const getSystems = () => systems;

This works in node. I suppose what I need is a way to configure the build in such a way that the data is included in the output JS files.

Full code here.

Disclaimer'ish: I understand this is usually done via an API instead of bloating the application code with data (which is what I'm doing here, I suppose). This is kind of a learning and testing thing. And also I got sick of copying data files around in Dockerfiles.. :)