🐞 Importing useIdleTimer throws error during compilation with "type": "module"

[divyeshsachan]

What happened?

Importing useIdleTimer throws error during compilation with "type": "module" in package.json

import { useIdleTimer } from 'react-idle-timer';

Sample package.json

{
  "private": true,
  "sideEffects": false,
  "type": "module",
  "version": "1.0.0",
  "scripts": {
    ...
  ...
}

Error during compilation

import pkg from 'react-idle-timer';
const { useIdleTimer } = pkg;

also fails as package doesn't have any default export.



### Reproduction Steps

```bash
1. Set "type": "module" in package.json
2. import { useIdleTimer } from 'react-idle-timer'; into the component
3. Compile

Relevant log output

No response

Screenshots or Additional Context

No response

Module Version

5.7.2

What browsers are you seeing the problem on? Select all that apply.

No response

What devices are you seeing the problem on?

No response

Verification

• I have checked for existing closed issues and discussions.

[SupremeTechnopriest]

What are you using to build your project? Can you post your full package.json?

[divyeshsachan]

Sure,

here is our package.json

{
  "private": true,
  "sideEffects": false,
  "type": "module",
  "version": "1.0.0",
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "npm run sass",
    "dev": "concurrently \"npm run sass:watch\" \"remix dev -c \\\"node server.js\\\"\"",
    "sass": "gulp css",
    "sass:watch": "gulp watch",
    "start": "cross-env NODE_ENV=production node ./server.js",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/css-bundle": "^1.19.1",
    "@remix-run/express": "^1.19.1",
    "@remix-run/node": "^1.19.1",
    "@remix-run/react": "^1.19.1",
    "compression": "^1.7.4",
    "cross-env": "^7.0.3",
    "dateformat": "^5.0.3",
    "dotenv": "^16.0.2",
    "express": "^4.18.2",
    "memjs": "^1.3.0",
    "moment": "^2.29.4",
    "morgan": "^1.10.0",
    "node-cache": "^5.1.2",
    "query-string": "^7.1.3",
    "rc-util": "^5.35.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-idle-timer": "^5.7.2",
  },
  "devDependencies": {
    "@remix-run/dev": "^1.19.1",
    "@remix-run/eslint-config": "^1.19.1",
    "@types/compression": "^1.7.2",
    "@types/express": "^4.17.17",
    "@types/morgan": "^1.9.4",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "chokidar": "^3.5.3",
    "concurrently": "^7.6.0",
    "eslint": "^8.38.0",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^5.0.0",
    "gulp-sass": "^5.1.0",
    "merge-stream": "^2.0.0",
    "nodemon": "^2.0.20",
    "npm-run-all": "^4.1.5",
    "sass": "^1.56.1",
    "typescript": "^5.0.4"
  },
  "engines": {
    "node": ">=14.0.0"
  }
}

[divyeshsachan]

Error occurs during compilation, upon adding "type": "module" in package.json

Not able to use IdleTimer at all due to this, as its import throws error.

[SupremeTechnopriest]

This might be because of remix not supporting the exports field in package.json. Can you try to import the esm directly?

import { useIdleTimer } from 'react-idle-timer/dist/index.esm.js'

[Haraldson]

@SupremeTechnopriest

[2] ✘ [ERROR] Could not resolve "react-idle-timer/dist/index.esm.js"
[2] 
[2]     app/hooks/idle-timeout.js:14:29:
[2]       14 │ import { useIdleTimer } from 'react-idle-timer/dist/index.esm.js'
[2]          ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[2] 
[2]   The path "./dist/index.esm.js" is not exported by package "react-idle-timer":
[2] 
[2]     node_modules/react-idle-timer/package.json:8:13:
[2]       8 │   "exports": {
[2]         ╵              ^
[2] 
[2]   The file "./dist/index.esm.js" is exported at path ".":
[2] 
[2]     node_modules/react-idle-timer/package.json:12:16:
[2]       12 │       "import": "./dist/index.esm.js"
[2]          ╵                 ~~~~~~~~~~~~~~~~~~~~~
[2] 
[2]   Import from "react-idle-timer" to get the file "node_modules/react-idle-timer/dist/index.esm.js":
[2] 
[2]     app/hooks/idle-timeout.js:14:29:
[2]       14 │ import { useIdleTimer } from 'react-idle-timer/dist/index.esm.js'
[2]          │                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[2]          ╵                              "react-idle-timer"
[2] 
[2]   You can mark the path "react-idle-timer/dist/index.esm.js" as external to exclude it from the bundle, which will remove this error.

This can be fixed by adding serverDependenciesToBundle: ['react-idle-timer'] in remix.config.js, but I’d rather this module just worked more conventionally. /cc @divyeshsachan

[divyeshsachan]

@Haraldson, Yes, I had also resolved it by adding it to serverDependenciesToBundle in remix.config.js.

@SupremeTechnopriest, It'd be very helpful if the issue is fixed in the package itself.

[SupremeTechnopriest]

I slated some time at the beginning of Q2 to address open issues 👍

[csantos1113]

👋 @SupremeTechnopriest - We we navigating through PRs and found that #352 fixes this issue.

Could you please take a look at it and see if we can be merged? 🙏

appreciate your work! 🙏

[SupremeTechnopriest]

@csantos1113 Sure I will review it after work today.