Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Circular dependencies throw error 500 #684

Closed
thefrana opened this issue Mar 25, 2021 · 7 comments
Closed

Circular dependencies throw error 500 #684

thefrana opened this issue Mar 25, 2021 · 7 comments
Labels

Comments

@thefrana
Copy link

Describe the bug
SvelteKit throws an error when using components with circular dependencies. Repository was created with commands shown on SK homepage and almost nothing was changed. I only included components from REPL.

Logs
Console

Circular dependency: path/to/repo/src/routes/index.svelte -> /src/lib/App.svelte -> /src/lib/Structure.svelte -> /src/lib/C.svelte -> /src/lib/Structure.svelte

To Reproduce

I created repo with the problem here
https://github.com/lukeeno/recursive-sveltekit

and also REPL with basically the same code, but in REPL it works
https://svelte.dev/repl/c90b530e67c94b8995bf4bb5b7f70d3b?version=3.35.0

Expected behavior
Not throwing error and recursively render components as shown in REPL

Stacktraces

Browser message
500
Cannot read property 'default' of null

TypeError: Cannot read property 'default' of null
    at path/to/repo/src/lib/C.svelte:7:22
    at Object.$$render (path/to/repo/node_modules/svelte/internal/index.js:1369:22)
    at eval (/src/lib/Structure.svelte:18:197)
    at Proxy.each (path/to/repo/node_modules/svelte/internal/index.js:1335:16)
    at path/to/repo/src/lib/Structure.svelte:15:7
    at Object.$$render (path/to/repo/node_modules/svelte/internal/index.js:1369:22)
    at eval (/src/lib/App.svelte:21:97)
    at Object.$$render (path/to/repo/node_modules/svelte/internal/index.js:1369:22)
    at eval (path/to/repo/src/routes/index.svelte:11:91)
    at Object.$$render (path/to/repo/node_modules/svelte/internal/index.js:1369:22)

Information about your SvelteKit Installation:

  • The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit --binaries --browsers
  System:
    OS: Linux 5.9 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 1.29 GB / 15.34 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - /usr/bin/node
    npm: 7.6.3 - /usr/bin/npm
  Browsers:
    Brave Browser: unknown
    Firefox: 86.0.1
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.60 
    svelte: ^3.29.0 => 3.35.0
  • Your browser Brave Version 1.20.103 Chromium: 88.0.4324.152 (Official Build) unknown (64-bit)

  • Your adapter Node

Severity

Really severe if you need circular dependencies, but apart from that it's okay

Additional context

Is there any workaround with async component loading?

@Rich-Harris
Copy link
Member

I guess this is a Vite issue. It's definitely solvable — SvelteKit used to have an SSR runtime that handled this case, but we removed it because Vite implemented something very similar — though I can't speak to how straightforward it would be to add it to Vite. Looks like there's a couple of related issues already, e.g. vitejs/vite#2258

@thefrana
Copy link
Author

Thank you. I will watch that issue

@benmccann benmccann added the vite label Mar 26, 2021
@jnordberg
Copy link

jnordberg commented Jul 27, 2021

Also running into this, was able to work around it with dynamic imports:

<script lang="ts">
    let Component: typeof import('$lib/component.svelte').default
    import('$lib/component.svelte').then((result) => {
        Component = result.default
    })
</script>

<svelte:component this={Component} />

@Buraburaite
Copy link

Fix just landed in Vite: vitejs/vite#3950 @Rich-Harris

@Dev1an
Copy link

Dev1an commented Aug 11, 2021

When I manually install vite v2.5.0-beta.2 using npm install vite@beta I'm still seeing these Circular dependency: ... messages though.

I'm not sure how to check if svelte kit is actually using that version of vite though... Any hints?

@Buraburaite
Copy link

Buraburaite commented Aug 12, 2021

I believe that Svelte kit is still technically on version 0.0.1 (meaning that they aren't using versioning). Wait until vite 2.5.0 drops and then run something like npm upgrade vite, or reinstall svelte kit entirely, is what I would try. The relevant svelte kit package.json has vite as ^2.4.3, so it should not require any action on the svelte team's part.

@ignatiusmb
Copy link
Member

Fix confirmed, thanks for checking them out!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

7 participants