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

derpycoder · 2021-03-23T06:13:15Z

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.

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 (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

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

The text was updated successfully, but these errors were encountered:

derpycoder · 2021-03-24T17:26:19Z

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

Svelte Kit Issue Resolution

jakobrosenberg · 2021-03-24T17:32:32Z

Happy you got it fixed @abhijit-kar !

derpycoder · 2021-03-25T05:20:32Z

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

jakobrosenberg · 2021-03-25T06:52:08Z

You can try this repo https://github.com/roxiness/routify-templates

It should be able to give you a working vite template.

derpycoder · 2021-03-25T07:21:05Z

Hey @jakobrosenberg,

I initialized the starter repo directly from a working Svelte template. However 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.

jakobrosenberg · 2021-03-25T07:31:56Z

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

derpycoder · 2021-03-25T07:34:19Z

Damn, I am going to copy so many configs from that blueprint.

Thanks.

drannex42 · 2021-05-17T06:33:44Z

I feel like 'optimizeDeps: { exclude: ["@roxi/routify", "@urql/svelte"] },' needs to be included somewhere in the docs for users of Vite, because this was driving me absolutely mad.

Thanks for suggesting it @abhijit-kar!

braebo · 2021-05-18T00:31:17Z

I feel like 'optimizeDeps: { exclude: ["@roxi/routify", "@urql/svelte"] },' needs to be included somewhere in the docs for users of Vite, because this was driving me absolutely mad.

Yea, at least the top of the urql-svelte docs mention it now.

Unfortunately, adding "@urql/svelte" to optimizeDeps.exclude didn't fix the issue for me. Do you have urql in dependencies or devDependencies?

Could you possible share a working implementation? Perhaps my client initialization is in the wrong file or something. It seems like this is mostly due to urql client using setContext under the hood.

jakobrosenberg · 2021-05-18T07:26:10Z

@drannex42 @fractalhq what would be the best place for Vite documentation? FAQ or a dedicated section?

braebo · 2021-05-18T14:56:17Z

My vote would be dedicated. I imagine it will be the de facto bundler for most users.

drannex42 · 2021-05-18T18:14:47Z

Agreed with @fractalhq, should be a dedicated section.

Re: url1 - I just took a look, and while I thought I had urlq as a dep, I don't. I just needed to add @roxi/routify to my exclude.

Here is my vite.config.js if it helps:

import { defineConfig } from 'vite'
import svelte from '@sveltejs/vite-plugin-svelte'
import WindiCSS from 'vite-plugin-windicss'
import viteCompression from 'vite-plugin-compression';
import { getAliases } from 'vite-aliases'

const aliases = getAliases();

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [WindiCSS(), svelte(), viteCompression()],
  resolve: {
		alias: aliases
	},
  optimizeDeps: { exclude: ["@roxi/routify"] },
})

A lot of that isn't needed, but that's my projects config file.

agrear · 2021-06-13T20:55:51Z

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

This doesn't seem to work if you're using transitions. It throws the following error:

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/routes/_layout.svelte

Might be a problem with vite-plugin-svelte judging from the output:

[vite] Internal server error: failed to transform tagged svelte request for id /node_modules/@roxi/routify/runtime/decorators/BaseTransition.svelte?svelte&type=style&lang.css
  Plugin: vite-plugin-svelte
  File: /node_modules/@roxi/routify/runtime/decorators/BaseTransition.svelte?svelte&type=style&lang.css
      at TransformContext.transform (\node_modules\@sveltejs\vite-plugin-svelte\dist\index.cjs:888:15)
      at Object.transform (\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:44765:53)
      at transformRequest (\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:59029:51)
      at async viteTransformMiddleware (\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:59167:32)

ghostdevv · 2021-06-13T21:09:53Z

what version of vite-plugin-svelte @agrear

agrear · 2021-06-13T21:19:39Z

what version of vite-plugin-svelte @agrear

"@sveltejs/vite-plugin-svelte": "^1.0.0-next.11"

I also tried earlier versions up to 1.0.0-next.8.

agrear · 2021-06-16T13:29:09Z

Replacing import { BaseTransition } from '@roxi/routify/decorators'
with import BaseTransition from '@roxi/routify/runtime/decorators/BaseTransition.svelte'
fixes the issue.

derpycoder mentioned this issue Mar 24, 2021

Svelte gives "Error: Function called outside component initialization", only in Dev Build. sveltejs/kit#642

Closed

derpycoder closed this as completed Mar 25, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

derpycoder commented Mar 23, 2021 •

edited

Loading

derpycoder commented Mar 24, 2021

jakobrosenberg commented Mar 24, 2021

derpycoder commented Mar 25, 2021 •

edited

Loading

jakobrosenberg commented Mar 25, 2021

derpycoder commented Mar 25, 2021 •

edited

Loading

jakobrosenberg commented Mar 25, 2021

derpycoder commented Mar 25, 2021

drannex42 commented May 17, 2021

braebo commented May 18, 2021

jakobrosenberg commented May 18, 2021

braebo commented May 18, 2021

drannex42 commented May 18, 2021 •

edited

Loading

agrear commented Jun 13, 2021

ghostdevv commented Jun 13, 2021

agrear commented Jun 13, 2021

agrear commented Jun 16, 2021

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

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

Comments

derpycoder commented Mar 23, 2021 • edited Loading

derpycoder commented Mar 24, 2021

jakobrosenberg commented Mar 24, 2021

derpycoder commented Mar 25, 2021 • edited Loading

jakobrosenberg commented Mar 25, 2021

derpycoder commented Mar 25, 2021 • edited Loading

jakobrosenberg commented Mar 25, 2021

derpycoder commented Mar 25, 2021

drannex42 commented May 17, 2021

braebo commented May 18, 2021

jakobrosenberg commented May 18, 2021

braebo commented May 18, 2021

drannex42 commented May 18, 2021 • edited Loading

agrear commented Jun 13, 2021

ghostdevv commented Jun 13, 2021

agrear commented Jun 13, 2021

agrear commented Jun 16, 2021

derpycoder commented Mar 23, 2021 •

edited

Loading

derpycoder commented Mar 25, 2021 •

edited

Loading

derpycoder commented Mar 25, 2021 •

edited

Loading

drannex42 commented May 18, 2021 •

edited

Loading