search

sveltejs / kit

web development, streamlined
https://kit.svelte.dev
MIT License
18.61k stars 1.92k forks source link

@sveltejs/kit@1.0.0-next.132 causing JSON.parse error on load() #1963

Closed tsukhu closed 3 years ago

tsukhu commented 3 years ago

Describe the bug

Version @sveltejs/kit@1.0.0-next.132 is causing load() related issues .

This function was working fine for async load till this new version.

export async function load({ fetch }) {
        let dataGeo;
        const urls = [
            'https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson'
        ];
        const getFetchResults = async (url, type) => {
            let result;
            let headers =
                type === 'json'
                    ? { 'content-type': 'application/json' }
                    : { 'content-type': 'text/csv;charset=UTF-8' };
            try {
                const data = await fetch(url, headers);
                result = type === 'json' ? await data.json() : await data.text();
            } catch (e) {
                console.log(e);
            }
            return result;
        };
        dataGeo = await getFetchResults(urls[0], 'json');
        return {
            props: {
                result: {
                    dataGeo
                }
            }
        };
    }

On execution this gives the following error on the server side

[0] 12:34:03 PM [vite] ✨ dependencies updated, reloading page...
[0] SyntaxError: Unexpected token < in JSON at position 0
[0]     at JSON.parse (<anonymous>)
[0]     at Proxy.<anonymous> (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:829:22)
[0]     at async getFetchResults (C:\workspace\sveltekit-demo\src\routes\worldmap.svelte:38:31)
[0]     at async load (C:\workspace\sveltekit-demo\src\routes\worldmap.svelte:46:12)
[0]     at async load_node (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:857:12)
[0]     at async respond$1 (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1078:15)
[0]     at async render_page (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1225:20)
[0]     at async resolve (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1580:10)
[0]     at async Object.handle (/C:/workspace/sveltekit-demo/src/hooks.ts:13:20)
[0]     at async respond (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1553:10)

Reproduction

  1. Use project https://github.com/tsukhu/sveltekit-demo
  2. Select the issue branch. The only change from the main branch is that it has the new version of sveltekit 1.0.0-next.132 (main branch uses 1.0.0-next.131)
  3. install npm i
  4. run in dev mode npm run dev
  5. Go to the page http://localhost:3000/worldmap . This will generate the error on the server side.

If you follow the same steps on the main branch of the project it works fine and is also deployed on vercel https://sveltekit-demo-psi.vercel.app/

Logs

[0] 12:34:03 PM [vite] new dependencies found: @firebase/app, @firebase/auth, updating...
[0] 12:34:03 PM [vite] ✨ dependencies updated, reloading page...
[0] SyntaxError: Unexpected token < in JSON at position 0
[0]     at JSON.parse (<anonymous>)
[0]     at Proxy.<anonymous> (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:829:22)
[0]     at async getFetchResults (C:\workspace\sveltekit-demo\src\routes\worldmap.svelte:38:31)
[0]     at async load (C:\workspace\sveltekit-demo\src\routes\worldmap.svelte:46:12)
[0]     at async load_node (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:857:12)
[0]     at async respond$1 (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1078:15)
[0]     at async render_page (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1225:20)
[0]     at async resolve (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1580:10)
[0]     at async Object.handle (/C:/workspace/sveltekit-demo/src/hooks.ts:13:20)
[0]     at async respond (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1553:10)
[0] 12:34:38 PM [vite] new dependencies found: @lukeed/uuid, updating...
[0] 12:34:38 PM [vite] ✨ dependencies updated, reloading page...
[0] SyntaxError: Unexpected token < in JSON at position 0
[0]     at JSON.parse (<anonymous>)
[0]     at Proxy.<anonymous> (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:829:22)
[0]     at async getFetchResults (C:\workspace\sveltekit-demo\src\routes\worldmap.svelte:38:31)
[0]     at async load (C:\workspace\sveltekit-demo\src\routes\worldmap.svelte:46:12)
[0]     at async load_node (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:857:12)
[0]     at async respond$1 (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1078:15)
[0]     at async render_page (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1225:20)
[0]     at async resolve (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1580:10)
[0]     at async Object.handle (/C:/workspace/sveltekit-demo/src/hooks.ts:13:20)
[0]     at async respond (file:///C:/workspace/sveltekit-demo/node_modules/@sveltejs/kit/dist/ssr.js:1553:10)

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (4) ia32 Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
    Memory: 2.37 GB / 11.92 GB
  Binaries:
    Node: 14.17.0 - C:\Program Files (x86)\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.13 - C:\Program Files (x86)\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.124
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.70)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @sveltejs/adapter-netlify: ^1.0.0-next.23 => 1.0.0-next.23
    @sveltejs/adapter-vercel: next => 1.0.0-next.26
    @sveltejs/kit: ^1.0.0-next.132 => 1.0.0-next.132
    svelte: ^3.38.3 => 3.38.3

Severity

blocking an upgrade

Additional Information

Looks like even the vercel deployment fails . See log here 

12:36:30.354 | > Using @sveltejs/adapter-vercel
-- | --
12:36:32.454 | null
12:36:32.499 | SyntaxError: Unexpected token < in JSON at position 0
12:36:32.499 | at JSON.parse (<anonymous>)
12:36:32.500 | at Proxy.<anonymous> (file:///vercel/path0/node_modules/@sveltejs/kit/dist/ssr.js:829:22)
12:36:32.500 | at async load$2 (file:///vercel/path0/.svelte-kit/output/server/app.js:780668:14)
12:36:32.500 | at async load_node (file:///vercel/path0/node_modules/@sveltejs/kit/dist/ssr.js:857:12)
12:36:32.500 | at async respond$1 (file:///vercel/path0/node_modules/@sveltejs/kit/dist/ssr.js:1078:15)
12:36:32.500 | at async render_page (file:///vercel/path0/node_modules/@sveltejs/kit/dist/ssr.js:1225:20)
12:36:32.500 | at async resolve (file:///vercel/path0/node_modules/@sveltejs/kit/dist/ssr.js:1580:10)
12:36:32.500 | at async Object.handle (file:///vercel/path0/.svelte-kit/output/server/app.js:261:20)
12:36:32.500 | at async respond (file:///vercel/path0/node_modules/@sveltejs/kit/dist/ssr.js:1553:10)
12:36:32.500 | at async visit (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index6.js:131:20)
12:36:32.501 | > 404 https://jsonplaceholder.typicode.com/photos (fetched from /album)
12:36:32.502 | Error: 404 https://jsonplaceholder.typicode.com/photos (fetched from /album)
12:36:32.502 | at error (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index6.js:94:11)
12:36:32.502 | at file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index6.js:197:6
12:36:32.502 | at Map.forEach (<anonymous>)
12:36:32.502 | at visit (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index6.js:179:17)
12:36:32.502 | at async prerender (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index6.js:245:5)
12:36:32.503 | at async Object.prerender (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index6.js:312:5)
12:36:32.504 | at async adapt (file:///vercel/path0/node_modules/@sveltejs/adapter-vercel/index.js:56:4)
12:36:32.504 | at async adapt (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index6.js:338:2)
12:36:32.504 | at async file:///vercel/path0/node_modules/@sveltejs/kit/dist/cli.js:905:5
12:36:32.565 | error Command failed with exit code 1.
12:36:32.566 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
12:36:32.582 | npm ERR! code ELIFECYCLE
12:36:32.582 | npm ERR! errno 1
12:36:32.586 | npm ERR! sveltekit-demo@1.0.1 build: `yarn run tailwind:build && yarn run build:only`
12:36:32.586 | npm ERR! Exit status 1

No response

rmunn commented 3 years ago

Line 3 of the logs you posted includes Unexpected token < in JSON at position 0. That looks like the getFetchResults function is expecting JSON but somehow receiving HTML. Is there any way you can extract the HTML in question from your logs, or grab it from your browser's Network tab during a reproduction? Its contents might be an additional clue to troubleshooting this error.

tsukhu commented 3 years ago

Here is the HTML from http://localhost:3000/worldmap

```html Surfers World
SvelteKit Experiments
```
tsukhu commented 3 years ago

We get a 404 during fetch in SSR mode

jet10000 commented 3 years ago

Same problem

babeard commented 3 years ago

Perhaps I'm misunderstanding how this code works, but wouldn't if (resolved.startsWith(options.paths.base /* '' */)) always be true for those who use the default options.paths.base?

https://github.com/sveltejs/kit/blob/7b440b2bc39ef4bc30d1b3f465f83ac512edcd1e/packages/kit/src/runtime/server/page/load_node.js#L111

(changed in 7b440b2bc39ef4bc30d1b3f465f83ac512edcd1e)

I changed to this and everything seems to be working now.

- } else if (resolved.startsWith(options.paths.base)) {
+ } else if (resolved.startsWith(options.paths.base || '/')) {
einarpersson commented 3 years ago

Same here. fetch gives 404 when I run in load but works in other places (eg. in onMount).

"@sveltejs/kit": "^1.0.0-next.132"
einarpersson commented 3 years ago

reverting to 1.0.0-next.131 fixed it

benmccann commented 3 years ago

@tsukhu your repro doesn't work for me. I get Cannot read property 'FIREBASE_API_KEY' of null

benmccann commented 3 years ago

I applied @babeard's fix and released it, but it caused a new issue https://github.com/sveltejs/kit/issues/1982

tsukhu commented 3 years ago

@tsukhu your repro doesn't work for me. I get Cannot read property 'FIREBASE_API_KEY' of null

@benmccann apologies for that as the app was using environment variables. But I can confirm the 133 version fixed the issue for me. Thank you . Will try out the new updates as well