Skip to content

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

@danielvdm2000

Description

@danielvdm2000
  • use-deep-compare-effect version: 1.8.1
  • node version: v22.3.0
  • npm version: 10.8.1

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions