Add dynamic import.

app/json/bar.json

@@ -0,0 +1,3 @@
+{
+    "one": "two"
+}

app/json/foo.json

@@ -0,0 +1,3 @@
+{
+    "hello": "world"
+}

app/routes/$.tsx

@@ -0,0 +1,16 @@
+import { LoaderArgs } from "@remix-run/node"
+
+export const loader = async (loaderInput: LoaderArgs) => {
+
+    const pathname = loaderInput.params["*"];
+    const result = await import(`../app/json/${pathname}.json`); 
+
+
+    return result;
+}
+
+export default function () {
+
+
+    return <div>Whatever</div>
+}

app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import type { V2_MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, V2_MetaFunction } from "@remix-run/node";
 
 export const meta: V2_MetaFunction = () => {
   return [
@@ -7,6 +7,10 @@ export const meta: V2_MetaFunction = () => {
   ];
 };
 
+export  const loader : LoaderFunction = async (args) => {
+  return null;
+}
+
 export default function Index() {
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>

tsconfig.json

@@ -8,6 +8,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "target": "ES2019",
+    "module": "ESNext",
     "strict": true,
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,