Comments (6)
Simplified REPL. Edit: Rune version.
Workaround is referencing in the action destroyer a local copy of the editor:
const onMount: Action = (element: Element) => {
editor = new Editor({ element, extensions: [Document, Paragraph, Text] });
const local = editor;
return {
destroy() {
// this gets called 603 times until Svelte gives up
console.log("destroying")
// comment this line to fix it - why does this cause the #key block in the parent to infinitely loop,
// even tho `extensionGroups` doesn't change?
local.destroy()
},
}
}
from svelte.
Can you create a minimal reproduction? Most likely you are updating some value in an effect without untracking it.
from svelte.
This is pure Svelte 4 code - no runes (such as effects) are used.
I've been digging for hours now and I've found this code:
let extensionGroups: Extensions
$: {
extensionGroups = richText
? { marks: true, lists: true, align: true, links: true, limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }
: { limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }
// this value is then used in a `{#key}` block.
console.log("RichText:", richText)
}
This prints "RichText: true" exactly twice before the effect_update_depth
error appears. However, replacing it with a non-reactive const:
const extensionGroups: Extensions = richText
? { marks: true, lists: true, align: true, links: true, limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }
: { limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }
Fixes the issue. Additionally, the issue does not appear when client-side navigating to the page, only when loading it directly.
I'll keep digging and come back when I have a decent reproduction.
from svelte.
This is pure Svelte 4 code - no runes (such as effects) are used.
I've been digging for hours now and I've found this code:
let extensionGroups: Extensions $: { extensionGroups = richText ? { marks: true, lists: true, align: true, links: true, limit: 2000, placeholder: "Write card...", shiftEnterNewline: true } : { limit: 2000, placeholder: "Write card...", shiftEnterNewline: true } // this value is then used in a `{#key}` block. console.log("RichText:", richText) }This prints "RichText: true" exactly twice before the
effect_update_depth
error appears. However, replacing it with a non-reactive const:const extensionGroups: Extensions = richText ? { marks: true, lists: true, align: true, links: true, limit: 2000, placeholder: "Write card...", shiftEnterNewline: true } : { limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }Fixes the issue. Additionally, the issue does not appear when client-side navigating to the page, only when loading it directly.
So it's probably something related to the reactive block (which under the hood is converted in an effect). Unfortunately without looking at the whole code (or better a minimal reproduction in the REPL) it's difficult to understand what.
from svelte.
Finally, I managed to get a reproduction: stackblitz.
Open the console and look at the messages. You'll see that destroying
is printed over 100 times. It's not enough to cause the error, but running the example locally instead of Stackblitz make it reach over 600 calls, which is enough to trigger the error:
With Svelte 4, same Stackblitz (change svelte version in package.json
and add vitePreprocess()
in config), instead it's only called 2 times, instead of 603.
from svelte.
Wow, insane work! I thought it might have something to do with Tiptap updating the DOM. Thanks a lot for the clean REPL, and for the workaround! Updating the original post for clarity.
from svelte.
Related Issues (20)
- Allow the user to ignore warnings in the script tag HOT 9
- Svelte 5: #each randomly don't respect the array order after some mutations HOT 10
- $state.is always returns false during ssr
- Svelte 5: Abrupt Flickering Behavior in >next-140 HOT 6
- Transitions not working at all HOT 3
- Hoist
- export `transition:fn` types
- Svelte 5: Allow classes to opt-in to deep reactivity HOT 4
- Svelte 5: SVG elements within <slot> fallback not displayed
- Svelte 5: Unnecessary `ownership_invalid_mutation` warning HOT 1
- Performance of accessing deeply reactive state HOT 10
- Svelte 5: Why is this object a Proxy only when the `page` field is 1? HOT 9
- pre-process script 'process-messages' not working when .DS_Store is in `messages/` directory
- Svelte 5: Properties on fallback prop value only initially reactive
- Invalid mutation or binding when modifying array elements
- Svelte 5 Runes: Not copying correct name using binding search with derived HOT 3
- Source Code permission HOT 3
- Reactivity not working on safari v12.5.7 HOT 1
- Svelte 5 watch derived change and run view-transition HOT 4
- Svelte 5 Map Reactivity issue HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte.