3.44.2 to 3.44.3 Max call stack exceeded

[multipliedtwice]

Describe the bug

After version bumping I getting Maximum call stack size exceeded at random components:

Reproduction

The project has ~200k lines, it is difficult to share some code. Normally it happens during conditional rendering when some variable got changed and something appears in the viewport.

Logs

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at he (client.a36456a7.js:1)
    at new v (more.1e4136df.js:1)
    at Array.Re (card.901134b9.js:1)
    at d (client.a36456a7.js:1)
    at ul (client.a36456a7.js:1)
    at he (client.a36456a7.js:1)
    at new dl (client.a36456a7.js:1)
    at Je (card.901134b9.js:1)
    at he (client.a36456a7.js:1)
    at new We (card.901134b9.js:1)

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 3.86 GB / 15.87 GB
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.62)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    rollup: ^2.61.1 => 2.61.1 
    svelte: ^3.44.3 => 3.44.3

Severity

blocking all usage of svelte

[Prinzhorn]

@rmunn from the changelog #6920 looks very much related and could be the cause (there are only three entries in the changelog)? The original flushing boolean guard was trivial and maybe there is an edge case that the new code does not cover? I have no idea what's actually happening in that code, but the flushing guard was protecting against infinite flush() recursion and now it's gone. It acted like a global mutex and now nothing keeps concurrent calls from touching flushidx? I'm just taking guesses though.

@thousandsofraccoons could you sprinkle some console.log('flush') in flush() (edit Svelte directly in node_modules)? Also your error stack is minified, can you add source maps and pause at the exception in dev tools?

[multipliedtwice]

@Prinzhorn can you please specify relative paths for files that need to be tested with flush?

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at Object.create [as c] (tags.svelte:58)
    at Object.create [as c] (dropdown.svelte:79)
    at create_component (index.mjs:1738)
    at Object.create [as c] (tags.svelte:49)
    at create_component (index.mjs:1738)
    at Object.create [as c] (card-actions.svelte:263)
    at create_component (index.mjs:1738)
    at Object.create [as c] (card.svelte:92)
    at create_component (index.mjs:1738)
    at Object.create [as c] (_unauthorized_board.svelte:202)

[multipliedtwice]

I think I found a way to reproduce. I think it happens after redirect and immediately following conditional rendering. I'll create a test repo in a few hours

[rmunn]

@Prinzhorn can you please specify relative paths for files that need to be tested with flush?

The file you'll need to test will be node_modules/svelte/internal/index.js, or possibly index.mjs (I'm not yet clear on which file gets used when). In either case, search for function flush() which should be about halfway through the file. It would be most helpful, I think, to add console.log calls at the beginning and end of the function, like so:

function flush() {
  const saved_component = current_component;
  // Add a call here
  console.log('flush() starting with saved component', saved_component, 'and flushidx is', flushidx);
  // ... rest of function ...
  set_current_component(saved_component);
  // Add a call here
  console.log('flush() ending, having restored saved component', saved_component, 'and flushidx is now', flushidx);
}

You'll end up with a LOT of noise in the browser console that way, but the most valuable will be the final parts of the log right before the call stack size is exceeded. Being able to see whether the saved component is undefined, or a different component each time, or the same component each time, will tell us something. And being able to watch the value of flushidx as flush() reenters (or doesn't reenter) will also be useful information.

[ruslan-khomiak]

I have the same bug

[kyrylkov]

@thousandsofraccoons were you able to come up with a test repo?

[rmunn]

If I'm right about what's causing this, there's a bugfix in 3.46.4 that should fix this too. @thousandsofraccoons, can you re-test with Svelte 3.46.4 and see if that version fixes this issue for you?

[bluwy]

This does seem to be a duplicate of #4694. Closing this, but feel free to re-open if the issue still persist.

[kyrylkov]

@bluwy The issue still persists for us. Please re-open.

[bluwy]

Please provide a reproduction 👍

[ruslan-khomiak]

@Conduitry @rmunn
I still can't reproduce this error in REPL. But I know for sure that the problem is in this PR #6920

I reverted locally all the changes that were in this PR and the bug stopped reproducing. Maybe this information will be useful.

[AaronDDM]

Hey,

So I do not know too much about the lack of this logic is essentially the cause of this error:
https://github.com/sveltejs/svelte/pull/6920/files#diff-c6bed9ce5fe6451fdfb396f59ca220e54863ca568f7a9b43b08ff17e23b3db60L37-L38

I am able to replicate this if I load/unload a component multiple times over. I believe it's just non-stop attempting to flush even if another flush is still in progress.

This is definitely a bug that is still occurring. Happy to help someone who knows a bit more about the logic here. cc. @rmunn

---

Edit: Could we can still safely bring back the if (flushing) return statement while maintaining the fix that was implemented?
The rest of the logic still stays the same - it just doesn't get invoked endlessly and does the same work.

[kyrylkov]

@bluwy

@ruslan-khomiak created a reproduction

https://svelte.dev/repl/86b8b83f2e2b475e8e92aaa4df9c7da2?version=3.44.2 - everything is good
https://svelte.dev/repl/86b8b83f2e2b475e8e92aaa4df9c7da2?version=3.44.3 - maximum call stack size exceeded error

Looks like the problem appeared after the merge of this PR: https://github.com/sveltejs/svelte/pull/6920/files

Let us know if this is sufficient.

[kyrylkov]

@rmunn It's still broken and #6920 seems to be responsible.

Please see a reproduction above.

[kyrylkov]

@benmccann @dummdidumm @Conduitry Guys, #6920 broke 3.44.3 for us and it is still broken in 3.52.0

It's been almost a year now. Could you please revert this PR please?

[dummdidumm]

This (or at least the REPL reproduction case) may be related to #7752 / #6298 / #5689 - at least the "object binding causes rerender" is part of the problem, because it triggers another render cycle

[ruslan-khomiak]

@dummdidumm Wanted to test your PR, installed with npm i --save-dev sveltejs/svelte#pull/7981/head
But when building the project I get errors. There are many such errors, they are all the same, an example of one of them:
ERROR in ./src/shared/components/others/Alert/index.svelte Module build failed (from ./node_modules/svelte-loader/index.js): Error: Cannot find module 'css-tree/parser'
At the same time, if I install the latest version of Svelte, then everything builds well.
Maybe you know what the problem is?

[dummdidumm]

you need to do a production build first. easiest way is probably to set is_publish in rollup.config.js to true and then do npm run build

[ruslan-khomiak]

you need to do a production build first. easiest way is probably to set is_publish in rollup.config.js to true and then do npm run build

maybe you know how to do it with Webpack ?

[dummdidumm]

I'm talking about the rollup.config.js inside the Svelte repo, not inside your repo where you use Svelte.

[ruslan-khomiak]

@dummdidumm
Many thanks for the help!
Your PR really works for our case.
This fixes a rather old issue where we are still using Svelte version 3.44.2.

@bluwy @Conduitry @rmunn
Can we accept this PR as soon as possible? This will help us a lot.
[fix] don't run binding init unnecessarily #7981

[baseballyama]

It should be fixed by #8114.

[Conduitry]

This should be fixed in 3.55.1 - https://svelte.dev/repl/86b8b83f2e2b475e8e92aaa4df9c7da2?version=3.55.1