Uncaught TypeError: Failed to set an indexed property [0] on 'CSSStyleDeclaration': Indexed property setter is not supported.

[Zsl8]

idk what is happening and why i'm getting this in the BlurText component it seems like the problem is in the springs styles

<p
      ref={ref}
      className={className}
      style={{ display: 'flex', flexWrap: 'wrap' }}
    >
      {springs.map((props, index) => (
        <AnimatedSpan
          key={index}
          style={{
            ...props,
            display: 'inline-block',
            willChange: 'transform, filter, opacity',
          } as unknown as { [key: string]: SpringValue<string | number> }}
        >
          {elements[index] === ' ' ? '\u00A0' : elements[index]}
          {animateBy === 'words' && index < elements.length - 1 && '\u00A0'}
        </AnimatedSpan>
      ))}
    </p>

i tried to debug the problem but didn't get any good results the styles are pefrect and nothing is wrong with them

[DavidHDev]

Incomplete issue, not enough details. You need to provide details such your component usage, your React version, the full error message, a proper title. Otherwise you can't expect to get help for this.

[Zsl8]

react version is 19 and this is how i'm using it

<BlurText
  text="Isn't this so cool?!"
  delay={150}
  animateBy="letters"
  direction="top"
  onAnimationComplete={() => console.log('Animation complete')}
/>

[TristanLavalou]

Hello @DavidHDev, I'm facing this issue too using the BlurText component.

I'm using it as proposed on the website, without modifying anything. The component is used below a MaterialUI theme, one div and a MUI box. Here is an extract :

  return (
    <ThemeProvider theme={theme}>
      <div className='content'>
          <Box>
            <BlurText
              text="Sample"
              delay={150}
              animateBy="words"
              direction="top"
              onAnimationComplete={handleAnimationComplete}
              className="text-2xl mb-8"
            />
          </Box>
      </div>
    </ThemeProvider>

My project is using React v18.3.1 and Typescript v5.6.2.

Note that it seems to be specific on this component, cause SplitText is currently working in my project.
After some investigations, error is about props structure type in AnimatedSpan style prop.

Glad to help you if you need more details on this bug.

[Zsl8]

I remade the component using different library but with less options if you are interested

[DavidHDev]

Converted the entire component to use framer motion instead, keeping all the same options here 4831d7b