error: possiblePlugin.extractEvents is not a function

[aa875982361]

Do you want to request a feature or report a bug?

i want to report a bug.

What is the current behavior?

Array.prototype.push([]);

I get an error when i trigger element event :

Uncaught TypeError: possiblePlugin.extractEvents is not a function
    at extractEvents (react-dom.development.js:704)
    at runExtractedEventsInBatch (react-dom.development.js:738)
    at handleTopLevel (react-dom.development.js:4203)
    at batchedUpdates (react-dom.development.js:12539)
    at batchedUpdates (react-dom.development.js:1941)
    at dispatchEvent (react-dom.development.js:4284)
    at interactiveUpdates (react-dom.development.js:12594)
    at interactiveUpdates (react-dom.development.js:1960)
    at dispatchInteractiveEvent (react-dom.development.js:4261)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

Element Event trigger normally.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
i don't known.

** reason**

in this file : https://github.com/facebook/react/blob/master/packages/events/EventPluginRegistry.js

function recomputePluginOrdering() {
  if (!eventPluginOrder) {
    // Wait until an `eventPluginOrder` is injected.
    return;
  }
  for (var pluginName in namesToPlugins) {
    var pluginModule = namesToPlugins[pluginName];
    var pluginIndex = eventPluginOrder.indexOf(pluginName);
    !(pluginIndex > -1) ? invariant(false, 'EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `%s`.', pluginName) : void 0;
    if (plugins[pluginIndex]) { // pluginIndex = 0  plugins[pluginIndex] = [] so containue
      continue;
    }
    !pluginModule.extractEvents ? invariant(false, 'EventPluginRegistry: Event plugins must implement an `extractEvents` method, but `%s` does not.', pluginName) : void 0;
    plugins[pluginIndex] = pluginModule;
    var publishedEvents = pluginModule.eventTypes;
    for (var eventName in publishedEvents) {
      !publishEventForPlugin(publishedEvents[eventName], pluginModule, eventName) ? invariant(false, 'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.', eventName, pluginName) : void 0;
    }
  }
}

when use in : https://github.com/facebook/react/blob/master/packages/events/EventPluginHub.js

    var possiblePlugin = plugins[i]; // when i =0 , possiblePlugin =[]
    if (possiblePlugin) {
      debugger
       //  possiblePlugin.extractEvents is undefined
      var extractedEvents = possiblePlugin.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
      if (extractedEvents) {
        events = accumulateInto(events, extractedEvents);
      }
    }

suggest
add Parameter check

    if (plugins[pluginIndex] && typeof plugins[pluginIndex].extractEvents === 'function') { // pluginIndex = 0  plugins[pluginIndex] = [] so containue
      continue;
    }

[gaearon]

Can you provide a reproducing case?

[aa875982361]

This is a very easy case to reproduce, just run this in your code:
Array.prototype.push([]);

after Click on a button

You can look at my records and explain them in detail, but they are in Chinese.
I will upload a reproducing case to my github later.
detail

[philipp-spiess]

Array.prototype.push([]);

Will mutate the prototype of all arrays in your application and as such you are effectively breaking all array operations. This is not a React issue. React requires the Array prototype to be in tact.

// If you run this anywhere:
Array.prototype.push([]);
// Every array will be broken
const emptyArray = [];
// This returns `[]` although it should be undefined.
emptyArray[0]; 

We recommend that you avoid modifications to global prototypes.

[aa875982361]

@philipp-spiess I think so too
This problem generally does not appear，
i feel it can improve, with adding parameter check to catch error

[philipp-spiess]

@aa875982361 What is the use case for having Array.prototype.push([]); in your code? I think this should be removed to avoid issues with any other module that you're using.

[aa875982361]

I use this code inadvertently. I found that it can lead to bugs.The program cannot continue to be used. I now have removed this code.

but I don't think this is reasonable, just check whether the parameter is empty,even if only in the internal call

[philipp-spiess]

but I don't think this is reasonable, just check whether the parameter is empty,even if only in the internal call

We can not guard against every possible change to global objects. In JavaScript, it's possible to rewrite all prototype methods, not only for arrays but also strings, objects, HTML elements, etc. It would be totally out of the scope of React to verify that such a modification occurred and warn about the implications.

If you have an idea how this can be done with a reasonable amount of code in React development builds, I'm sure that the React team will consider accepting a contribution.

[aa875982361]

We can not guard against every possible change to global objects.In JavaScript, it's possible to rewrite all prototype methods, not only for arrays but also strings, objects, HTML elements, etc.

I didn't think about that before.
But i don't think it 's resonable that you used the function (extrctEvents) without checking.
May i suggest that we can check parameter before using.
Thanks for your time.

  //https://github.com/facebook/react/blob/master/packages/events/EventPluginHub.js
    var possiblePlugin = plugins[i]; 
	// check parameter  before using
    if (possiblePlugin && typeof possiblePlugin.extractEvents === 'function') {
      
      var extractedEvents = possiblePlugin.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
      if (extractedEvents) {
        events = accumulateInto(events, extractedEvents);
      }
    }

[gaearon]

We'd have to do this in every single function that uses arrays. That's not really acceptable.

[aa875982361]

Thanks you !
I get it.
I don't know if it's because of my habit. I like to check whether the functions is undefined before I use functions of variables