Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Aaronliu2016 opened this issue Aug 2, 2023 · 56 comments
Labels
wontfix This will not be worked on

Comments

@Aaronliu2016
Copy link

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
Copy link
Contributor

axolo commented Aug 3, 2023

slab/quill#3806
update quill to 2.0.0

@leeobrum
Copy link

leeobrum commented Aug 4, 2023

hello, any predictions for an update to version 2.0?

@AnthonyRuelle
Copy link

Hello, same problem here, any news ?

@mageshk98
Copy link

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

@antrmarq
Copy link

Any update on this?

@YouSour
Copy link

YouSour commented Aug 29, 2023

got the same issue.

@Aaronliu2016
Copy link
Author

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
Copy link

JelynValcorza commented Aug 30, 2023

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
Copy link

rahul37865 commented Sep 1, 2023

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
Copy link

tyfiero commented Sep 6, 2023

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
Copy link

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
Copy link

same problem

@leonid-br
Copy link

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

@messenjer
Copy link

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

@JelynValcorza
Copy link

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

@leonid-br
Copy link

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
Copy link

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

@Anveshh99
Copy link

[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
Copy link

quilljs/quill#3806 update quill to 2.0.0

只能等待了……

@Leroy-sama
Copy link

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

@EdManukyan
Copy link

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
Copy link

Hey guys also waiting for the update.

@chinahmz
Copy link

chinahmz commented Jan 4, 2024

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
Copy link

proniket commented Jan 4, 2024

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
Copy link

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
Copy link

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

@hannes1337
Copy link

same here, standing in line and waiting.

@linuanyang
Copy link

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
Copy link

zran-20 commented Jan 19, 2024

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

@luin
Copy link

luin commented Jan 25, 2024

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

@Cz2545481217
Copy link

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

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

@asultanov
Copy link

asultanov commented Feb 4, 2024

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
Copy link

Any updates here?

@FelipeKreulich
Copy link

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

@v01
Copy link

v01 commented Feb 27, 2024

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
Copy link

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
Copy link

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
Copy link

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
Copy link

JParedes98 commented Feb 28, 2024

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
Copy link

oza95 commented Mar 7, 2024

[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
Copy link

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/[email protected]/dist/quill.js"></script>

@daniloribeiro00
Copy link

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
Copy link

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

@luin
Copy link

luin commented Apr 30, 2024

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

@noxsii
Copy link

noxsii commented May 10, 2024

push...

@alekswebnet
Copy link

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

@strukovd
Copy link

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

@Sky-Breaker07
Copy link

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

@ErikVerheul
Copy link

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

@reqwire
Copy link

reqwire commented Jul 3, 2024

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

@fedottt
Copy link

fedottt commented Jul 6, 2024

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 [email protected] 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

Copy link

stale bot commented Sep 4, 2024

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the wontfix This will not be worked on label Sep 4, 2024
@stale stale bot closed this as completed Sep 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests