ERROR: Cannot assign to import "useEffectEvent" when importing useKeyPress hook

[theasteve]

Hi there, I'm currently getting the following error when compiling with Vite.js

  VITE v4.3.9  ready in 567 ms

  ➜  Local:   http://localhost:3036/vite-dev/
  ➜  press h to show help
✘ [ERROR] Cannot assign to import "useEffectEvent"

    node_modules/@uidotdev/usehooks/index.js:3:6:
      3 │ React.useEffectEvent = React.experimental_useEffectEvent;
        ╵       ~~~~~~~~~~~~~~

  Imports are immutable in JavaScript. To modify the value of this import, you must export a setter
  function in the imported file (e.g. "setUseEffectEvent") and then import and call that function
  here instead.

/Users/stevenaguilar/aviato/node_modules/esbuild/lib/main.js:1636
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
node_modules/@uidotdev/usehooks/index.js:3:6: ERROR: Cannot assign to import "useEffectEvent"
    at failureErrorWithLog (/Users/stevenaguilar/aviato/node_modules/esbuild/lib/main.js:1636:15)
    at /Users/stevenaguilar/aviato/node_modules/esbuild/lib/main.js:1048:25
    at /Users/stevenaguilar/aviato/node_modules/esbuild/lib/main.js:1512:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 6,
        file: 'node_modules/@uidotdev/usehooks/index.js',
        length: 14,
        line: 3,
        lineText: 'React.useEffectEvent = React.experimental_useEffectEvent;',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'Imports are immutable in JavaScript. To modify the value of this import, you must export a setter function in the imported file (e.g. "setUseEffectEvent") and then import and call that function here instead.'
        }
      ],
      pluginName: '',
      text: 'Cannot assign to import "useEffectEvent"'
    }
  ],
  warnings: []
}

Node.js v19.8.1

This is when I tried to install the useKeyPress. It seems as read from the error message

Imports are immutable in JavaScript. To modify the value of this import, you must export a setter
function in the imported file (e.g. "setUseEffectEvent") and then import and call that function
here instead.

Which is coming from the index.js files in the node_modules/@uidotdev/usehooks/index.js

import * as React from "react";

React.useEffectEvent = React.experimental_useEffectEvent;

However, no setter function was provided in the docs. Any idea how I can solve?

[theasteve]

package.json

{
  "dependencies": {
    "@headlessui/react": "^1.7.15",
    "@heroicons/react": "^2.0.18",
    "@rails/activestorage": "^7.0.6",
    "@tailwindcss/forms": "^0.5.3",
    "@uidotdev/usehooks": "^2.4.1-experimental.1",
    "activestorage": "^5.2.8-1",
    "antd": "^5.9.4",
    "apexcharts": "^3.44.0",
    "axios": "^1.4.0",
    "dompurify": "^3.0.6",
    "react": "^0.0.0-experimental-6c7b41da3-20231123",
    "react-currency-input-field": "^3.6.11",
    "react-dom": "^0.0.0-experimental-6c7b41da3-20231123",
    "react-router-dom": "^6.14.0",
    "tailwindcss": "^3.3.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.24",
    "tailwindcss": "^3.3.2",
    "vite": "^4.3.0",
    "vite-plugin-ruby": "^3.2.0"
  }
}

[kenjim83]

+1. Seeing this too in Vite/TS/React

Followed these install instructions: https://usehooks.com/usekeypress

[Cside]

+1

[schminkel]

+1

[medkhalilbk]

Any solution for NextJS build ?

Same Error

[reminjp]

Same error when I used useTimeout (This hook is also "experimental" like useKeyPress).

[timoxley]

Seems like this is just a convenience/cosmetic api thing, so IIUC it could be solved by just removing the React.useEffectEvent = React.experimental_useEffectEvent; line and replacing the references to React.useEffectEvent with React.experimental_useEffectEvent. Can we get someone to PR this change?