Error: Snapshot `code router in typescript on npm 1` mismatched - Expected + Received @@ -10,11 +10,11 @@ "/src/App.tsx": "import logo from './logo.svg'\n\nfunction App() {\n return (\n <main class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] text-center\">\n <img\n src={logo}\n class=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n alt=\"logo\"\n />\n <p>\n Edit <code>src/App.tsx</code> and save to reload.\n </p>\n <a\n class=\"text-[#61dafb] hover:underline\"\n href=\"https://solidjs.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn Solid\n </a>\n <a\n class=\"text-[#61dafb] hover:underline\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </main>\n )\n}\n\nexport default App\n", "/src/main.tsx": "import {\n Outlet,\n RouterProvider,\n createRootRoute,\n createRoute,\n createRouter,\n} from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\nimport { render } from 'solid-js/web'\n\nimport './styles.css'\n\nimport App from './App.tsx'\n\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/',\n component: App,\n})\n\nconst routeTree = rootRoute.addChildren([indexRoute])\n\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n scrollRestoration: true,\n})\n\ndeclare module '@tanstack/solid-router' {\n interface Register {\n router: typeof router\n }\n}\n\nfunction MainApp() {\n return (\n <>\n <RouterProvider router={router} />\n </>\n )\n}\n\nconst rootElement = document.getElementById('app')\nif (rootElement) {\n render(() => <MainApp />, rootElement)\n}\n", "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.tsx` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/file-based-routing) guide.\n\n### Adding A Route\n\nTo add a new route to your application just add another `createRoute` call to the `./src/main.tsx` file. The example below adds a new `/about`route to the root route.\n\n```tsx\nconst aboutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: \"/about\",\n component: () => <h1>About</h1>,\n});\n```\n\nYou will also need to add the route to the `routeTree` in the `./src/main.tsx` file.\n\n```tsx\nconst routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);\n```\n\nWith this set up you should be able to navigate to `/about` and see the about page.\n\nOf course you don't need to implement the About page in the `main.tsx` file. You can create that component in another file and import it into the `main.tsx` file, then use it in the `component` property of the `createRoute` cal

Error: Snapshot `code router in javascript on npm 1` mismatched - Expected + Received @@ -10,11 +10,11 @@ "/src/App.jsx": "import logo from './logo.svg'\n\nfunction App() {\n return (\n <main class=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] text-center\">\n <img\n src={logo}\n class=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n alt=\"logo\"\n />\n <p>\n Edit <code>src/App.jsx</code> and save to reload.\n </p>\n <a\n class=\"text-[#61dafb] hover:underline\"\n href=\"https://solidjs.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn Solid\n </a>\n <a\n class=\"text-[#61dafb] hover:underline\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </main>\n )\n}\n\nexport default App\n", "/src/main.jsx": "import {\n Outlet,\n RouterProvider,\n createRootRoute,\n createRoute,\n createRouter,\n} from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\nimport { render } from 'solid-js/web'\n\nimport './styles.css'\n\nimport App from './App.jsx'\n\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/',\n component: App,\n})\n\nconst routeTree = rootRoute.addChildren([indexRoute])\n\nconst router = createRouter({\n routeTree,\n defaultPreload: 'intent',\n scrollRestoration: true,\n})\n\nfunction MainApp() {\n return (\n <>\n <RouterProvider router={router} />\n </>\n )\n}\n\nconst rootElement = document.getElementById('app')\nif (rootElement) {\n render(() => <MainApp />, rootElement)\n}\n", "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.jsx` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/solid/guide/file-based-routing) guide.\n\n### Adding A Route\n\nTo add a new route to your application just add another `createRoute` call to the `./src/main.jsx` file. The example below adds a new `/about`route to the root route.\n\n```tsx\nconst aboutRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: \"/about\",\n component: () => <h1>About</h1>,\n});\n```\n\nYou will also need to add the route to the `routeTree` in the `./src/main.jsx` file.\n\n```tsx\nconst routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);\n```\n\nWith this set up you should be able to navigate to `/about` and see the about page.\n\nOf course you don't need to implement the About page in the `main.jsx` file. You can create that component in another file and import it into the `main.jsx` file, then use it in the `component` property of the `createRoute` call, like so:\n\n```tsx\nimport About from \"./components/About.jsx\";\n\nconst aboutRoute = createRoute({

Error: Snapshot `file router with add-on start on npm 2` mismatched - Expected + Received @@ -21,11 +21,11 @@ "/src/routes/demo/start.ssr.spa-mode.tsx": "import { useEffect, useState } from 'react'\nimport { createFileRoute } from '@tanstack/react-router'\nimport { getPunkSongs } from '@/data/demo.punk-songs'\n\nexport const Route = createFileRoute('/demo/start/ssr/spa-mode')({\n ssr: false,\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const [punkSongs, setPunkSongs] = useState<\n Awaited<ReturnType<typeof getPunkSongs>>\n >([])\n\n useEffect(() => {\n getPunkSongs().then(setPunkSongs)\n }, [])\n\n return (\n <div\n className=\"flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white\"\n style={{\n backgroundImage:\n 'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',\n }}\n >\n <div className=\"w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10\">\n <h1 className=\"text-3xl font-bold mb-6 text-green-400\">\n SPA Mode - Punk Songs\n </h1>\n <ul className=\"space-y-3\">\n {punkSongs.map((song) => (\n <li\n key={song.id}\n className=\"bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md\"\n >\n <span className=\"text-lg text-white font-medium\">\n {song.name}\n </span>\n <span className=\"text-white/60\"> - {song.artist}</span>\n </li>\n ))}\n </ul>\n </div>\n </div>\n )\n}\n", "/src/routes/demo/tanstack-query.tsx": "import { useCallback, useState } from 'react'\nimport { createFileRoute } from '@tanstack/react-router'\nimport { useQuery, useMutation } from '@tanstack/react-query'\n\nexport const Route = createFileRoute('/demo/tanstack-query')({\n component: TanStackQueryDemo,\n})\n\ntype Todo = {\n id: number\n name: string\n}\n\nfunction TanStackQueryDemo() {\n const { data, refetch } = useQuery<Todo[]>({\n queryKey: ['todos'],\n queryFn: () => fetch('/demo/api/tq-todos').then((res) => res.json()),\n initialData: [],\n })\n\n const { mutate: addTodo } = useMutation({\n mutationFn: (todo: string) =>\n fetch('/demo/api/tq-todos', {\n method: 'POST',\n body: JSON.stringify(todo),\n }).then((res) => res.json()),\n onSuccess: () => refetch(),\n })\n\n const [todo, setTodo] = useState('')\n\n const submitTodo = useCallback(async () => {\n await addTodo(todo)\n setTodo('')\n }, [addTodo, todo])\n\n return (\n <div\n className=\"flex items-center justify-center min-h-screen bg-gradient-to-br from-red-900 via-red-800 to-black p-4 text-white\"\n style={{\n backgroundImage:\n 'radial-gradient(50% 50% at 80% 20%, #3B021F 0%, #7B1028 60%, #1A000A 100%)',\n }}\n >\n <div className=\"w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10\">\n <h1 className=\"text-2xl mb-4\">TanStack Query Todos list</h1>\n <ul className=\"mb-4 space-y-2\">\n {data?.map((t) => (\n <li\n key={t.id}\n className=\"bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md\"\n >\n <span className=\"text-lg text-white\">{t.name}</span>\n </li>\n ))}\n </ul>\n <div className=\"flex flex-col gap-2\">\n <input\n type=\"text\"\n value={todo}\n onChange={(e) => setTodo(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n submitTodo()\n }\n }}\n placeholder=\"Enter a new todo...\"\n className=\"w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400

Error: Snapshot `file router with add-on start on npm 1` mismatched - Expected + Received @@ -17,11 +17,11 @@ "/src/routes/demo/start.ssr.index.tsx": "import { createFileRoute, Link } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/demo/start/ssr/')({\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n return (\n <div\n className=\"flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-900 to-black p-4 text-white\"\n style={{\n backgroundImage:\n 'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',\n }}\n >\n <div className=\"w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10\">\n <h1 className=\"text-4xl font-bold mb-8 text-center bg-gradient-to-r from-pink-500 via-purple-500 to-green-400 bg-clip-text text-transparent\">\n SSR Demos\n </h1>\n <div className=\"flex flex-col gap-4\">\n <Link\n to=\"/demo/start/ssr/spa-mode\"\n className=\"text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-pink-600 to-pink-500 hover:from-pink-700 hover:to-pink-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-pink-500/50 border-2 border-pink-400\"\n >\n SPA Mode\n </Link>\n <Link\n to=\"/demo/start/ssr/full-ssr\"\n className=\"text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-purple-500/50 border-2 border-purple-400\"\n >\n Full SSR\n </Link>\n <Link\n to=\"/demo/start/ssr/data-only\"\n className=\"text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-green-500/50 border-2 border-green-400\"\n >\n Data Only\n </Link>\n </div>\n </div>\n </div>\n )\n}\n", "/src/routes/demo/start.ssr.spa-mode.tsx": "import { useEffect, useState } from 'react'\nimport { createFileRoute } from '@tanstack/react-router'\nimport { getPunkSongs } from '@/data/demo.punk-songs'\n\nexport const Route = createFileRoute('/demo/start/ssr/spa-mode')({\n ssr: false,\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const [punkSongs, setPunkSongs] = useState<\n Awaited<ReturnType<typeof getPunkSongs>>\n >([])\n\n useEffect(() => {\n getPunkSongs().then(setPunkSongs)\n }, [])\n\n return (\n <div\n className=\"flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white\"\n style={{\n backgroundImage:\n 'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',\n }}\n >\n <div className=\"w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10\">\n <h1 className=\"text-3xl font-bold mb-6 text-green-400\">\n SPA Mode - Punk Songs\n </h1>\n <ul className=\"space-y-3\">\n {punkSongs.map((song) => (\n <li\n key={song.id}\n className=\"bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md\"\n >\n <span className=\"text-lg text-white font-medium\">\n {song.name}\n </span>\n <span className=\"text-white/60\"> - {song.artist}</span>\n </li>\n ))}\n </ul>\n </div>\n </div>\n )\n}\n", "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport {\n Zap,\n Server,\n Route as RouteIcon,\n Shield,\n Waves,\n Sparkles,\n} from 'lucide-react'\n\nexport const Route = createFileRoute('/')({ component: App })\n\

Error: Snapshot `file router with tailwind on npm 1` mismatched - Expected + Received @@ -10,11 +10,11 @@ "/src/routes/__root.tsx": "import { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'\nimport { TanStackDevtools } from '@tanstack/react-devtools'\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <TanStackDevtools\n config={{\n position: 'bottom-right',\n }}\n plugins={[\n {\n name: 'Tanstack Router',\n render: <TanStackRouterDevtoolsPanel />,\n },\n ]}\n />\n </>\n ),\n})\n", "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport logo from '../logo.svg'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n <div className=\"text-center\">\n <header className=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]\">\n <img\n src={logo}\n className=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n alt=\"logo\"\n />\n <p>\n Edit <code>src/routes/index.tsx</code> and save to reload.\n </p>\n <a\n className=\"text-[#61dafb] hover:underline\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"text-[#61dafb] hover:underline\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n", "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpm run test\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.\n\n```tsx\nimport { Link } from \"@tanstack/react-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an

Error: Snapshot `file router on npm with biome 1` mismatched - Expected + Received @@ -13,11 +13,11 @@ "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport logo from '../logo.svg'\nimport '../App.css'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>\n Edit <code>src/routes/index.tsx</code> and save to reload.\n </p>\n <a\n className=\"App-link\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"App-link\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n", "/src/styles.css": "\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpm run test\n```\n\n## Styling\n\nThis project uses CSS for styling.\n\n\n## Linting & Formatting\n\nThis project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:\n\n\n```bash\nnpm run lint\nnpm run format\nnpm run check\n```\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.\n\n```tsx\nimport { Link } from \"@tanstack/react-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport { Link } from \"@tanstack/react-router\";\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <header>\n <nav>\n <Link to=\"/\">Home</Link>\n <Link to=\"/about\">About</Link>\n </nav>\n </header>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts c

Error: Snapshot `file router on npm 1` mismatched - Expected + Received @@ -11,11 +11,11 @@ "/src/routes/__root.tsx": "import { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'\nimport { TanStackDevtools } from '@tanstack/react-devtools'\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <TanStackDevtools\n config={{\n position: 'bottom-right',\n }}\n plugins={[\n {\n name: 'Tanstack Router',\n render: <TanStackRouterDevtoolsPanel />,\n },\n ]}\n />\n </>\n ),\n})\n", "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport logo from '../logo.svg'\nimport '../App.css'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>\n Edit <code>src/routes/index.tsx</code> and save to reload.\n </p>\n <a\n className=\"App-link\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"App-link\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n", "/src/styles.css": "\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpm run test\n```\n\n## Styling\n\nThis project uses CSS for styling.\n\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.\n\n```tsx\nimport { Link } from \"@tanstack/react-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport { Link } from \"@tanstack/react-router\";\n\nexport const Route = createRootRoute({\n component: ()

Error: Snapshot `code router in typescript on npm 1` mismatched - Expected + Received @@ -11,11 +11,11 @@ "/src/routes/__root.tsx": "import { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'\nimport { TanStackDevtools } from '@tanstack/react-devtools'\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <TanStackDevtools\n config={{\n position: 'bottom-right',\n }}\n plugins={[\n {\n name: 'Tanstack Router',\n render: <TanStackRouterDevtoolsPanel />,\n },\n ]}\n />\n </>\n ),\n})\n", "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport logo from '../logo.svg'\nimport '../App.css'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>\n Edit <code>src/routes/index.tsx</code> and save to reload.\n </p>\n <a\n className=\"App-link\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"App-link\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n", "/src/styles.css": "\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpm run test\n```\n\n## Styling\n\nThis project uses CSS for styling.\n\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.\n\n```tsx\nimport { Link } from \"@tanstack/react-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport { Link } from \"@tanstack/react-router\";\n\nexport const Route = createRootRoute({\n

Error: Snapshot `code router with form add-on on npm 1` mismatched - Expected + Received @@ -17,11 +17,11 @@ "/src/routes/demo/form.simple.jsx": "import { createFileRoute } from '@tanstack/react-router'\nimport { z } from 'zod'\n\nimport { useAppForm } from '@/hooks/demo.form'\n\nexport const Route = createFileRoute('/demo/form')({\n component: SimpleForm,\n})\n\nconst schema = z.object({\n title: z.string().min(1, 'Title is required'),\n description: z.string().min(1, 'Description is required'),\n})\n\nfunction SimpleForm() {\n const form = useAppForm({\n defaultValues: {\n title: '',\n description: '',\n },\n validators: {\n onBlur: schema,\n },\n onSubmit: ({ value }) => {\n console.log(value)\n // Show success message\n alert('Form submitted successfully!')\n },\n })\n\n return (\n <div\n className=\"flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white\"\n style={{\n backgroundImage:\n 'radial-gradient(50% 50% at 5% 40%, #add8e6 0%, #0000ff 70%, #00008b 100%)',\n }}\n >\n <div className=\"w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10\">\n <form\n onSubmit={(e) => {\n e.preventDefault()\n e.stopPropagation()\n form.handleSubmit()\n }}\n className=\"space-y-6\"\n >\n <form.AppField name=\"title\">\n {(field) => <field.TextField label=\"Title\" />}\n </form.AppField>\n\n <form.AppField name=\"description\">\n {(field) => <field.TextArea label=\"Description\" />}\n </form.AppField>\n\n <div className=\"flex justify-end\">\n <form.AppForm>\n <form.SubscribeButton label=\"Submit\" />\n </form.AppForm>\n </div>\n </form>\n </div>\n </div>\n )\n}\n", "/src/routes/index.jsx": "import { createFileRoute } from '@tanstack/react-router'\nimport logo from '../logo.svg'\nimport '../App.css'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>\n Edit <code>src/routes/index.tsx</code> and save to reload.\n </p>\n <a\n className=\"App-link\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"App-link\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n", "/src/styles.css": "\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpm run test\n```\n\n## Styling\n\nThis project uses CSS for styling.\n\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n