React: Dynamically Importing JSON Files Within the Public/ Folder W/O Hosting on a Server?

the problem I’m facing at the moment is very unique to me and I hope it may not be to you. Essentially, I am working on a React project built with CRA and it won’t/can’t be hosted on a server. The goal of the app is to read JSON files and conduct further processing of those files in the UI. However, since the app will be in a serverless/network-less environment, I’ll need to read and interpret these files in runtime.

These files will be subject to user configuration – meaning they will have access to the JSON files, have the ability to modify them, add or remove JSON files, and then expect to see the resulting output in the React app (index.html at that point). Since these files (and the amount of these files) are subject to change, I can not statically import them. Furthermore, since this app will be in a serverless environment, I can’t use the Fetch API either.

I’ve placed these files within the public/ folder outside the src/ folder – since these JSON files can be expected to change at any frequency for user-configuration needs, they can’t be part of the build process. Therefore, they can’t be inside the src folder.

So far, I’ve been able to access files with the dynamic import() function, with the following code in development-mode only:

myJson= await import(`/public/my-jsons/${fileName}`)

However, the following doesn’t work in a production build:

myJson= await import(`/my-jsons/${fileName}`)

In fact, I can’t even run an npm run build command because I get this error:

Module not found: Error: Can't resolve '/my-jsons'

I’m beginning to wonder if this is even possible. I believe it should be, but it’s just something that I am failing to understand regarding .tsconfig or webpack rules. I’ve asked ChatGPT for insight on my problem and this is what it has said:

JSON Files in public: Placing JSON files in public is fine for serving static assets and accessing them via HTTP requests.

Dynamic Imports: For dynamic imports, JSON files need to be in the src directory so that Webpack processes them as modules.

I’m not sure why webpack can’t just treat JSON files the same way it’d treat other static files? Especially if JSON is sometimes read/parsed in runtime (i.e. JSON.parse()).

Is this use-case actually impossible given the constraints? Am I misunderstanding anything regarding tsconfig.json or CRA? If it is possible, what steps can I take for this to fully work? Thanks in advance for your help and for your time 🙂 .

My project’s folder structure is like so:

my-project:
└───public
|     └───my-jsons
|         └───sample1.json
|         └───sample2.json
└───src
    └───components
etc.

When built, this is what it looks like:

build:
└───my-jsons
    └───sample1.json
    └───sample2.json
└───index.html
etc.

If it helps, these are the contents within my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
  },
  "include": ["src", "public"]
}