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

Question

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

Aaronliu2016 opened this issue a year ago · comments

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?

noxsi commented 3 months ago

push...

Yueming Fang (方跃明) · Answer 1 · Thu Aug 03 2023 14:12:33 GMT+0800 (China Standard Time)

slab/quill#3806
update quill to 2.0.0

Leonardo Brum · Answer 2 · Sat Aug 05 2023 02:14:00 GMT+0800 (China Standard Time)

hello, any predictions for an update to version 2.0?

Anthony Ruelle · Answer 3 · Wed Aug 16 2023 23:31:21 GMT+0800 (China Standard Time)

Hello, same problem here, any news ?

Magesh_Kumar · Answer 4 · Fri Aug 18 2023 22:34:07 GMT+0800 (China Standard Time)

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

Anthony Marquez · Answer 5 · Tue Aug 22 2023 02:49:39 GMT+0800 (China Standard Time)

Any update on this?

Sour · Answer 6 · Tue Aug 29 2023 12:45:01 GMT+0800 (China Standard Time)

got the same issue.

Aaron · Answer 7 · Tue Aug 29 2023 17:20:53 GMT+0800 (China Standard Time)

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 · Answer 8 · Wed Aug 30 2023 15:21:46 GMT+0800 (China Standard Time)

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 · Answer 9 · Fri Sep 01 2023 20:59:49 GMT+0800 (China Standard Time)

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.

Ty Fiero · Answer 10 · Thu Sep 07 2023 02:19:24 GMT+0800 (China Standard Time)

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;
                    }

Luana Morais · Answer 11 · Fri Sep 15 2023 21:12:44 GMT+0800 (China Standard Time)

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 · Answer 12 · Tue Oct 03 2023 09:40:31 GMT+0800 (China Standard Time)

same problem

Leonid Bryzgalov · Answer 13 · Fri Oct 13 2023 15:51:32 GMT+0800 (China Standard Time)

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

Mathieu Laurent · Answer 14 · Fri Oct 13 2023 16:33:05 GMT+0800 (China Standard Time)

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

JelynValcorza · Answer 15 · Mon Oct 16 2023 16:35:34 GMT+0800 (China Standard Time)

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

Leonid Bryzgalov · Answer 16 · Mon Oct 16 2023 23:51:39 GMT+0800 (China Standard Time)

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 · Answer 17 · Sun Nov 05 2023 02:29:01 GMT+0800 (China Standard Time)

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

Anvesh Modak · Answer 18 · Thu Nov 23 2023 14:15:11 GMT+0800 (China Standard Time)

[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 · Answer 19 · Sun Dec 03 2023 17:38:09 GMT+0800 (China Standard Time)

quilljs/quill#3806 update quill to 2.0.0

只能等待了……

Riroi · Answer 20 · Mon Dec 25 2023 22:03:32 GMT+0800 (China Standard Time)

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

Edik Manukyan · Answer 21 · Sat Dec 30 2023 05:55:55 GMT+0800 (China Standard Time)

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?

Philipp · Answer 22 · Sat Dec 30 2023 12:30:06 GMT+0800 (China Standard Time)

Hey guys also waiting for the update.

chinahmz · Answer 23 · Thu Jan 04 2024 10:21:39 GMT+0800 (China Standard Time)

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!

Aniket · Answer 24 · Thu Jan 04 2024 21:27:23 GMT+0800 (China Standard Time)

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."

Wamaitha · Answer 25 · Tue Jan 09 2024 20:03:05 GMT+0800 (China Standard Time)

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 · Answer 26 · Tue Jan 09 2024 21:37:50 GMT+0800 (China Standard Time)

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

Johannes · Answer 27 · Fri Jan 12 2024 07:08:19 GMT+0800 (China Standard Time)

same here, standing in line and waiting.

暖阳 · Answer 28 · Tue Jan 16 2024 14:55:42 GMT+0800 (China Standard Time)

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？

Ran · Answer 29 · Fri Jan 19 2024 17:17:24 GMT+0800 (China Standard Time)

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

gicoding · Answer 30 · Mon Jan 22 2024 16:30:29 GMT+0800 (China Standard Time)

me too i have same issue

Zihua Li · Answer 31 · Mon Jan 22 2024 20:00:44 GMT+0800 (China Standard Time)

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.

暖阳 · Answer 32 · Tue Jan 23 2024 15:49:25 GMT+0800 (China Standard Time)

@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？

gicoding · Answer 33 · Thu Jan 25 2024 07:41:13 GMT+0800 (China Standard Time)

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

Zihua Li · Answer 34 · Thu Jan 25 2024 09:25:18 GMT+0800 (China Standard Time)

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

Alfredo James Pacino · Answer 35 · Mon Jan 29 2024 12:14:23 GMT+0800 (China Standard Time)

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

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

asultanov · Answer 36 · Mon Feb 05 2024 03:56:13 GMT+0800 (China Standard Time)

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);

Jose Paredes · Answer 37 · Sat Feb 24 2024 10:08:36 GMT+0800 (China Standard Time)

Any updates here?

Felipe Kreulich · Answer 38 · Sun Feb 25 2024 08:13:04 GMT+0800 (China Standard Time)

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

Vince · Answer 39 · Tue Feb 27 2024 10:20:42 GMT+0800 (China Standard Time)

Solution:

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

Felipe Kreulich · Answer 40 · Tue Feb 27 2024 18:45:39 GMT+0800 (China Standard Time)

Solution:

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

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

It's working for me, Thanks!

Leonid Bryzgalov · Answer 41 · Tue Feb 27 2024 19:06:53 GMT+0800 (China Standard Time)

Solution:

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

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?

Anthony Ruelle · Answer 42 · Thu Feb 29 2024 00:05:56 GMT+0800 (China Standard Time)

Solution:

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

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!

Jose Paredes · Answer 43 · Thu Feb 29 2024 01:27:39 GMT+0800 (China Standard Time)

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

Harsh Oza · Answer 44 · Thu Mar 07 2024 14:14:02 GMT+0800 (China Standard Time)

[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

Daniel W. Chen · Answer 45 · Wed Apr 03 2024 10:27:05 GMT+0800 (China Standard Time)

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>

Danilo Ribeiro · Answer 46 · Thu Apr 18 2024 22:22:09 GMT+0800 (China Standard Time)

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?

Welliton Zeferino Serafim · Answer 47 · Tue Apr 30 2024 02:59:52 GMT+0800 (China Standard Time)

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

Zihua Li · Answer 48 · Tue Apr 30 2024 08:25:56 GMT+0800 (China Standard Time)

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

Oleksandr Shevchuk · Answer 49 · Mon May 13 2024 20:25:37 GMT+0800 (China Standard Time)

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

strukovd · Answer 50 · Tue May 14 2024 17:27:03 GMT+0800 (China Standard Time)

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

FeranmiDev · Answer 51 · Sun Jun 09 2024 19:24:44 GMT+0800 (China Standard Time)

Just go to your terminal and install the latest version of quill
Then go to your package.json and add:
"overrides": {
"quill": "^2.0.2"
}

Then uninstall @vueup/vue-quill package
Then install it again.
The error will be resolved

Erik Verheul · Answer 52 · Sun Jun 09 2024 23:43:39 GMT+0800 (China Standard Time)

@Sky-Breaker07 : Thanks for the tip. It worked as expected! Saved me a lot of work forking and changing vue-quill.

Billie Bell · Answer 53 · Thu Jul 04 2024 05:47:00 GMT+0800 (China Standard Time)

I would like to update to quill 2 but It's too buggy. :/

fedottt · Answer 54 · Sat Jul 06 2024 13:03:50 GMT+0800 (China Standard Time)

Just go to your terminal and install the latest version of quill Then go to your package.json and add: "overrides": { "quill": "^2.0.2" }

Then uninstall @vueup/vue-quill package Then install it again. The error will be resolved

didnt work

added to npm/package.json overrides block does error on audit fix

# npm audit
npm error code EOVERRIDE
npm error Override for quill@2.0.2 conflicts with direct dependency
npm error A complete log of this run can be found in: /_logs/2024-07-06T04_54_41_286Z-debug-0.log

even with "overrides": { "quill": "2.0.2" } or edit dependencies block to "quill": "^2.0.2" didnt do the trick

after fresh install vue-quill error is still here (damn) and in dependencies we see quill 1.3.7