Can't use D3

[andrewbanchich]

Describe the bug

After installing D3 and recreating this component I get errors about D3 having a circular dependency. The dev server hangs and never loads the page.

The strange thing is, this only happens if I start the dev server after creating the component. What I mean by that is if I install D3 -> start server -> create component then it works. If I then restart the dev server, it fails.

Reproduction

npm i d3

Create a component with this code: https://svelte.dev/repl/8722c32f4e1a44a98e3a3fc8a095b2d7?version=3.5.3

Logs

Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-selection/src/index.js?v=3e8e53ab -> /node_modules/d3-selection/src/selection/index.js -> /node_modules/d3-selection/src/selection/selectAll.js -> /node_modules/d3-selection/src/selection/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-selection/src/index.js?v=3e8e53ab -> /node_modules/d3-selection/src/selection/index.js -> /node_modules/d3-selection/src/selection/select.js -> /node_modules/d3-selection/src/selection/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-selection/src/index.js?v=3e8e53ab -> /node_modules/d3-selection/src/selection/index.js -> /node_modules/d3-selection/src/selection/filter.js -> /node_modules/d3-selection/src/selection/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-selection/src/index.js?v=3e8e53ab -> /node_modules/d3-selection/src/selection/index.js -> /node_modules/d3-selection/src/selection/data.js -> /node_modules/d3-selection/src/selection/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-selection/src/index.js?v=3e8e53ab -> /node_modules/d3-selection/src/selection/index.js -> /node_modules/d3-selection/src/selection/enter.js -> /node_modules/d3-selection/src/selection/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-selection/src/index.js?v=3e8e53ab -> /node_modules/d3-selection/src/selection/index.js -> /node_modules/d3-selection/src/selection/exit.js -> /node_modules/d3-selection/src/selection/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-selection/src/index.js?v=3e8e53ab -> /node_modules/d3-selection/src/selection/index.js -> /node_modules/d3-selection/src/selection/merge.js -> /node_modules/d3-selection/src/selection/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-selection/src/index.js?v=3e8e53ab -> /node_modules/d3-selection/src/selection/index.js -> /node_modules/d3-selection/src/selection/sort.js -> /node_modules/d3-selection/src/selection/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-transition/src/index.js?v=3e8e53ab -> /node_modules/d3-transition/src/transition/index.js -> /node_modules/d3-transition/src/transition/filter.js -> /node_modules/d3-transition/src/transition/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-transition/src/index.js?v=3e8e53ab -> /node_modules/d3-transition/src/transition/index.js -> /node_modules/d3-transition/src/transition/merge.js -> /node_modules/d3-transition/src/transition/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-transition/src/index.js?v=3e8e53ab -> /node_modules/d3-transition/src/transition/index.js -> /node_modules/d3-transition/src/transition/select.js -> /node_modules/d3-transition/src/transition/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-transition/src/index.js?v=3e8e53ab -> /node_modules/d3-transition/src/transition/index.js -> /node_modules/d3-transition/src/transition/selectAll.js -> /node_modules/d3-transition/src/transition/index.js
Circular dependency: /home/andrewbanchich/Documents/MyProject/ui/src/routes/dashboard.svelte -> /src/lib/charts/HorizontalBar.svelte -> /node_modules/d3/src/index.js -> /node_modules/d3-transition/src/index.js?v=3e8e53ab -> /node_modules/d3-transition/src/transition/index.js -> /node_modules/d3-transition/src/transition/transition.js -> /node_modules/d3-transition/src/transition/index.js

System Info

System:
    OS: Linux 5.11 Pop!_OS 21.04
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 3.67 GB / 23.33 GB
    Container: Yes
    Shell: 3.3.0 - /usr/bin/fish
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    npm: 7.20.1 - /usr/local/bin/npm
  Browsers:
    Firefox: 90.0
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.137
    svelte: 3.40.1 => 3.40.1

Severity

blocking all usage of SvelteKit

Additional Information

No response

[GrygrFlzr]

This is a known Vite issue, it cannot yet handle circular dependencies in dev and will hang instead.
Refer to:

• SSR support circular dependency vitejs/vite#2258
• Circular dependencies in SSR not detected and causes indefinite hang vitejs/vite#2491
• Circular dependency warning despite dynamic import vitejs/vite#4292
• and the PR to fix it feat(ssr): tolerate circular imports vitejs/vite#3950