React-beautiful-dnd: core-js 2 as dependency

Created on 24 Nov 2019  路  11Comments  路  Source: atlassian/react-beautiful-dnd

Expected behavior

Polyfills should not be included in library, there should be an instruction what is expected to be included in actual app to support given browser.

Actual behavior

App expects core-js 2 as a dependency. That breaks apps based on core-js 3.

Steps to reproduce

If your react app polyfills look somewhat like that:

import 'core-js/stable';

import 'regenerator-runtime/runtime';

Then compilation will fail.

Suggested solution?

Remove polyfills from bundle.

What version of React are you using?

16.10.2

What version of react-beautiful-dnd are you running?

11.0.3

good first issue 鉂わ笍 help wanted 馃憢 idea 馃

Most helpful comment

Users should provide own polyfills. Though the library may omit usage of a set of functions and implement their loose versions for specific need. I would prefer to drop core-js. rbd is the only lib in my app with core-js in dependencies. And one of a few last commonjs modules.

All 11 comments

I'm experiencing the same issue using webpack with core-js 3

@Bielik20 would you mind sharing your babel settings? I'm trying to reproduce on a webpack 4 installation from scratch

@carlosagsmendes I am using nrwl to manage my monorepo. It is default config from there.

I'm not sure what the best approach for us should be. Any thoughts @TrySound @theKashey

There are two moment - safety and the ease of use. core-js 2/3 is a really big problem and the number affected users would grow, so you have to remove it.
However, it should be a breaking change, or __existing installations would break__.

In short:

  • don't include polyfills. As well as ponyfills*
  • test and document which ones are required for you. You can use usage-plugin in debug more to get a list of polyfills which are _potentially_ required by this library. Keep in mind - that list would be different for core-js2 and core-js3
  • after knowing which polyfills are really required you might use ponyfills for some of them (like using lodash instead of Array.methods)
  • no further talks before the list of polyfills is known (I'll provide it in a hour)

Ideally, we are not pollyfilling anything. My understanding is that we are only using ponyfills

From the code - no, you are not. At least it's not documented - https://github.com/atlassian/react-beautiful-dnd/search?q=runtime-corejs2&unscoped_q=runtime-corejs2 and the only expected polyfills are Number.isInteger and Object.values, which could be ponyfilled... but you can't import thst ponyfill from some specific core-js version(though runtime-corejs2).

core-js 3 polyfills required for RBDND for the IE11 target:

| File | Required |
| ------------- |:-------------:|
| invariant.js | es.object.to-string,es.regexp.to-string |
| dev-warning.js | es.string.trim, es.string.replace |
| native-with-fallback.js | es.object.values,es.array.find-index,es.array.find,es.array.slice,es.object.to-string,es.array.iterator,web.dom-collections.iterator |
| index.js |es.weak-map,es.object.to-string,es.string.iterator,es.array.iterator,web.dom-collections.iterator,es.object.get-own-property-descriptor |

For esmodules target required:

| File | Required |
| ------------- |:-------------:|
| dev-warning.js | es.string.trim,es.string.replace |
| native-with-fallback.js | es.array.iterator,web.dom-collections.iterator |

Users should provide own polyfills. Though the library may omit usage of a set of functions and implement their loose versions for specific need. I would prefer to drop core-js. rbd is the only lib in my app with core-js in dependencies. And one of a few last commonjs modules.

Yep. _"omit usage of a set of functions"_ is one of the reasons why I tend not to use Object.values

@TrySound happy for a PR to make this happen! It was my understanding that we did not polyfill anything (only ponyfills). If we are polyfilling that is bad news.

Was this page helpful?
0 / 5 - 0 ratings