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

⚠️ IMPORTANT ⚠️ Please do not ignore this template. If you do, your issue will be closed immediately.

• Read the docs.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

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.

Reproduction

Problem Repo: vite-routify-issue branch

• Run Prod Build with npm run build & then npm run serve (It will work)
• Run Dev Build with npm run dev:routify (It will fail).

System Info

• vite version: 2.1.0
• Operating System: Zorin OS - Ubuntu
• Node version: v14.16.0
• Package manager (npm/yarn/pnpm) and version: pnpm (5.18.8)

P.S. I am going to write a blog post about Vite + Routify in my blog Derpy Coder and replace my Rollup based dev env. So I need this to work. 🙃

[derpycoder]

Adding routify, urql, & having space in folder caused the issue.

So after going through several reddit threads, git issues, I deduced that:

Removing space in enclosing folder of the project & Adding this to the vite.config.js.

optimizeDeps: { exclude: ["@roxi/routify", "@urql/svelte"] },

Solves the issue.

[patak-dev]

This issue is tracked here https://github.com/vitejs/vite/issues/2585, and there is a PR already to fix it