Error on npm start #3

[alexyablontsev]

I have the same issue as was described in the previous 2 cases here. I followed all instructions from #2 but I'm still not able to run the app ☹️ Any ideas on how to fix it?

[lucasm08]

Here are my changes @alexyablontsev

package.json

 },
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
+    "@sveltejs/kit": "^1.0.0-next.221",
     "@types/cookie": "^0.4.1",
     "@types/lodash": "^4.14.177",
     "@typescript-eslint/eslint-plugin": "^4.31.1",

src/routes/dog-facts/index.svelte

<script context="module" lang="ts">
   import type { Load } from '@sveltejs/kit';

-  export const load: Load = async ({ page }) => {
-    const numberOfFacts = +page.query.get('amount') || 3;
+  export const load: Load = async ({ params }) => {
+    const numberOfFacts = +params.amount || 3;

     return {
       props: { numberOfFacts },

src/routes/pokemon-search/__layout.svelte

@@ -1,9 +1,8 @@
 <script context="module" lang="ts">
   import type { Load } from '@sveltejs/kit';

-  export const load: Load = async ({ page }) => {
-    const { query } = page;
-    const searchTerm = query.get('name') || '';
+  export const load: Load = async ({ params, url }) => {
+    const searchTerm = params.name || '';

     return {
       props: { searchTerm },
@@ -50,7 +49,8 @@
       if (searchTerm) {
         results = searchFor(searchTerm);
         const search = new URLSearchParams({ name: searchTerm });
-        if (browser) goto(`${$page.path}?${search}`, { replaceState: true, keepfocus: true });
+        if (browser)
+          goto(`${$page.url.pathname}?${search}`, { replaceState: true, keepfocus: true });
       }
     }, 300);
   };

src/routes/__layout.svelte

@@ -13,10 +13,10 @@
   ];

   $: {
-    const { path } = $page;
+    const { pathname } = $page.url;
     applications = applications.map((application) => ({
       ...application,
-      active: path.startsWith(application.path),
+      active: pathname.startsWith(application.path),
     }));
   }
 </script>

src/routes/echo-chamber/__layout.svelte

@@ -55,12 +55,12 @@
       <a
         href="/echo-chamber/sign-in"
         data-test="sign-in"
-        class:active={$page.path.endsWith('sign-in')}>Sign In</a
+        class:active={$page.url.pathname.endsWith('sign-in')}>Sign In</a
       >
       <a
         href="/echo-chamber/sign-up"
         data-test="sign-up"
-        class:active={$page.path.endsWith('sign-up')}>Sign Up</a
+        class:active={$page.url.pathname.endsWith('sign-up')}>Sign Up</a
       >
     </div>
   {/if}

src/routes/pokemon-search/[id].svelte

@@ -1,8 +1,7 @@
 <script context="module" lang="ts">
   import type { Load } from '@sveltejs/kit';

-  export const load: Load = async ({ fetch, page }) => {
-    const { params } = page;
+  export const load: Load = async ({ fetch, params }) => {
     const endpoint = '/pokemon-search/api/' + params.id;
     const response = await fetch(endpoint);

src/routes/pokemon-search/api/index.ts

@@ -2,10 +2,10 @@ import type { RequestHandler } from '@sveltejs/kit';
 import data from './pokemon.json';

 export const get: RequestHandler = async (request) => {
-  const { query } = request;
-  const name = query.get('name')?.toLowerCase();
+  const { searchParams } = request.url;
+  const name = searchParams.get('name')?.toLowerCase();

-  let pokemon = data.filter((p) => p.name?.toLowerCase()?.startsWith(name));
+  const pokemon = data.filter((p) => p.name?.toLowerCase()?.startsWith(name));

   return {
     body: {

src/routes/dog-facts/api.ts

@@ -9,8 +9,8 @@ const shuffle = <T>(data: T[]): T[] => {
 };

 export const get: RequestHandler = async (request) => {
-  const { query } = request;
-  const amount = query.get('amount')?.toLowerCase();
+  const { searchParams } = request.url;
+  const amount = searchParams.get('amount')?.toLowerCase();

   const facts: DogFact[] = shuffle(data).slice(0, +amount);

This what I found so far. I'll add more as I'm digging through the code.

[alexyablontsev]

Thank you so much @lucasm08! I was able to start the app at last - now most of it works with the exception of 'Secret menu' and 'Echo chamber' pages. But at least it's something. Thank you again!

[kerbear25]

@stevekinney @alexyablontsev @lucasm08 I'm also receiving an error on npm start:

file:////Desktop/cypress/node_modules/@sveltejs/kit/dist/cli.js:1072
                    } else if (allow?.length && cwd) {
                                     ^

SyntaxError: Unexpected token '.'

[i3rigita]

I also changed echo-chamber/sign-in.svelte and echo-chamber/sign-up.svelte

export async function load({ session, params}) {
const error = params.error

[simajzenman]

Hey Guys, I don't know if it's your case but my issue was to use yarn instead of npm to set up the project. I tried with npm and it worked well. Hope it will help

[kerbear25]

Hi Steve, do you have any updates to resolve this @stevekinney?

[pzubar]

Hello everyone! I have an easier (that does not require the changes to the codebase) solution for this trouble. We can just "freeze" the "@sveltejs/kit" version to the one that worked when this app was created.

[stevekinney]

Hey friends. Sorry I missed this. I did just merge in #5 from @pzubar, which should fix the issue!

[nkapolcs]

@stevekinney @alexyablontsev @lucasm08 I'm also receiving an error on npm start:

file:////Desktop/cypress/node_modules/@sveltejs/kit/dist/cli.js:1072
                  } else if (allow?.length && cwd) {
                                   ^

SyntaxError: Unexpected token '.'

That is a nodejs version problem, please try node 14 or up.