/* 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:
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.
use-deep-compare-effect
version: 1.8.1node
version: v22.3.0npm
version: 10.8.1Relevant code or config
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:
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.