Enjoy the detours!

In the last few months, there were some big releases. ESLint v9 was one of them. Sadly, do to their new config approach, I was unable to upgrade Next.js. While waiting for Vercel to fix it, Tailwind CSS v4 and next-intl v4 were released. So I faced 4 big releases.

The first one I did was next-intl v4. They wrote a nice blog post before v4 was released. So you were able to prepare your codebase before the switch, which was great and worked very well and without problems. 👍

Next in line was Tailwind CSS v4. And with it, Tailwind-Merge v3. You need to upgrade them together. Because twMerge dropped tw v3 support. Basically, this worked flawlessly. But some adjustments needed to be done. I use the reset.css from Josh W Comeau which needs special treatment when used with Tailwind CSS v4. Furthermore, I've added some custom styling to the html, body and h1...h6 tags. The result was that I had to wrap them to the correct layers for, so they will not collide with TWv4.

@import "./reset.css" layer(base);
@import "./custom.css" layer(base);

While using the codemod from TWv4 to migrate everything, it swallowed my custom classes. Which I had to add back manually. The new solution is with CSS only and is straightforward.

@utility border-image-highlight-b {
  border-width: (--tw-border-width);
  border-image: linear-gradient(
      to right,
      var(--tw-gradient-from),
      var(--tw-gradient-to)
    )
    1;
}

That's it. The rest was done via the codemod. :)

After the TWv4 upgrade was done, I continued with the Next.js v15 upgrade. Next.js also brought a codemod with it which did its job also very code. But it had an easy job here because I did nothing special. It changed some code in the code, which I had to clean up a bit afterward. Because it looked ugly and was too verbose.

Let's continue with the biggest pain, while I did the update on my #pelletyze codebase. ESLint v9. I was tried and erroring my way through the process but the documentation on both sides, Next.js and ESLInt were not so user-friendly then for the other codebases. Sure, if you just use ESLint, you are fine. But the combination with Next.js was a bit of a pain in the ass. Therefore, I don't like the look of the new flat config, especially the fix Next.js needed to bring in, to get everything to work. I hope this will improve in the future.

Before or after you upgrade, delete the .next folder. I had seen it much earlier to save some sanity. Because every lint run failed, and because there was some old code in it. Which gave me this error: a.getScope is not a function. After this issue was solved, I needed to add some packages because Next.js was not installing them by itself, thous it depends on them for linting. 🤷 These packages are: eslint-plugin-react and eslint-plugin-react-hook. This all happened on my second try. On the first one, a stopped after 2hrs and watched Severance. On the next day, I stared from scratch. I've installed a new test project with create-next-app and copied the important ESLint config stuff. Then I stepped my way through my old config. After I solved the major issues, the rest followed effortless. I had eslint-prettier installed, which was easy to put into the new config. And then there were some rules for next-intl, which was also just copy pasta into the new config.

Yesterday evening, I got to bed with a good feeling. Because I was done with the big update and I can now continue on my roadmap to the first public release of the #pelletyze app.

Man, what a huge update post. :) And the first one, completely written while traveling by train. I hope that someone finds it, and it will help to solve some issues on their side.

Now I've earned me some episode of Severance. 😎

---

13 of #100DaysToOffload
#pelletyze
Thoughts? Discuss...