Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Routify gives "Error: Function called outside component initialization" when used with Vite, only in Dev Build Mode

See original GitHub issue

bug description I love Routify, and am able to use it with Rollup without issues. See: Quiller Bee & Quiller Bee Repo.

However, since Rollup is slow, I decided to use Vite.

After integrating Routify, the production build works great, but the Dev build gives error. See Vitte Repo: vite-routify-issue branch. And I really need the speed of dev build with Vite & especially the HMR support.

<App> 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=f03f2977:649:15) at setContext (http://localhost:3000/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/internal/index.mjs?v=f03f2977:679:5) at instance (http://localhost:3000/node_modules/.pnpm/@roxi/routify@2.15.1/node_modules/@roxi/routify/runtime/Router.svelte?import:176:2) at init (http://localhost:3000/home/abhijit/Documents/Experiments/QuillerBee/Sub%20Experiments/vitte/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/internal/index.mjs?v=f03f2977:1474:11) at new Router (http://localhost:3000/node_modules/.pnpm/@roxi/routify@2.15.1/node_modules/@roxi/routify/runtime/Router.svelte?import:264: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<Router> (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 create_fragment (http://localhost:3000/src/App.svelte?import:26:11) at init (http://localhost:3000/home/abhijit/Documents/Experiments/QuillerBee/Sub%20Experiments/vitte/node_modules/.pnpm/svelte@3.35.0/node_modules/svelte/internal/index.mjs?v=f03f2977:1489:37) `

package.json "scripts": { "dev": "vite", "routify": "routify", "dev:routify": "run-p dev routify", "fix": "pnpx eslint --fix \"{,!(node_modules|public|dist|.routify)/**/}*.{js,svelte}\"", "format": "pnpx prettier --write --plugin-search-dir=. \"{,!(node_modules|public|dist|.routify)/**/}*.{js,svelte,json}\"", "prebuild": "test \"$CI\" = true && npx pnpm install --store=node_modules/.pnpm-store || echo skiping pnpm install", "build": "routify -b && vite build", "serve": "vite preview" },

version “@roxi/routify”: “^2.15.1”,
“svelte”: “^3.35.0”,
“vite”: “^2.1.0”,

screenshot no-work

P.S. I am going to write a blog post about Vite + Routify combo in my blog DerpyCoder and also use it to replace my Rollup based Dev env. So I need this to work. 🙃

Issue Analytics

State:
Created 2 years ago
Comments:16 (7 by maintainers)

Top GitHub Comments

1reaction

jakobrosenbergcommented, Mar 25, 2021

Ah yes. You can see how we build the vite template here:

https://github.com/roxiness/routify-templates/blob/5b1e3bdcb347a273a7e596cc5c42afd0c0661b1b/fragments/svite/blueprint.js#L17-L37

1reaction

derpycodercommented, Mar 25, 2021

@jakobrosenberg,

After the success of my repo, where I experimented with Vite + Routify.

I integrated vite with my project. It gave the same error, even though there is no space in any enclosing folder.

See: Quiller Bee - vitte branch

npm run routify npm run dev

To recreate the issue.

Top Results From Across the Web

Vite gives "Error: Function called outside component ... - GitHub

Vite gives "Error: Function called outside component initialization" when used with Routify, only in Dev Build Mode #2647.

Function called outside component initialization from brand ...

I just had this problem, and it happens that the version of vite is outdated. I fixed the problem by updating vite to...

Error: Function called outside component initialization using Vite

I am trying to use the router as mentioned in the README.md but I am unable to do so with Vite. I searched...

Svelte Add: Easily & integrations & Other Functionality to Svelte Apps

In this library, We will share the archive for Svelte Add: Easily add integrations and other functionality to Svelte apps.

Introduction • Docs • SvelteKit

SvelteKit is a framework for rapid development of robust, performant web applications. Building an app with all the modern best practices is fiendishly ......