Maximum call stack size exceeded: Vite doesn't like MANY elements

[NetOpWibby]

Description

I have a page with 200 elements. Vite chokes on it. When I reduce the amount of items on the page, it renders just fine. Here's what happens when I run my app and navigate to the page:

  SvelteKit v1.0.0-next.109

  local:   http://localhost:2513
  network: not exposed

  Use --host to expose server to other devices on this network


11:28:56 AM [vite] Internal server error: Maximum call stack size exceeded
  Plugin: vite-plugin-svelte
  File: ~/my-app/src/pages/product/catalogue/index.svelte
      at handle_var_declaration (~/my-app/node_modules/svelte/compiler.js:5959:11)
      at VariableDeclaration (~/my-app/node_modules/svelte/compiler.js:6243:11)
      at handle (~/my-app/node_modules/svelte/compiler.js:5711:18)
      at ~/my-app/node_modules/svelte/compiler.js:5901:19
      at Array.map (<anonymous>)
      at handle_body (~/my-app/node_modules/svelte/compiler.js:5900:22)
      at ~/my-app/node_modules/svelte/compiler.js:5977:8
      at ~/my-app/node_modules/svelte/compiler.js:5879:11
      at handle (~/my-app/node_modules/svelte/compiler.js:5711:18)
      at ~/my-app/node_modules/svelte/compiler.js:6236:8

Here is what one of the elements looks like:

  <u-cell class="domain-price" flex span="2">
    <a class="extension" href="/product/catalogue/chown" title={generateTLDLinkTitle("chown")}>.chown</a>
    <span class="price">9.00</span>
    <span class="divider">/</span>
    <span class="price premium">121.00</span>
  </u-cell>

Reproduction

https://gist.github.com/NetOpWibby/8e6fd8c3d1f326284e254f7f80cd4c31

Additional Information

  System:
    OS: macOS 11.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
    Memory: 1.12 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.2.0 - ~/.nvm/versions/node/v16.2.0/bin/node
    npm: 7.13.0 - ~/.nvm/versions/node/v16.2.0/bin/npm
  Browsers:
    Edge: 81.0.416.62
    Firefox: 88.0.1
    Safari: 14.1
  npmPackages:
    svelte: ^3.38.2 => 3.38.2

[dominikg]

This may be caused by a circular reference in either the route structure or the component itself. Hard to tell without access to a repository that helps to reproduce this error.
Please share more information and/or try to check if the error happens when you start adding hrefs that point into the same route.

[NetOpWibby]

Interestingly, when I put all the elements items into an array and cycled through them with a function via {#each/}, the page rendered just fine. I'm already invested, I'm gonna see if there was some error I made when manually creating these elements before.

[NetOpWibby]

Update: the app renders just fine when built.

[NetOpWibby]

@dominikg Updated my initial post with a repro

[NetOpWibby]

Looks like this issue stems from Svelte itself: sveltejs/svelte#4694

[NetOpWibby]

And thus, I have found a solution! https://gist.github.com/NetOpWibby/8515baa503ccc7b60189c6871c2c6096.

I'll close this issue since it isn't Vite's fault anyway.

[alexbjorlig]

@NetOpWibby the solution you linked gives 404. Do you remember what the solution was?

[NetOpWibby]

@alexbjorlig Ah, I shortened my username so the link broke. Fixed now!

[Joseph-D-Bradshaw]

Just so anybody else who comes across this, I managed to get this issue with using postcss and tailwind; after using <style lang="postcss"> I got a very upset vite-plugin-svelte who fell into a maximum call stack size due to the amount of "unused css selectors".

I haven't got a solution yet.. but if I find one.. I will modify my comment