react-idle-timer: mjs file breaking CRA on react-idle-timer v5 release

Bug information

Idle timer seems to have import and module export as mjs file. It is breaking react application (made using JS based Create React App v4.0.3).

Affected Module

• Version: react-idle-timer@5.0.0-rc.11

Describe the bug

I am using application with Create React App v4.0.3 which is in Javascript (not TS). When I import the new react-idle-timer and try to run the application. I am getting following error:

Failed to compile ./node_modules/react-idle-timer/dist/index.mjs Can’t import the named export ‘createContext’ from non EcmaScript module (only default export is available)

It seems to fail in compilation due to the following lines in react-idle-timer:

"exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    }
  },
 "module": "./dist/index.mjs",

when changed to:

"exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts"
    }
  },
 "module": "./dist/index.js",

then the package works as intended.

To Reproduce

Steps to reproduce the behavior:

1. npx create-react-app my-app
2. CRA only comes with latest react-scripts, so install 4.0.3 version, npm install --save --save-exact react-scripts@4.0.3 or yarn add --exact react-scripts@4.0.3
3. Install idle timer: npm i react-idle-timer@5.0.0-rc.11
4. Import the package: import { useIdleTimer } from 'react-idle-timer';
5. run npm start or yarn start
6. See error.

Maybe different error based on imports but same mjs file error:

index.js:1 Uncaught Error: Module parse failed: Unexpected token (632:14)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|   B(() => {
>     _.current?.cancel && _.current.cancel(), a > 0 ? _.current = Be(L, a) : u > 0 ? _.current = ve(L, u) : _.current = L;
|   }, [L, u, a]);
| 
    at Object../node_modules/react-idle-timer/dist/index.mjs

Expected behavior

It requires a good amount of effort just to use just mjs file. I think there is no reason that .mjs extension is needed to indicate a ESM file.

Screenshots

System Information (please complete the following information)

• OS: macOS Monterey v12.2 M1
• Device: Desktop
• Browser Vendor: chrome
• Browser Version: Version 98.0.4758.102 (Official Build) (arm64)

Additional context

Add any other context about the problem here.