diff --git a/examples/with-loader/src/docs/test.json b/examples/with-loader/src/docs/test.json
new file mode 100644
index 0000000..6df3039
--- /dev/null
+++ b/examples/with-loader/src/docs/test.json
@@ -0,0 +1,3 @@
+{
+  "key": "THIS IS A TEST JSON"
+}
diff --git a/examples/with-loader/src/main.tsx b/examples/with-loader/src/main.tsx
index 6211f86..862ecd1 100644
--- a/examples/with-loader/src/main.tsx
+++ b/examples/with-loader/src/main.tsx
@@ -13,6 +13,10 @@ const routes: RouteRecord[] = [
     path: '/docs/:docs',
     lazy: () => import('./pages/[docs]'),
   },
+  {
+    path: '/json',
+    lazy: () => import('./pages/json'),
+  },
 ]
 
 const routesWithLayout = [{
diff --git a/examples/with-loader/src/pages/json.tsx b/examples/with-loader/src/pages/json.tsx
new file mode 100644
index 0000000..f499602
--- /dev/null
+++ b/examples/with-loader/src/pages/json.tsx
@@ -0,0 +1,20 @@
+import { useLoaderData } from 'react-router-dom'
+
+export default function Docs() {
+  const json = useLoaderData() as typeof import('../docs/test.json')
+
+  return (
+    <div>{json.key}</div>
+  )
+}
+
+export const Component = Docs
+
+export const entry = 'src/pages/json.tsx'
+
+export async function loader() {
+  // If you use `import('../docs/test.json?raw')`, it will return a JSON string.
+  const json = (await import('../docs/test.json')).default
+
+  return json
+}