diff --git a/src/routes/solid-router/getting-started/config.mdx b/src/routes/solid-router/getting-started/config.mdx
index 543ddbee7..08ff88cec 100644
--- a/src/routes/solid-router/getting-started/config.mdx
+++ b/src/routes/solid-router/getting-started/config.mdx
@@ -7,12 +7,13 @@ Solid Router allows for configuration-based routing, where JSX is not needed to
 To define a single route, a route definition object can be passed to the [`<Router>`](/solid-router/reference/components/router) component:
 
 ```jsx
+import { lazy } from "solid-js";
 import { render } from "solid-js/web";
 import { Router } from "@solidjs/router";
 
 const routes = {
     path: "/",
-    component: import("/routes/index.js"),
+    component: lazy(() => import("/routes/index.js")),
 }
 
 
@@ -24,21 +25,22 @@ In the route definition object, a `path` property must be provided to define the
 To define multiple routes, an array of route definition objects can be passed to the `<Router>`] component:
 
 ```jsx
+import { lazy } from "solid-js";
 import { render } from "solid-js/web";
 import { Router } from "@solidjs/router";
 
 const routes = [
     {
         path: "/",
-        component: import("/routes/index.js"),
+        component: lazy(() => import("/routes/index.js")),
     },
     {
         path: "/hello-world",
-        component: <h1>Hello, World!</h1>
+        component: () => <h1>Hello, World!</h1>
     },
     {
         path: "/about",
-        component: import("/routes/about.js"),
+        component: lazy(() => import("/routes/about.js")),
     }
 ]
 
@@ -50,7 +52,7 @@ Each path in the array of route definition objects will be matched against the c
 In the example above, the root path (`/`) renders the `Home` page, the path `/hello-world` renders an `h1` element, and the path `/about` renders the `About` component.
 
 <Callout title="Lazy Loading">
-While not necessary, when using configuration-based routing, it is best practice to use the [`lazy`](/reference/component-apis/lazy) component to load components asynchronously. 
+When using configuration-based routing, it is best practice to use the [`lazy`](/reference/component-apis/lazy) component to load components asynchronously. 
 This will help improve the performance of your application by only loading the components when they are needed.
 
 ```jsx
@@ -65,7 +67,7 @@ const routes = [
     },
     {
         path: "/hello-world",
-        component: <h1>Hello, World!</h1>
+        component: () => <h1>Hello, World!</h1>
     },
     {
         path: "/about",