default import does not work properly in ESM context

[mihkeleidast]

Currently, when trying to use react-responsive in an ESM context (or through an intermediate library that has both CJS and ESM outputs), the default import in ESM is not the MediaQuery component, rather it's an object with a default property.

Reproduction

See https://github.com/mihkeleidast/react-responsive-esm-demo

Steps:

1. Checkout the repo
   2, Run node test.js, see that [Function: MediaQuery] is logged to console (this is CJS usage)
2. Run node test.mjs, see that the following is logged to console (this is ESM usage):

{
  Context: <ref *1> {
    '$$typeof': Symbol(react.context),
    _currentValue: undefined,
    _currentValue2: undefined,
    _threadCount: 0,
    Provider: { '$$typeof': Symbol(react.provider), _context: [Circular *1] },
    Consumer: { '$$typeof': Symbol(react.context), _context: [Circular *1] },
    _defaultValue: null,
    _globalName: null,
    _currentRenderer: null,
    _currentRenderer2: null
  },
  default: [Function: MediaQuery],
  toQuery: [Function: toQuery],
  useMediaQuery: [Function: useMediaQuery]
}

Context

I am trying to build an intermediate library that uses react-responsive, has both ESM and CJS outputs so it could be used in both contexts.

Rollup part of this is documented here, but does not seem to have any traction: rollup/rollup#5265

See also the TypeScript documentation about this problem: https://www.typescriptlang.org/docs/handbook/modules/appendices/esm-cjs-interop.html#library-code-needs-special-considerations

Solutions

1. Workaround - provide a named export of MediaQuery in addition to the default export. Folks running into this could then use the named imports instead of default import. named imports have better compatibility in CJS and ESM. This is the easiest option & I will file a PR for this soon. But it is also more of a workaround and not a complete solution.
2. Do a breaking change that replaces the default export with a named export, to ensure more compatibility with both CJS and ESM.

[mihkeleidast]

Okay, seems that maybe there isn't actually an issue with this library, I seem to have run into webpack/webpack#16125... in any case, using named exports/imports does work around such issues, so perhaps moving that way would still make sense?