React Count Up library causes props to be undefined

[Albertyhu]

Astro Info

I got the following message from running astro info:

astro : The term 'astro' is not 
recognized as the name of a cmdlet, 
function, script file, or operable 
program. Check the spelling of the 
name, or if a path was included, 
verify that the path is correct and 
try again.
At line:1 char:1
+ astro info
+ ~~~~~
    + CategoryInfo          : Objec  
   tNotFound: (astro:String) [], C   
  ommandNotFoundException
    + FullyQualifiedErrorId : Comma  
   ndNotFoundException

If this issue only occurs in one browser, which browser is a problem?

firefox, chrome

Describe the Bug

I am using the React package called 'React CountUp".

It works fine in development mode, but on production mode, it crashes the entire app.

Here is where the library is used:

import CountUp from 'react-countup';

const CounterComponent = (props: CounterType) => {
	console.log("props.number: ", props.number)
	return props.number ? 
		<div className="count-outer relative block text-4xl text-[70px] leading-none text-white">
			<CountUp end={100} /> 
		</div>
		:
		<div>
		</div>
}

On production mode, the following error is thrown

"Runtime.UnhandledPromiseRejection - TypeError: Cannot read properties of undefined (reading 'number') "

If I get rid of the component, the app works just fine.

Also, I made sure that the component utilized client:visible directive in the Astro file.

The following Github link is the directory that has all the files responsible for rendering the component that uses React CountUp:

https://github.com/Albertyhu/uthan-template/tree/main/src/components/Home/funfact_section

What's the expected result?

React CountUp allows for an animated number to count up.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-eicrch?file=src%2Fpages%2Findex.astro,src%2Fcomponents%2Ffunfact_section%2Findex.astro,package.json,src%2Fcomponents%2Ffunfact_section%2Fcounter.tsx

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

It's a Vite bug: vitejs/vite#2139

As a workaround, you can do this:

// @ts-expect-error
const CountUpComponent = CountUp.default ?? CountUp

// ...

			<CountUpComponent end={props.number} /> 

[Albertyhu]

@bluwy Thanks for the suggestion, but unfortunately, it didn't work for me. I still got the same error.

[Albertyhu]

@bluwy I ended up just creating the counter from scratch on my own:
https://idyllic-crumble-facf8a.netlify.app/#FunFactSection

[dest92]

Same error