Build is failing because `Cannot find module ./data/data.json`

[narrow garnet]

I have a component that takes in a string for a filename because I have data stored in different json files.

The component looks like this:

import styles from "./BrowserCompat.module.css";
import { createRequire } from "module";

export default function BrowserCompat({ dataFileName }) {
  const require = createRequire(import.meta.url);
  const data = require(`./data/${dataFileName}.json`);
  const compatData = data.api;
  
  return ( bunch of markup here )
}

It works when running astro dev but running astro build fails with this log:

error   Cannot find module './data/webmonetization.json'
  Require stack:
  - /Users/huijing/Sites/interledger/platforms-spike/webm-starlight/dist/chunks/BrowserCompat.7660848d.mjs

Has anyone encountered this issue before or know what's going on here?

[proud harbor]

import.meta.url isn't reliable at build time because it'll point to the built chunks instead of the source files

[narrow garnet]

oh, in that case, what are my options then for allowing this component to reference a different JSON data file based on what is passed into the component?