"Can't import the named export" with TypeScript and yarn

[jura120596]

I try add library: import CountUp from "react-countup"; and import {default as CountUp} from "react-countup"; But i got error:

Failed to compile.
./node_modules/react-countup/build/index.mjs
Can't import the named export 'CountUp' from non EcmaScript module (only default export is available)
error Command failed with exit code 1.

[ekatioz]

I am having a similar problem when running jest tests.

SyntaxError: Named export 'CountUp' not found. The requested module 'countup.js' 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 'countup.js';
const { CountUp: CountUp$1 } = pkg;

[wangxm87]

i have the same question

[mmarkelov]

Sorry guys! I just exclude esm build in new version - so it should be fine, please let me know if you still have problems. Thanks!

[tien]

Wait, is this the right fix? Now ESM build is broken on latest Vite build with Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Searching around and this actually look like a bug with very outdated & deprecated build tool that have bug handling ESM module & package.json with the newer exports fields.

Some examples:

https://github.com/facebook/react/issues/20235#issuecomment-1018305042 https://github.com/pixijs/pixijs/issues/8554#issuecomment-1302026342 https://github.com/vuejs/pinia/issues/675#issuecomment-1890981568

[mmarkelov]

@tien Sorry, I didn't have much time to investigate the reason why it was broken. I'm thinking about the best way to handle it... I guess that I could include esm module back and publish new pre release 7, I would like to investigate the whole build directory, which is published through npm, cause I think that some of the files are unnecessary there. And after some period of time it can be latest release with updated readme. That's my thoughts

[tien]

No worries, I can just pin to version 6.5.1 for now. I don't think the library need to support deprecated build tools with bugs (i.e Webpack 4, cra, etc), which I suspect is the reason for the bugs people in this issue are getting.

But it does make sense to do this as part of version 7, because it's technically a broken change since outdated build tool are no longer supported :p

[amiller-gh]

Just a heads up that we've needed to use patch-package in our app to tweak the definitions file to support default exports:

diff --git a/node_modules/react-countup/build/index.d.ts b/node_modules/react-countup/build/index.d.ts
index 6fb33d8..48304bc 100644
--- a/node_modules/react-countup/build/index.d.ts
+++ b/node_modules/react-countup/build/index.d.ts
@@ -1,3 +1,4 @@
-export { default } from './CountUp';
+import { default as CountUp } from './CountUp';
 export type { CountUpProps } from './CountUp';
 export { default as useCountUp } from './useCountUp';
+export = CountUp;

This is with a relatively modern version of vite (4.4.9, one major behind) and typescript (5.2.2, 2 minors behind latest).

Annoyingly, despite Typescript's own documentation, using esModuleInterop: true didn't allow our build to resolve the default export, and the older (but apparently more well supported?) export = CountUp syntax worked.

[diffidentDude]

Just wanted to say I've had the same issue, using webpack 5 as a bundler. Pinning to 6.5.1 for now.