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

[derpycoder]

⚠️ 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. 🙃

[meteorlxy]

Seems that your reproduce repo is invalid:

Failed to resolve import "../.routify/routes" from "src/App.svelte". Does the file exist?

[derpycoder]

@meteorlxy,

The file gets created upon using npm run dev:routify.

or npm run routify separately and then doing npm run dev.

[meteorlxy]

Seems it work well here 🤔 Where is the error message?

[derpycoder]

Production build works great, but the dev build fails.

[derpycoder]

[derpycoder]

P.S. I moved the problem code to another branch, so that I can use the working part of the repo.

Branch: vite-routify-issue.

[derpycoder]

Hey the issue was because of a space in parent folder name.

Svelte Kit Issue Resolution

[Shinigami92]

@abhijit-kar So is it solved? Should I close this issue?

[patak-dev]

This issue is tracked here #2585, and there is a PR already to fix it

[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.