Warning: performUpdateIfNecessary: Unexpected batch number

[scrambled2k3]

I keep getting this error when trying to load this component. I am just copying your example, nothing different.

Using: react-tinymce 0.5.1 react-tinymce-mention: 0.2.16

[deltamualpha]

Is it preventing the component from loading?

[scrambled2k3]

Yes. It appears to be an infinite loop, flooding my console with that error. I have to kill the tab in order to stop it.

[deltamualpha]

What version of react? the official react repo has an issue on this: https://github.com/facebook/react/issues/6895

[scrambled2k3]

The latest version as of right now, 15.3.2

I found that article earlier while researching the error, but it doesn't seem to shed any light on my issue.

[deltamualpha]

I'll try and reproduce, but if you have a simple test case, I'd appreciate it (a stand-alone package.json file, etc). Also worth noting that this repo upgraded to 15.3 in PR #4.

[scrambled2k3]

Just to see what would happened, I rolled back to React version 15.2.1

I now get the error messages: Warning: There is an internal error in the React performance measurement code. Did not expect componentDidUpdate timer to start while render timer is still in progress for another instance.

and

Uncaught TypeError: Cannot call a class as a function

Not sure if this helps.

[deltamualpha]

Are you loading from master, or v0.2.16? I'm starting to get the feeling master is... not in the best shape at the moment.

[deltamualpha]

Oh wait, you said 0.2.16 up there. Hmm.

[scrambled2k3]

Yes, but you gave me an idea. I switched over to 'master' and the error goes away. Looking at the changelog, that (latest) version is over a year old so there must have been some things that it didn't like about the latest versions of React.

It still isn't working though. When I use the React inspector, I can see the module has loaded, however, I get the error:

Failed to load: http://cdnjs.cloudflare.com/ajax/libs/tinymce/4.2.4/plugins/mention/plugin.min.js

Shouldn't this plugin override the mention plugin that tinymce tries to pull in?

[scrambled2k3]

BTW.....I saw that something similar to my "Failed to load" issue is covered in the troubleshooting section of the doc, but I am using react-tinymce and am still getting that error.

[deltamualpha]

Can you put your work in a repo somewhere where I can see it?

[scrambled2k3]

I think I figured it out. It's all about which component should be loaded first. In my case, I had to place the component before in order for it to load the appropriate mention plugin.

Thanks for all of your help, fingers crossed that it will be smooth sailing from here on out.

[deltamualpha]

Ok, great! I'm just taking over maintenance on this project so I'm still getting my feet under me on what's what around here.

[scrambled2k3]

Hopefully this product will continue to develop. It seems like the best option for using mentions within a WYSIWYG editor for React (I have tried many). For my purposes, we have to save the data out to HTML, so using something like Draft.js will not work for us.

Thanks again!

[deltamualpha]

@scrambled2k3 I pushed some updates to the example code that should make things clearer for 15.x react users.

[scrambled2k3]

Awesome....thanks! Any way we can get a release tagged to lock in support for 15.x?

[scrambled2k3]

Oh, and by the way. Any reason why this is prevent the propagation of any tiny mce events? I am trying to add an event to auto capture what the content of the editor is (via onChange or blur), but this plugin appears to block them. I have tried creating my own plugin to capture events and also just adding an 'onChange' or 'onBlur' to the component...but it is always blocked by this plugin.

Any ideas?

[deltamualpha]

We add focus/blur listeners inside the setup function you can pass as an option to the editor.

function(editor) {
  editor.on('init', function() {
    $(editor.getBody()).on('focus', function() {
      ...
    });
    $(editor.getBody()).on('blur', function() {
      ...
  });
}

Those always seem to fire, but you have to attach to the inner text body, not the editor itself.

[deltamualpha]

@scrambled2k3 pushed v0.3.0 based on current master.

[codepandy]

How to solve the problem? Need I roll back to React version 15.2.1?

[deltamualpha]

Hi @codepandy -- can you clarify? What version of react are you attempting to use this with? I'm not actively working on the code anymore but may be able to provide support if it's a minor fix.

[codepandy]

@deltamualpha thank you very much, I have solved the problem. It wasn't the version's question,the component that was defined was wrong, my colleague defined the component used Object.assign() so when I used setState(),the error would be shown.