mattboldt/typed.js

Next.js onStringTyped callback is run before string is typed when built with next build and run with next start

MicahParks opened this issue · 1 comments

Description

The onStringTyped callback is run before the first string is typed when built with (Next.js) next build and run with next start. It also runs after the first string is typed. I believe the backspace delay is also waited before typing the first string. This does not happen when run with next dev.

Steps to Reproduce

Use a typeSpeed that is slow enough to notice the time between the typing starts and typing stops for the first string. I've used 50 here.

useEffect(() => {
  const backspaceDelay = 3000
  const typedStrings = [
    "string 1",
    "string 2",
    "string 3",
    "string 4",
    "string 5",
  ]
  const typed = new Typed(el.current, {
    backDelay: backspaceDelay,
    backSpeed: 50,
    smartBackspace: false,
    strings: typedStrings,
    typeSpeed: 100,
    onStringTyped(arrayPos: number, self: Typed) {
      console.log("string typed")
    },
  })
  return () => {
    typed.destroy()
  }
}, [])

Expected behavior: The onStringTyped callback is not run until the after the first string is typed, identical to when I use next dev.

Actual behavior: The onStringTyped callback is run immediately on page load, before the first string has started typing. It is also run after the first string has completed typing. I believe the backspace delay is also waited before typing the first string.

Reproduces how often: 100% of the times I have tried.

Additional Information

I have observed this behavior in a React, Typescript, Next.js 14 project.

Logging out the arrayPos the console reveals that the values are 0, 1, 2, 3, 4, 5. Array position (aka index) 5 is out of range for the the given array of typedStrings. Again, this is only the case when running after a next build and next run. Not next dev.

The value is 0 immediately on page load. After the first string is typed, it's 1. My expectations would be starting at 0 after the first string is typed, which is the behavior when using next dev.