Svelte gives "Error: Function called outside component initialization", only in Dev Build.

[derpycoder]

Describe the bug
This issue is not just with Svelte Kit, It happened with vite + routify combo as well, and only in dev build.

Basically, this issue happens upon doing a normal dev build.

Logs

Logs

Failed to init component Error: Function called outside component initialization at get_current_component (http://localhost:3000/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/internal/index.mjs?v=df472783:649:15) at setContext (http://localhost:3000/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/internal/index.mjs?v=df472783:679:5) at instance (http://localhost:3000/.svelte/dev/generated/root.svelte?import:480:2) at init (http://localhost:3000/home/abhijit/Documents/Experiments/QuillerBee/Sub%20Experiments/job-listing/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/internal/index.mjs?v=df472783:1474:11) at new Root (http://localhost:3000/.svelte/dev/generated/root.svelte?import:574:3) at createProxiedComponent (http://localhost:3000/node_modules/.pnpm/svelte-hmr@0.13.3_svelte@3.35.0/node_modules/svelte-hmr/runtime/svelte-hooks.js:245:9) at new ProxyComponent (http://localhost:3000/node_modules/.pnpm/svelte-hmr@0.13.3_svelte@3.35.0/node_modules/svelte-hmr/runtime/proxy.js:240:20) at new Proxy (http://localhost:3000/node_modules/.pnpm/svelte-hmr@0.13.3_svelte@3.35.0/node_modules/svelte-hmr/runtime/proxy.js:340:11) at Renderer.start (http://localhost:3000/.svelte/dev/runtime/internal/start.js:409:15) at async start (http://localhost:3000/.svelte/dev/runtime/internal/start.js:811:2)

To Reproduce

1. Svelte Kit - Just following along the latest Svelte doc caused the issue.

• pnpm init svelte@next
• pnpm i
• npm run dev

2. Svelte + Vite + Routify - Also I created a repo, reproducing the same bug but with different setup. Vitte: vite-routify-issue branch

• pnpm i
• npm run dev:routify

In both the cases, the dev build fails while the production build succeeds.

Expected behavior
I want to be able to run the dev build, the same way the production build works.

If not svelte-kti, maybe vite+routify+svelte combo can work!

Stacktraces

Stack Trace

Failed to init component Error: Function called outside component initialization at get_current_component (http://localhost:3000/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/internal/index.mjs?v=df472783:649:15) at setContext (http://localhost:3000/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/internal/index.mjs?v=df472783:679:5) at instance (http://localhost:3000/.svelte/dev/generated/root.svelte?import:480:2) at init (http://localhost:3000/home/abhijit/Documents/Experiments/QuillerBee/Sub%20Experiments/job-listing/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/internal/index.mjs?v=df472783:1474:11) at new Root (http://localhost:3000/.svelte/dev/generated/root.svelte?import:574:3) at createProxiedComponent (http://localhost:3000/node_modules/.pnpm/svelte-hmr@0.13.3_svelte@3.35.0/node_modules/svelte-hmr/runtime/svelte-hooks.js:245:9) at new ProxyComponent (http://localhost:3000/node_modules/.pnpm/svelte-hmr@0.13.3_svelte@3.35.0/node_modules/svelte-hmr/runtime/proxy.js:240:20) at new Proxy (http://localhost:3000/node_modules/.pnpm/svelte-hmr@0.13.3_svelte@3.35.0/node_modules/svelte-hmr/runtime/proxy.js:340:11) at Renderer.start (http://localhost:3000/.svelte/dev/runtime/internal/start.js:409:15) at async start (http://localhost:3000/.svelte/dev/runtime/internal/start.js:811:2)

Information about your SvelteKit Installation:

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit --binaries --browsers
  System:
  OS: Linux 5.4 Zorin OS 15.3
  CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Memory: 9.60 GB / 15.52 GB
  Container: Yes
  Shell: 4.4.20 - /bin/bash
  Binaries:
  Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
  npm: 7.6.3 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
  Chrome: 88.0.4324.182
  Firefox: 86.0.1
  npmPackages:
  @sveltejs/kit: next => 1.0.0-next.58
  svelte: ^3.29.0 => 3.35.0

• Your browser - Chrome

• Your adapter - I just tried to run locally, using Dev command.

Severity
It's not letting me play with Svelte Kit at all. Also same as not letting me run Vite + Svelte + Routify.

Additional context
I have raised 2 issues in Vite & Routify repos respectively.

1. Vite Issue
2. Routify Issue

P.S I am trying to write a blog post about Vite + Svelte + Routify combo, till Svelte Kit becomes production ready.
Also, I have a project in work, which uses Rollup and has a super slow development experience, which led me to explore other build tools such as Snowpack & Vite. See: Quiller Bee Repo

[juancpgo]

I'm facing the same issue, with Svelte kit.

Only happens with npm run dev too, like you said.

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4260U CPU @ 1.40GHz
    Memory: 77.16 MB / 4.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Chrome Canary: 91.0.4457.0
    Safari: 14.0.3
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.58 
    svelte: ^3.29.0 => 3.35.0 

[eugeneh-wang]

Workaround: try again in a path with no spaces in any folder names (“Sub Experiments”)

Probable duplicate of #634

[babichjacob]

Closing as duplicate of vitejs/vite#2585 since it's reproducible without SvelteKit in the project, thanks!

Until the PR to fix that is merged, try

Workaround: try again in a path with no spaces in any folder names (“Sub Experiments”)

[juancpgo]

Workaround: try again in a path with no spaces in any folder names (“Sub Experiments”)

Probable duplicate of #634

Yes, solved it for me, thanks!

[derpycoder]

It works. Yay!

Thank you @skrifblokk.