Next.js: with-polyfills example doesn't work when changed to provide Object.assign

[Soundvessel]

Examples bug report

Example name

with-polyfills

Describe the bug

The pattern the example provides fails when altering to load the polyfill for Object.assign. Results in browser console error:

Uncaught Error: EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `assign`.
    at invariant (react-dom.development.js:55)
    at recomputePluginOrdering (react-dom.development.js:331)
    at Object.injectEventPluginOrder (react-dom.development.js:442)
    at eval (react-dom.development.js:5653)
    at eval (react-dom.development.js:18889)
    at Object../node_modules/react-dom/cjs/react-dom.development.js (dll_67211bc3619cb7902ee2.js:138)
    at __webpack_require__ (dll_67211bc3619cb7902ee2.js:21)
    at eval (index.js:32)
    at Object../node_modules/react-dom/index.js (dll_67211bc3619cb7902ee2.js:151)
    at __webpack_require__ (dll_67211bc3619cb7902ee2.js:21)

To Reproduce

Repo of altered example https://github.com/Soundvessel/nextjs-example-polyfill-issue

1. Copy with-polyfills example.
2. Update polyfills.js to provide polyfill for Object assign.

/* eslint no-extend-native: 0 */
// core-js comes with Next.js. So, you can import it like below
import assign from 'core-js/library/fn/object/assign'

// Add your polyfills
// This files runs at the very beginning (even before React and Next.js core)
console.log('Load your polyfills')

Object.prototype.assign = assign

1. Run example.

Expected behavior

No console error.

Screenshots

1. IE11 screenshot with the private project that alerted me that polyfill for Object.assign was required likely due to imported NPM. http://prntscr.com/la3uwa
2. Modified polyfills.js, the only modified file from cloned with-polyfills example to confirm bug since I can't supply code of my private project http://prntscr.com/la3v4n
3. Resulting console error with modified example matching that of my private project http://prntscr.com/la3vgq

System information

• OS: Windows 10 Pro
• Browser: Chrome & IE11
• Version of Next.js: "latest"

Additional context

This issue seems to pop up a lot. We really need better documentation on how to effectively polyfill issues with imported node_modules/NPMs without throwing the entire core-js library at it or resorting to custom babel configs.

[JH108]

I was getting the same error when trying to add the polyfills to the prototype like Object.prototype.entries = entries. When I changed it to just the class instead Object.entries = entries the error stopped occurring and everything began working as expected. I am not sure if this would be the best practice or not, hope it helps!

Here is my polyfill.js that is working:

import entries from 'core-js/fn/object/entries';
import values from 'core-js/fn/object/values';
import arrayIncludes from 'core-js/fn/array/includes';
import includes from 'core-js/library/fn/string/includes';
import find from 'core-js/fn/array/find';

if (!Array.find) {
    Array.find = find;
}
if (!Object.values) {
    Object.values = values;
}
if (!Object.entries) {
    Object.entries = entries;
}
if (!String.includes) {
    String.includes = includes;
}
if (!Array.includes) {
    Array.includes = arrayIncludes;
}

[tuoxiansp]

assign function is a static method of Object.

You should use Object.assign = assign instead.

[timneutkens]

@tuoxiansp you're right 😄

I guess you could update the example based on this issue.

[timneutkens]

Thanks @JH108 also

[tuoxiansp]

5814 @timneutkens Certainly😄