Add interop option to CommonJS output configuration

[hidemire]

Background

After migrating from version 0.88.0 to 0.99.0, the following error appeared:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at createFiberFromTypeAndProps (react-dom-client.development.js:4259:1)
    at createFiberFromElement (react-dom-client.development.js:4273:1)
    at reconcileChildFibersImpl (react-dom-client.development.js:7879:1)
    at react-dom-client.development.js:8057:1
    at reconcileChildren (react-dom-client.development.js:8621:1)
    at updateFunctionComponent (react-dom-client.development.js:8914:1)
    at beginWork (react-dom-client.development.js:10522:1)
    at runWithFiberInDEV (react-dom-client.development.js:1519:1)
    at performUnitOfWork (react-dom-client.development.js:15132:1)
    at workLoopSync (react-dom-client.development.js:14956:1)

During the investigation, we discovered that the CJS version of react-virtualized-auto-sizer is a transpiled version of ESM and causes the default export to be nested under a .default property instead of being exposed directly.

As a result, when rendering the AutoSizer component, the ESM wrapper is used, not the component itself.

This can also be seen in nivo-core.cjs.js:

a=require("react-virtualized-auto-sizer")
...
i.jsx(a, {
    defaultWidth: t,
    defaultHeight: n,
    children: function (e) {
        var t = e.width,
            n = e.height
        return i.jsx(S, {
            width: t,
            height: n,
            onResize: o,
            debounceResize: l,
            children: r,
        })
    },
})

Proposed Change

This pull request includes a small change to the conf/rollup.config.mjs file. The change adds the interop: 'auto' option to the output configuration for Rollup builds.

This change adds a runtime check that allows the module to be unwrapped correctly:

a = require('react-virtualized-auto-sizer')
...
function P(e) {
    return e && e.__esModule ? e : { default: e }
}
k = P(a)
...
i.jsx(k.default, {
    defaultWidth: r,
    defaultHeight: n,
    children: function (e) {
        var r = e.width,
            n = e.height
        return i.jsx(K, {
            width: r,
            height: n,
            onResize: o,
            debounceResize: l,
            children: t,
        })
    },
})

[vercel]

@hidemire is attempting to deploy a commit to the plouc's projects Team on Vercel.

A member of the Team first needs to authorize it.

[stale]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.