Going beyond the docs: Story of fixing the third-party code

Modern application development is less about (re)inventing the things and more about putting together pieces of code created by somewhere else. Especially in the world of JavaScript frontend development, there is an NPM package for basically anything. Such an approach has its pros and cons, but I don't want to broadly discuss either of them here. Instead, just imagine this situation: You are trying to make something work, you do as the docs say you should do, but there is something special in your setup that wasn't taken into account and because of that your solution keeps failing. Now what? You can: flee - abandon the whole idea and just try something else freeze - open issue in the library's repo and hope someone will fix it eventually fight - identify the problem and do the fix yourself Today, I want to share my story of dealing with one such issue. May it encourage you to fight your own battles. If you stick with software development, many of them lie ahead on your way. The Problem I was trying to integrate Open Props CSS styles with my Nuxt project. This is not that hard, but due to the way how Open Props work, you also need to include and enable PostCSS plugin called postcss-jit-props and supply it with the data object from open-props package to allow values being injected correctly. I included the dependencies, set everything up and the demo worked flawlessly. You can check here. Everything was good until my solution met different dependency in the same project. Namely I was including @nuxt/fonts, a module that simplifies working with external fonts in Nuxt projects. Suddenly, I started getting errors causing the whole app crashing on startup: ERROR Internal server error: [postcss] Cannot read properties of undefined (reading 'source') 22:25:52 Plugin: vite:css File: C:/Programming/Git/nuxt-ignis/.nuxt/nuxt-fonts-global.css:undefined:NaN at Object.Once (C:\Programming\Git\nuxt-ignis\node_modules\.pnpm\postcss-jit-props@1.0.15_postcss@8.4.49\node_modules\postcss-jit-props\index.js:130:88) at LazyResult.runOnRoot (C:\Programming\Git\nuxt-ignis\node_modules\.pnpm\postcss@8.5.1\node_modules\postcss\lib\lazy-result.js:327:23) at LazyResult.runAsync (C:\Programming\Git\nuxt-ignis\node_modules\.pnpm\postcss@8.5.1\node_modules\postcss\lib\lazy-result.js:258:26) at LazyResult.async (C:\Programming\Git\nuxt-ignis\node_modules\.pnpm\postcss@8.5.1\node_modules\postcss\lib\lazy-result.js:160:30) at LazyResult.then (C:\Programming\Git\nuxt-ignis\node_modules\.pnpm\postcss@8.5.1\node_modules\postcss\lib\lazy-result.js:404:17) The Solution The first thing you naturally start doing in such a case is googling/chatGPTing. ChatGPT is less suitable for this, because many cutting-edge technologies of modern web development are vastly unknown to its language model. So, it often fails to deliver reasonable answers unless you force it to go through the up-to-date docs. I have found that a much better source of relevant information are GitHub issues and discussions in target repository. There is always a chance someone else already had a similar problem and asked there. Direct search seems to be the most efficient. Using this, I was able to identify the issue. There is an auto-generated CSS file produced by @nuxt/fonts (.nuxt/nuxt-fonts-global.css). This file can be empty, if you don't load any of external fonts globally but only use them in certain components. On the other hand, during the PostCSS processing in Nuxt build, the underlaying Vite server just takes all CSS files are feeds them to registered plugins. And it turned out postcss-jit-props simply does not expect an empty file with no CSS "node" included. An internal call node.first.source for sure fails, if node.first is undefined. Okay, we know the problem. Now what? I spent a considerable amount of time trying to re-configure my project. I was trying to explain to my Nuxt build it should just skip nuxt-fonts-global.css. Despite some promising efforts (and quite a lot distracting and incorrect suggestions by ChatGPT), I gave up after a while. I learned a thing or two about what is happening under the hood, but it got me nowhere near the solution. So, what can be done? Maybe I should reach for the @nuxt/fonts team and discuss whether it is even a good idea to include an empty CSS file? But on the other hand, what if somebody out there also throws in their empty CSS? It can't be ruled out. No, the better solution would be to learn the plugin to deal with it. The fix itself was not that hard. It was literally just about adding two null checks: To make sure it works as I think, I added a new test, so the whole commit is a little bit larger. What made me worried was the repository looked rather abandoned with last changes made quite some time ago. So along with making a pull request there, I also forked my own version, applied the

Mar 30, 2025 - 16:03

Going beyond the docs: Story of fixing the third-party code

Modern application development is less about (re)inventing the things and more about putting together pieces of code created by somewhere else. Especially in the world of JavaScript frontend development, there is an NPM package for basically anything. Such an approach has its pros and cons, but I don't want to broadly discuss either of them here.

Instead, just imagine this situation: You are trying to make something work, you do as the docs say you should do, but there is something special in your setup that wasn't taken into account and because of that your solution keeps failing. Now what? You can:

flee - abandon the whole idea and just try something else
freeze - open issue in the library's repo and hope someone will fix it eventually
fight - identify the problem and do the fix yourself

Today, I want to share my story of dealing with one such issue. May it encourage you to fight your own battles. If you stick with software development, many of them lie ahead on your way.

The Problem

I was trying to integrate Open Props CSS styles with my Nuxt project. This is not that hard, but due to the way how Open Props work, you also need to include and enable PostCSS plugin called postcss-jit-props and supply it with the data object from open-props package to allow values being injected correctly.

I included the dependencies, set everything up and the demo worked flawlessly. You can check here.

Everything was good until my solution met different dependency in the same project. Namely I was including @nuxt/fonts, a module that simplifies working with external fonts in Nuxt projects.

Suddenly, I started getting errors causing the whole app crashing on startup:

ERROR  Internal server error: [postcss] Cannot read properties of undefined (reading 'source')                                                   22:25:52  
  Plugin: vite:css
  File: C:/Programming/Git/nuxt-ignis/.nuxt/nuxt-fonts-global.css:undefined:NaN
      at Object.Once (C:\Programming\Git\nuxt-ignis\node_modules\.pnpm\postcss-jit-props@1.0.15_postcss@8.4.49\node_modules\postcss-jit-props\index.js:130:88)
      at LazyResult.runOnRoot (C:\Programming\Git\nuxt-ignis\node_modules\.pnpm\postcss@8.5.1\node_modules\postcss\lib\lazy-result.js:327:23)
      at LazyResult.runAsync (C:\Programming\Git\nuxt-ignis\node_modules\.pnpm\postcss@8.5.1\node_modules\postcss\lib\lazy-result.js:258:26)
      at LazyResult.async (C:\Programming\Git\nuxt-ignis\node_modules\.pnpm\postcss@8.5.1\node_modules\postcss\lib\lazy-result.js:160:30)
      at LazyResult.then (C:\Programming\Git\nuxt-ignis\node_modules\.pnpm\postcss@8.5.1\node_modules\postcss\lib\lazy-result.js:404:17)

The Solution

The first thing you naturally start doing in such a case is googling/chatGPTing. ChatGPT is less suitable for this, because many cutting-edge technologies of modern web development are vastly unknown to its language model. So, it often fails to deliver reasonable answers unless you force it to go through the up-to-date docs. I have found that a much better source of relevant information are GitHub issues and discussions in target repository. There is always a chance someone else already had a similar problem and asked there. Direct search seems to be the most efficient.

Using this, I was able to identify the issue.

There is an auto-generated CSS file produced by @nuxt/fonts (.nuxt/nuxt-fonts-global.css). This file can be empty, if you don't load any of external fonts globally but only use them in certain components.

On the other hand, during the PostCSS processing in Nuxt build, the underlaying Vite server just takes all CSS files are feeds them to registered plugins. And it turned out postcss-jit-props simply does not expect an empty file with no CSS "node" included. An internal call node.first.source for sure fails, if node.first is undefined.

Okay, we know the problem. Now what?

I spent a considerable amount of time trying to re-configure my project. I was trying to explain to my Nuxt build it should just skip nuxt-fonts-global.css. Despite some promising efforts (and quite a lot distracting and incorrect suggestions by ChatGPT), I gave up after a while. I learned a thing or two about what is happening under the hood, but it got me nowhere near the solution.

So, what can be done? Maybe I should reach for the @nuxt/fonts team and discuss whether it is even a good idea to include an empty CSS file? But on the other hand, what if somebody out there also throws in their empty CSS? It can't be ruled out. No, the better solution would be to learn the plugin to deal with it.

The fix itself was not that hard. It was literally just about adding two null checks:

To make sure it works as I think, I added a new test, so the whole commit is a little bit larger.

What made me worried was the repository looked rather abandoned with last changes made quite some time ago. So along with making a pull request there, I also forked my own version, applied the change there and published as an alternative NPM package. I wanted to make sure I could continue as soon as possible.

The Aftermatch

Despite not being actively developed, the repository is being monitored and maintained. Afterall, it should be backed by Google, so why not? It only took two days before my pull request was accepted and new version 1.0.16 of postcss-jit-props was released.

So, I could switch back to the "official" version again to be sure I am not missing any important updates in the future. This was a pleasant surprise.

And that's it! This was my story to share. It ain't much, but it was honest webdev's work. I hope I have shown you it is not that hard to go beyond the scope of your own project and that you can not only wait for someone else's help, but also go and be your own help.

Good luck with your DEV journey and feel free to share your little or big success stories in the comments below.