bash-3.2$ pnpm add react-use
dependencies:

• react-use 17.4.0
  bash-3.2$
  bash-3.2$ echo 'import {useDefault} from "react-use"' > a.mjs
  bash-3.2$
  bash-3.2$ node a.mjs
  file:///private/tmp/a.mjs:1
  import {useDefault} from "react-use"
  ^^^^^^^^^^
  SyntaxError: Named export 'useDefault' not found. The requested module 'react-use' is a CommonJS module, which may not support all module.exports as named exports.
  CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-use';
const {useDefault} = pkg;

at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
at async loadESM (node:internal/process/esm_loader:88:5)
at async handleMainPromise (node:internal/modules/run_main:61:12)

I also faced this problem. Is there a temporary solution?

I use a setup where react-use is imported by both a node module (node 16) and nextjs - node cannot use named exports reliably for CJS and if i use the default export format, then nextjs' build fails saying that there isn't a default export (because there isn't, seeing how it's node's interop that adds it). Using a namespace import leads to Node not recognizing all default re-exports.

Direct file import such as

import useUpdateEffect from 'react-use/lib/useUpdateEffect.js';

leads to

{ default: [Function: useUpdateEffect] }

Needless to say, ESM CJS interop is a mess...

I'm getting the same issue. I'm updating my app to react@18 and next@13, which automatically supports properly-packaged esm packages. However, as stated by the OP, a .mjs file can't import a .js file even though its contents are ESM. Is it possible to export the esm version as .mjs files?

edit:
It seems that it's possible to add a package.json with { type: module } in the dist/esm/ directory, but I'm not sure how that would affect existing projects that are using the current esm exports.

This seems to happen to me to using Remix. Everything should be ESM, but I still get server-side errors trying to import the library.

I'll have to move over to some other hooks library.

Just found this issue. In case it helps somebody else, here's my workaround until the underlying problem is resolved:

import useKeyLib from "react-use/lib/useKey.js";
const useKey = useKeyLib.default;

I have the same issue.
I made a quick reproduction with remix, using the create-remix, then I added react-use.
Any recommended import is failing to compile. (repro: https://github.com/ThibautMarechal/react-use-in-remix)

I am also experiencing the issue when using Remix. This import error is a real downside to using this awesome library. I hope there will be a fix soon.

Also, for anyone using TypeScript and Remix, here's another possible workaround that extends @msurdi 's own:

• create a file in your project into which you'll import the hooks you need from react-use, patch their default export issues and then export the hooks for all your components to use.
• Patch the hooks like this:

import useKeyPressEventLib from 'react-use/lib/useKeyPressEvent'
export const useKeyPressEvent = (useKeyPressEventLib as any).default as typeof useKeyPressEventLib

For Vite-based projects (& Remix), this configuration should also solve the issue:

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig((env) => {
  return {
    // […]
    ssr: {
      noExternal: ["react-use"],
    },
    optimizeDeps: {
      include: ["react-use"],
    },
  };
});

For reference: https://publint.dev/[email protected]