[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event.

[Aaronliu2016]

Chrome console shows this warning information:

[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated () and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

Is this caused by the quill.js version?

[axolo]

slab/quill#3806
update quill to 2.0.0

[leeobrum]

hello, any predictions for an update to version 2.0?

[AnthonyRuelle]

Hello, same problem here, any news ?

[mageshk98]

Facing performance issues because of this! An update would be helpful

[antrmarq]

Any update on this?

[YouSour]

got the same issue.

[Aaronliu2016]

Have to switch to tiptap instead of quill. Not as easy as vue-quill but the vue3 sample of tiptap is really clear.
guess what, its performance is way much better.

[JelynValcorza]

I got the same issue on vue-quill, can someone recommend rich text editor that can embed video from youtube or any other media sites which will be compatible to vue js 3

[rahul37865]

I am getting this warning on Firefox Use of Mutation Events is deprecated. Use MutationObserver instead.
On google Chrome Warning is
[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

Where exactly we need to use MutationObserver Or quick fix update will be great. We urgently need to fix this people are moving to other editor due to this warning.

[tyfiero]

Also having this issue with vanilla js quil. Really need to fix this quick plz, or I'll have to move to a different editor.

Error is coming from this line in the following code:

_this.domNode.addEventListener('DOMNodeInserted', function() {});

var Scroll = function(_Parchment$Scroll) {
                    _inherits(Scroll, _Parchment$Scroll);

                    function Scroll(domNode, config) {
                        _classCallCheck(this, Scroll);

                        var _this = _possibleConstructorReturn(this, (Scroll.__proto__ || Object.getPrototypeOf(Scroll)).call(this, domNode));

                        _this.emitter = config.emitter;
                        if (Array.isArray(config.whitelist)) {
                            _this.whitelist = config.whitelist.reduce(function(whitelist, format) {
                                whitelist[format] = true;
                                return whitelist;
                            }, {});
                        }
                        // Some reason fixes composition issues with character languages in Windows/Chrome, Safari
                        _this.domNode.addEventListener('DOMNodeInserted', function() {});
                        _this.optimize();
                        _this.enable();
                        return _this;
                    }

[lqmorais]

The line _this.domNode.addEventListener('DOMNodeInserted', function () {}); appears to be a workaround to trigger some internal logic in response to changes in the DOM when new nodes are inserted into _this.domNode. However, the empty function doesn't actually perform any meaningful action.

An equivalent using MutationObserver will be something like this:

var observer = new MutationObserver(function () {});
observer.observe(_this.domNode, { childList: true });

childList when set to true, indicates that the observer should monitor changes to the direct children (added or removed nodes) of the target node.

I tried this and the warning is gone. Apparently all works as expected.

[sharpprahs]

same problem

[leonid-br]

Hello. Tell me, is there a plan to fix this error?

[messenjer]

The solution would be to upgrade to version 2 of quill, but it hasn't been released yet slab/quill#3806

[JelynValcorza]

The problem is we have no updates on the promised version 2 of Quill. Just use Tiptap instead

[leonid-br]

The problem is we have no updates on the promised version 2 of Quill. Just use Tiptap instead

Your suggestion is to replace quill throughout the project?

[Spring-SWE]

There should be an update soon, the developer hoping to release a beta before December.
slab/quill#3896

[Anveshh99]

[Deprecation] Listener added for a synchronous DC" Mutation Event. This event type is deprecated quill..
and work is underway to remove it from this browser. usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. consider using
MutationObserver instead ......Unable to perform some functionality because of this! An update or help would be helpful

[digitalboy]

quilljs/quill#3806 update quill to 2.0.0

只能等待了……

[Leroy-sama]

still no update to quill. I'm using tiptap but you have to import almost everything.

[EdManukyan]

Hello guys, any update on when is the new version release going to happen and is this issue with the mutation going to be fixed?

[Philword]

Hey guys also waiting for the update.

[chinahmz]

The line _this.domNode.addEventListener('DOMNodeInserted', function () {}); appears to be a workaround to trigger some internal logic in response to changes in the DOM when new nodes are inserted into _this.domNode. However, the empty function doesn't actually perform any meaningful action.

An equivalent using MutationObserver will be something like this:

var observer = new MutationObserver(function () {});
observer.observe(_this.domNode, { childList: true });

childList when set to true, indicates that the observer should monitor changes to the direct children (added or removed nodes) of the target node.

I tried this and the warning is gone. Apparently all works as expected.

This method works. Thank you!

[proniket]

Hey everyone, still waiting for fixes in the new version of react-quill.. is there any updates.. on when this error is going to be fixed "[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event."

[Wamaitha12]

Hey everyone, still waiting for fixes in the new version of react-quill.. is there any updates.. on when this error is going to be fixed "[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event."

I thought you found the solution?

[shanulhabib]

Hey I am also facing this error let us know if someone find the solution for this.

[hannes1337]

same here, standing in line and waiting.

[linuanyang]

iListener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

i have the same problem
Any solution now？

[zran-20]

I met the same prompt. Not sure what the impact is.

[GisungJung]

me too i have same issue

[luin]

Hi 👋

I'm the maintainer of Quill, and we just released the second beta version of Quill 2.0. This version is considered feature-complete, and I wanted to know if there's anything I can do to help the transition to Quill 2.0.

There are many performance improvements made in Quill 2.0 and the dev/beta version has already been running on Slab for more than one year without any major issues. The version also avoids Mutation Event at all so should solve the issue.

We are still working on the documentation and examples, but https://v2.quilljs.com/ already contains useful info for upgrading to 2.0.

[linuanyang]

@luin i want to know this plugin vue-quill is maintained by you This plugin doesn't seem to introduce quill 2.0 . How to solve it？

[GisungJung]

i'm using react-quill v2.0 warning message still appear

[luin]

@GisungJung react-quill v2.0 uses Quill v1 so that's the reason you still saw the warning.

[Cz2545481217]

@GisungJungReact-quill v2.0 使用 Quill v1，所以这就是您仍然看到警告的原因。

When to upgrade React Quill built-in Quill to Quill2？

[asultanov]

Find this line

_this.domNode.addEventListener('DOMNodeInserted', function () {});

Select it and replace with

    let observer = new MutationObserver(function (mutations) {
        //mutations.forEach(function (mutation) {
        // Обработка изменений в DOM
        //console.log(mutation);
        //});
    });

    // Настройка на отслеживание изменений в документе
    let observerConfig = {childList: true, subtree: true};
    observer.observe(_this.domNode, observerConfig);

[JParedes98]

Any updates here?

[FelipeKreulich]

I'm facing the same problem, even with quill updated to version 2.0.0, I tried a few things, but without success

[v01]

Solution:

1. Find this line: _this.domNode.addEventListener('DOMNodeInserted', function () {}); let observerConfig = {childList: true, subtree: true};

2. Select it and replace with:
   observer.observe(_this.domNode, observerConfig);
   _this.optimize();
   _this.enable();
   return _this;
   }

[FelipeKreulich]

Solution:

1. Find this line: _this.domNode.addEventListener('DOMNodeInserted', function () {}); let observerConfig = {childList: true, subtree: true};
2. Select it and replace with:
   observer.observe(_this.domNode, observerConfig);
   _this.optimize();
   _this.enable();
   return _this;
   }

It's working for me, Thanks!

[leonid-br]

Solution:

1. Find this line: _this.domNode.addEventListener('DOMNodeInserted', function () {}); let observerConfig = {childList: true, subtree: true};
2. Select it and replace with:
   observer.observe(_this.domNode, observerConfig);
   _this.optimize();
   _this.enable();
   return _this;
   }

and do you want to update this manually every time you clone a project?

[AnthonyRuelle]

Solution:

1. Find this line: _this.domNode.addEventListener('DOMNodeInserted', function () {}); let observerConfig = {childList: true, subtree: true};
2. Select it and replace with:
   observer.observe(_this.domNode, observerConfig);
   _this.optimize();
   _this.enable();
   return _this;
   }

and do you want to update this manually every time you clone a project?

you could possibly make a patch but that's really not the right way to do it. The package author should include this fix!

[JParedes98]

I ended up using quill core library and creating my own component. I know is not the best thing around, but at least works.

If someone uses, remember to copy the quill css styles and snow theme to laravel webpack/vite css compiler.

TextEditor.txt

[oza95]

[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated () and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead. Any solution for this I am using it in NextJS

[dandanbang]

the message disappears now after using 2.0.0

<!-- <script defer src="https://cdn.quilljs.com/1.3.6/quill.js"></script> -->
<script defer src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.4/dist/quill.js"></script>

[daniloribeiro00]

With the release of Quill 2.0 (https://github.com/quilljs/quill/releases/tag/v2.0.0), will this library be updated to support it?

[Wellitonzs]

I'm facing this same warning in my React application. Any expected fix for this problem?

[luin]

@Wellitonzs For React you can use Quill without a library/framework: https://quilljs.com/playground/react

[noxsii]

push...

[alekswebnet]

For Vue 3 and Quill 2 you could try this simple wrapper component: https://github.com/alekswebnet/vue-quilly

[strukovd]

Исправьте это говно 💩