diff --git a/README.md b/README.md
index 9ab06ae..42f1671 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,9 @@
 
 >For more information, please refer to the React Router [documentation](https://reactrouter.com/en/main). Note that it follows the Remix file convention.
 
+>**Important**
+although react-router use names `loader`, `action`, `Component` these parts should exported from file as `clientLoader`, `clientAction`, `default`, see example below. use these name for future react-router releases.
+
 ## Install
 
 ```bash
@@ -117,12 +120,14 @@ export const caseSensitive = false
 
 export const id = 'main-page'
 
-export async function loader() {}
+// every `loader` should exported by name `clientLoader` from v2
+export async function clientLoader() {}
 
-export async function action() {}
+// every `action` should exported by name `clientAction` from v2
+export async function clientAction() {}
 
-// every component should exported without default with name `Component`
-export function Component() {
+// every component should exported as `default` no matter what is the name from v2
+export default function Component() {
   return <h1>Hello Remix Router!</h1>
 }
 
diff --git a/playground/app/root.tsx b/playground/app/root.tsx
index 10e881c..7879b23 100644
--- a/playground/app/root.tsx
+++ b/playground/app/root.tsx
@@ -3,7 +3,9 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+
+
+export default function Component() {
   return (
     <>
       <h1>test for first page</h1>
diff --git a/playground/app/routes/($lang).dashboard.lazy.tsx b/playground/app/routes/($lang).dashboard.lazy.tsx
index c08689b..7e9dc29 100644
--- a/playground/app/routes/($lang).dashboard.lazy.tsx
+++ b/playground/app/routes/($lang).dashboard.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>dashboard</h1>
 }
diff --git a/playground/app/routes/_auth.lazy.tsx b/playground/app/routes/_auth.lazy.tsx
index c6c6a35..b635129 100644
--- a/playground/app/routes/_auth.lazy.tsx
+++ b/playground/app/routes/_auth.lazy.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>hidden auth layout</h1>
diff --git a/playground/app/routes/_auth.login.tsx b/playground/app/routes/_auth.login.tsx
index 2a6be68..5e5431d 100644
--- a/playground/app/routes/_auth.login.tsx
+++ b/playground/app/routes/_auth.login.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   // sleep 2 seconds then return data
   await new Promise(resolve => setTimeout(resolve, 2000))
   return ['Note 1', 'Note 2', 'Note 3']
 }
 
-export function Component() {
+export default function Component() {
   const notes = useLoaderData() as string[]
 
   return (
diff --git a/playground/app/routes/_index.tsx b/playground/app/routes/_index.tsx
index f0a1fe5..6f6d871 100644
--- a/playground/app/routes/_index.tsx
+++ b/playground/app/routes/_index.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   return 'Vite + React'
 }
 
-export function Component() {
+export default function Component() {
   const [count, setCount] = useState(0)
   const data = useLoaderData() as string
 
diff --git a/playground/app/routes/auth.$.tsx b/playground/app/routes/auth.$.tsx
index 5f90b9c..4d78b0c 100644
--- a/playground/app/routes/auth.$.tsx
+++ b/playground/app/routes/auth.$.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Splat Route</h1>
 }
diff --git a/playground/app/routes/auth.$test.tsx b/playground/app/routes/auth.$test.tsx
index c9f0bce..553d71a 100644
--- a/playground/app/routes/auth.$test.tsx
+++ b/playground/app/routes/auth.$test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Dynamic Route</h1>
 }
diff --git a/playground/app/routes/auth.deploy.lazy.tsx b/playground/app/routes/auth.deploy.lazy.tsx
index 7335b1e..d2f308e 100644
--- a/playground/app/routes/auth.deploy.lazy.tsx
+++ b/playground/app/routes/auth.deploy.lazy.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>deploy</h1>
diff --git a/playground/app/routes/auth.deploy.test.lazy.tsx b/playground/app/routes/auth.deploy.test.lazy.tsx
index 16fc343..8316fd0 100644
--- a/playground/app/routes/auth.deploy.test.lazy.tsx
+++ b/playground/app/routes/auth.deploy.test.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>deploy test</h1>
 }
diff --git a/playground/app/routes/auth.forgot-pass.lazy.tsx b/playground/app/routes/auth.forgot-pass.lazy.tsx
index f6d6901..9f4bf19 100644
--- a/playground/app/routes/auth.forgot-pass.lazy.tsx
+++ b/playground/app/routes/auth.forgot-pass.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>forgot password</h1>
 }
diff --git a/playground/app/routes/auth.lazy.tsx b/playground/app/routes/auth.lazy.tsx
index 5c39ba8..54f7b15 100644
--- a/playground/app/routes/auth.lazy.tsx
+++ b/playground/app/routes/auth.lazy.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>auth layout</h1>
diff --git a/playground/app/routes/auth.new.without.parent.lazy.tsx b/playground/app/routes/auth.new.without.parent.lazy.tsx
index e57a447..5c21d6d 100644
--- a/playground/app/routes/auth.new.without.parent.lazy.tsx
+++ b/playground/app/routes/auth.new.without.parent.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>without parent</h1>
 }
diff --git a/playground/app/routes/auth.recover.test.lazy.tsx b/playground/app/routes/auth.recover.test.lazy.tsx
index 57b00ec..7922f5f 100644
--- a/playground/app/routes/auth.recover.test.lazy.tsx
+++ b/playground/app/routes/auth.recover.test.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>recover/test</h1>
 }
diff --git a/playground/app/routes/auth.recover/route.lazy.tsx b/playground/app/routes/auth.recover/route.lazy.tsx
index 7cb7968..bcefad5 100644
--- a/playground/app/routes/auth.recover/route.lazy.tsx
+++ b/playground/app/routes/auth.recover/route.lazy.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>recover</h1>
diff --git a/playground/app/routes/concerts.$.tsx b/playground/app/routes/concerts.$.tsx
index cff0a45..4340bf5 100644
--- a/playground/app/routes/concerts.$.tsx
+++ b/playground/app/routes/concerts.$.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Splat</h1>
 }
diff --git a/playground/app/routes/concerts.$city.tsx b/playground/app/routes/concerts.$city.tsx
index c2f2f47..9b4aab6 100644
--- a/playground/app/routes/concerts.$city.tsx
+++ b/playground/app/routes/concerts.$city.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 
-export async function loader() {
+export async function clientLoader() {
   return 'loader'
 }
 
-export async function action() {
+export async function clientAction() {
   return 'action'
 }
 
-export function Component() {
+export default function Component() {
   return <h1>Dynamic</h1>
 }
diff --git a/playground/app/routes/concerts._index.tsx b/playground/app/routes/concerts._index.tsx
index c083e2b..805c53f 100644
--- a/playground/app/routes/concerts._index.tsx
+++ b/playground/app/routes/concerts._index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>concerts index</h1>
 }
diff --git a/playground/app/routes/concerts.trending.tsx b/playground/app/routes/concerts.trending.tsx
index 2da032c..1dd8174 100644
--- a/playground/app/routes/concerts.trending.tsx
+++ b/playground/app/routes/concerts.trending.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>concerts trending</h1>
 }
diff --git a/playground/app/routes/concerts.tsx b/playground/app/routes/concerts.tsx
index 04bb448..f95e167 100644
--- a/playground/app/routes/concerts.tsx
+++ b/playground/app/routes/concerts.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>concerts layout</h1>
diff --git a/playground/app/routes/concerts_.mine.tsx b/playground/app/routes/concerts_.mine.tsx
index 4990147..6abb701 100644
--- a/playground/app/routes/concerts_.mine.tsx
+++ b/playground/app/routes/concerts_.mine.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>mine is out of concerts layout</h1>
 }
diff --git a/playground/app/routes/concerts_.your.tsx b/playground/app/routes/concerts_.your.tsx
index 24b667d..525422a 100644
--- a/playground/app/routes/concerts_.your.tsx
+++ b/playground/app/routes/concerts_.your.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>your is out of concerts layout</h1>
 }
diff --git a/playground/app/routes/notes.lazy.tsx b/playground/app/routes/notes.lazy.tsx
index 2a6be68..5e5431d 100644
--- a/playground/app/routes/notes.lazy.tsx
+++ b/playground/app/routes/notes.lazy.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   // sleep 2 seconds then return data
   await new Promise(resolve => setTimeout(resolve, 2000))
   return ['Note 1', 'Note 2', 'Note 3']
 }
 
-export function Component() {
+export default function Component() {
   const notes = useLoaderData() as string[]
 
   return (
diff --git a/src/index.ts b/src/index.ts
index e20d10c..59951f7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -55,12 +55,21 @@ export const unpluginFactory: UnpluginFactory<Options | undefined> = options =>
 
       const routesObject = JSON.stringify(routesMap)
         .replace(/"ImportStart/g, '() => import(')
-        .replace(/ImportEnd"/g, ')')
-        .replace(/"spread":"SpreadStart/g, '...')
-        .replace(/SpreadEnd"/g, '')
+        .replace(/ImportEnd"/g, ').then(moduleFactory)')
+        .replace(/"spread":"SpreadStart/g, '...moduleFactory(')
+        .replace(/SpreadEnd"/g, ')')
       // console.log(JSON.stringify(routesObject, null, 2))
 
-      const routesCode = `${imports}\nexport const routes = ${routesObject}`
+      const routesCode = `
+${imports}
+      
+function moduleFactory(module) {
+  const { default: Component, clientLoader: loader, actionLoader: action, loader: _loader, action: _action, Component: _Component, ...rest } = module;
+  return { Component, loader, action, ...rest };
+}
+
+export const routes = ${routesObject}
+`
       return routesCode
     }
   },
diff --git a/test/sub-routes/($lang).dashboard.lazy.tsx b/test/sub-routes/($lang).dashboard.lazy.tsx
index c08689b..7e9dc29 100644
--- a/test/sub-routes/($lang).dashboard.lazy.tsx
+++ b/test/sub-routes/($lang).dashboard.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>dashboard</h1>
 }
diff --git a/test/sub-routes/_auth.lazy.tsx b/test/sub-routes/_auth.lazy.tsx
index c6c6a35..b635129 100644
--- a/test/sub-routes/_auth.lazy.tsx
+++ b/test/sub-routes/_auth.lazy.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>hidden auth layout</h1>
diff --git a/test/sub-routes/_auth.login.tsx b/test/sub-routes/_auth.login.tsx
index 2a6be68..5e5431d 100644
--- a/test/sub-routes/_auth.login.tsx
+++ b/test/sub-routes/_auth.login.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   // sleep 2 seconds then return data
   await new Promise(resolve => setTimeout(resolve, 2000))
   return ['Note 1', 'Note 2', 'Note 3']
 }
 
-export function Component() {
+export default function Component() {
   const notes = useLoaderData() as string[]
 
   return (
diff --git a/test/sub-routes/_index.tsx b/test/sub-routes/_index.tsx
index f0a1fe5..6f6d871 100644
--- a/test/sub-routes/_index.tsx
+++ b/test/sub-routes/_index.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   return 'Vite + React'
 }
 
-export function Component() {
+export default function Component() {
   const [count, setCount] = useState(0)
   const data = useLoaderData() as string
 
diff --git a/test/sub-routes/auth.recover/route.lazy.tsx b/test/sub-routes/auth.recover/route.lazy.tsx
index 7cb7968..bcefad5 100644
--- a/test/sub-routes/auth.recover/route.lazy.tsx
+++ b/test/sub-routes/auth.recover/route.lazy.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>recover</h1>
diff --git a/test/toplevel-routes/($lang).dashboard.lazy.tsx b/test/toplevel-routes/($lang).dashboard.lazy.tsx
index c08689b..7e9dc29 100644
--- a/test/toplevel-routes/($lang).dashboard.lazy.tsx
+++ b/test/toplevel-routes/($lang).dashboard.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>dashboard</h1>
 }
diff --git a/test/toplevel-routes/_auth.lazy.tsx b/test/toplevel-routes/_auth.lazy.tsx
index c6c6a35..b635129 100644
--- a/test/toplevel-routes/_auth.lazy.tsx
+++ b/test/toplevel-routes/_auth.lazy.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>hidden auth layout</h1>
diff --git a/test/toplevel-routes/_auth.login.tsx b/test/toplevel-routes/_auth.login.tsx
index 2a6be68..5e5431d 100644
--- a/test/toplevel-routes/_auth.login.tsx
+++ b/test/toplevel-routes/_auth.login.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   // sleep 2 seconds then return data
   await new Promise(resolve => setTimeout(resolve, 2000))
   return ['Note 1', 'Note 2', 'Note 3']
 }
 
-export function Component() {
+export default function Component() {
   const notes = useLoaderData() as string[]
 
   return (
diff --git a/test/toplevel-routes/_index.tsx b/test/toplevel-routes/_index.tsx
index f0a1fe5..6f6d871 100644
--- a/test/toplevel-routes/_index.tsx
+++ b/test/toplevel-routes/_index.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   return 'Vite + React'
 }
 
-export function Component() {
+export default function Component() {
   const [count, setCount] = useState(0)
   const data = useLoaderData() as string
 
diff --git a/test/toplevel-routes/auth.$.tsx b/test/toplevel-routes/auth.$.tsx
index 5f90b9c..4d78b0c 100644
--- a/test/toplevel-routes/auth.$.tsx
+++ b/test/toplevel-routes/auth.$.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Splat Route</h1>
 }
diff --git a/test/toplevel-routes/auth.$test.tsx b/test/toplevel-routes/auth.$test.tsx
index c9f0bce..553d71a 100644
--- a/test/toplevel-routes/auth.$test.tsx
+++ b/test/toplevel-routes/auth.$test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Dynamic Route</h1>
 }
diff --git a/test/toplevel-routes/auth.deploy.lazy.tsx b/test/toplevel-routes/auth.deploy.lazy.tsx
index 7335b1e..d2f308e 100644
--- a/test/toplevel-routes/auth.deploy.lazy.tsx
+++ b/test/toplevel-routes/auth.deploy.lazy.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>deploy</h1>
diff --git a/test/toplevel-routes/auth.deploy.test.lazy.tsx b/test/toplevel-routes/auth.deploy.test.lazy.tsx
index 16fc343..8316fd0 100644
--- a/test/toplevel-routes/auth.deploy.test.lazy.tsx
+++ b/test/toplevel-routes/auth.deploy.test.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>deploy test</h1>
 }
diff --git a/test/toplevel-routes/auth.forgot-pass.lazy.tsx b/test/toplevel-routes/auth.forgot-pass.lazy.tsx
index f6d6901..9f4bf19 100644
--- a/test/toplevel-routes/auth.forgot-pass.lazy.tsx
+++ b/test/toplevel-routes/auth.forgot-pass.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>forgot password</h1>
 }
diff --git a/test/toplevel-routes/auth.lazy.tsx b/test/toplevel-routes/auth.lazy.tsx
index 5c39ba8..54f7b15 100644
--- a/test/toplevel-routes/auth.lazy.tsx
+++ b/test/toplevel-routes/auth.lazy.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>auth layout</h1>
diff --git a/test/toplevel-routes/auth.new.without.parent.lazy.tsx b/test/toplevel-routes/auth.new.without.parent.lazy.tsx
index e57a447..5c21d6d 100644
--- a/test/toplevel-routes/auth.new.without.parent.lazy.tsx
+++ b/test/toplevel-routes/auth.new.without.parent.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>without parent</h1>
 }
diff --git a/test/toplevel-routes/auth.recover.test.lazy.tsx b/test/toplevel-routes/auth.recover.test.lazy.tsx
index 57b00ec..7922f5f 100644
--- a/test/toplevel-routes/auth.recover.test.lazy.tsx
+++ b/test/toplevel-routes/auth.recover.test.lazy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>recover/test</h1>
 }
diff --git a/test/toplevel-routes/concerts.$.tsx b/test/toplevel-routes/concerts.$.tsx
index cff0a45..4340bf5 100644
--- a/test/toplevel-routes/concerts.$.tsx
+++ b/test/toplevel-routes/concerts.$.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>Splat</h1>
 }
diff --git a/test/toplevel-routes/concerts.$city.tsx b/test/toplevel-routes/concerts.$city.tsx
index c2f2f47..9b4aab6 100644
--- a/test/toplevel-routes/concerts.$city.tsx
+++ b/test/toplevel-routes/concerts.$city.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 
-export async function loader() {
+export async function clientLoader() {
   return 'loader'
 }
 
-export async function action() {
+export async function clientAction() {
   return 'action'
 }
 
-export function Component() {
+export default function Component() {
   return <h1>Dynamic</h1>
 }
diff --git a/test/toplevel-routes/concerts._index.tsx b/test/toplevel-routes/concerts._index.tsx
index c083e2b..805c53f 100644
--- a/test/toplevel-routes/concerts._index.tsx
+++ b/test/toplevel-routes/concerts._index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>concerts index</h1>
 }
diff --git a/test/toplevel-routes/concerts.trending.tsx b/test/toplevel-routes/concerts.trending.tsx
index 2da032c..1dd8174 100644
--- a/test/toplevel-routes/concerts.trending.tsx
+++ b/test/toplevel-routes/concerts.trending.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>concerts trending</h1>
 }
diff --git a/test/toplevel-routes/concerts.tsx b/test/toplevel-routes/concerts.tsx
index 04bb448..f95e167 100644
--- a/test/toplevel-routes/concerts.tsx
+++ b/test/toplevel-routes/concerts.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
-export function Component() {
+export default function Component() {
   return (
     <>
       <h1>concerts layout</h1>
diff --git a/test/toplevel-routes/concerts_.mine.tsx b/test/toplevel-routes/concerts_.mine.tsx
index 4990147..6abb701 100644
--- a/test/toplevel-routes/concerts_.mine.tsx
+++ b/test/toplevel-routes/concerts_.mine.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>mine is out of concerts layout</h1>
 }
diff --git a/test/toplevel-routes/concerts_.your.tsx b/test/toplevel-routes/concerts_.your.tsx
index 24b667d..525422a 100644
--- a/test/toplevel-routes/concerts_.your.tsx
+++ b/test/toplevel-routes/concerts_.your.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export function Component() {
+export default function Component() {
   return <h1>your is out of concerts layout</h1>
 }
diff --git a/test/toplevel-routes/notes.lazy.tsx b/test/toplevel-routes/notes.lazy.tsx
index 2a6be68..5e5431d 100644
--- a/test/toplevel-routes/notes.lazy.tsx
+++ b/test/toplevel-routes/notes.lazy.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { useLoaderData } from 'react-router-dom'
 
-export async function loader() {
+export async function clientLoader() {
   // sleep 2 seconds then return data
   await new Promise(resolve => setTimeout(resolve, 2000))
   return ['Note 1', 'Note 2', 'Note 3']
 }
 
-export function Component() {
+export default function Component() {
   const notes = useLoaderData() as string[]
 
   return (