Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
danielvdm2000 opened this issue Jun 18, 2024 · 0 comments

Comments

@danielvdm2000
Copy link

  • 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant