kentcdodds / use-deep-compare-effect

🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality
https://npm.im/use-deep-compare-effect
MIT License
1.88k stars 84 forks source link

Type definitions does not align when using native ESM in node v22.3.0 #66

Open danielvdm2000 opened 4 months ago

danielvdm2000 commented 4 months ago

Relevant code or config

/* Expected to work like this according to type definitions. (This is how it works when you build to CommonJS) */
import useDeepCompareEffect from "use-deep-compare-effect";

console.log(useDeepCompareEffect)
// [Function: useDeepCompareEffect]

// @ts-ignore
console.log(useDeepCompareEffect.default) 
// undefined

/* This is how it actually works. (When building to ESM) */
import useDeepCompareEffect from "use-deep-compare-effect";

console.log(useDeepCompareEffect)
/*
{
    default: [Function: useDeepCompareEffect],
    useDeepCompareEffectNoCheck: [Function: useDeepCompareEffectNoCheck],
    useDeepCompareMemoize: [Function: useDeepCompareMemoize]
}
*/

// @ts-ignore
console.log(useDeepCompareEffect.default) 
// [Function: useDeepCompareEffect] 

What you did: I'm trying to import this package into a node.js project that does server side rendering with React. This project outputs EMS using "module": "NodeNext" and "moduleResolution": "NodeNext" in the tsconfig.json.

What happened: The module successfully import the use-deep-compare-effect.cjs.js file that is specified in the "main" field on the package.json. The imported code does however not align with the type definition but rather looks like this:

{
    default: [Function: useDeepCompareEffect],
    useDeepCompareEffectNoCheck: [Function: useDeepCompareEffectNoCheck],
    useDeepCompareMemoize: [Function: useDeepCompareMemoize]
}

This results in a runtime error of useDeepCompareEffect not being a function.

Reproduction repository: https://github.com/danielvdm2000/use-deep-compare-effect-esm-import-error

This repository contains two folder. One builds to CommonJS and works. The other builds to ESM and does not work.

Problem description: Using default import in a project that build to ESM and uses Node 22 module resolution yields a result that does not align with the type definition.

Suggested solution: Align the type definition for ESM with the expected result with using default import.