So I’ve started building a portfolio site for myself, gone with Astro as it’s now the cool new thing, so thought why not, was going to use Gatsby but this seems like the more performant solution and you have a lot of freedom with it (not tied in to a GQL CMS).
As I understand it, Astro is a solution that limits or somewhat completely takes JS out at build time once the static site is generated, which makes it incredibly fast. However to hydrate your components you add a client:load, client:visible etc to load hydrate your component in, which I understand, so you specify that you want JS to run on said component as it needs it, otherwise it’s just markup sitting there.
Now when it comes to installing React packages, like this one for example: react-simple-typewriter. It doesn’t seem to work as intended, is there something I’m missing or possibly have missed? My assumption is as I have provided one of the client: options, it should work. I’ve got an example here of it now working, maybe I’ve missed something or maybe Astro is still a little buggy. https://stackblitz.com/edit/github-l82kez?file=src/pages/index.astro
Just a note, I have tried this npm package in both CRA and Gatsby, both work fine and as intended, just astro seems broken.
Advertisement
Answer
Found out the issue was because this typewriter package didn’t work well with vite, tried in regular React with vite instead of webpack and got the same result. I believe it’s a module issue relating to that package in particular.