A screenshot of some Laravel user authentication boilerplate code

The festive break seems to be one of the times I manage to sit down and try something new. This year I’m taking the time to learn a little of the PHP framework Laravel, by way of re-writing an app I made last year with React and Firebase. That app always felt a little fragile to me, even though it succeeded at its basic functions – probably why I haven’t gone back to update it at any point in the last year. In my defence, that app was a learning exercise too, as I wanted to brush up on React for my day job before starting on a project at the start of 2022.

But safe to say, I’m much more comfortable with “the old ways” of PHP. I’ve been writing PHP in one form or another for close to 25 years, and even though I wouldn’t ever call myself an expert due to my on-off usage of it over the last decade, I do still have the basics of the language in my head. I can follow along and debug most code I’ve encountered just fine. PHP 8.x is different enough that I definitely need to follow some tutorials to write it, but there’s still a lot I recognise. Laravel itself has a lot of similar concepts to frameworks I’ve used in the past, it just does them with modern practices and architecture. Again, lots I’m unfamiliar with, but plenty that I recognise.

Apart from making I Painted This! more robust and supportable (in my view), one of the primary drivers for this exercise – other than as a convenient excuse for learning – is that the app primarily uses Twitter for authentication. That’s not something I’m comfortable with any more, so it’s got to go – and if I needed to do that change, I’d be as well giving it a complete overhaul!

I ran into an issue last night where I couldn’t generate a new React application template using npx create-react-app my-app. Annoyingly, this was only broken in the WSL environment of my personal PC, where it had been a while since I’d had to use the command. On Windows, where I’d never run the command before, it worked fine. The error I received was:

You are running create-react-app 4.0.2, which is behind the latest release (5.0.0).
We no longer support global installation of Create React App.

This was odd, as I’d never globally installed create-react-app. Never the less, I followed the error’s suggested fix of running npm uninstall -g create-react-app. Unsurprisingly, it didn’t work. What followed was an hour of trying various other “fixes” from around the internet – update NPM/clear the NPM cache/update NPX… none of which worked for me.

In the end I resorted to fixing the issue through brute force – finding wherever this mystery instance of create-react-app was lurking and purging it from my system with good old rm. Using a combination of find and rm I found 2 places containing binaries. Removing these directly didn’t fix the problem either, but working my way further up the diectory tree to their common parent directory did.

As it turns out, I’d accidentally stumbled on the NPX cache, which is kept hidden away from the usual NPM cache. Mine was in a slightly odd place because I use NVM to manage my NodeJS versions, but you can find yours using npm config get cache, then looking for an _npx directory within the returned path. Delete the contents in there, and npx create-react-app my-app should start working again.

Or, to make it really easy, run npx clear-npx-cache.

A few of us at work might be moving to a project that uses React more heavily than anything we’ve done before, so I wanted to make a list of any interesting links which might be useful to share with the group. Some might not be specifically about React, but were useful for me getting up and running on my home PC, or are worth storing for future reading:

Much like my development environment notes, this post is pretty much just for me – but if you find it useful, I’m glad!