How I Fixed: React Native – Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

This one had me kicking myself.

What you see on your phone

I really like VSCode for JS projects, but man-oh-mally, on this occasion it bit me. I wonder if I need another plugin, or something?

Bit easier to see in Chrome developer tools debugging session

The error in full for Google searchers:

Solving this, for me, was actually really straightforward. The issue was a typo of fail proportions.

I’d been playing around with using functional components with React Native, instead of the more typical (from all the examples I’ve seen anyway) class component approach:

Pretty basic, right? I always feel somehow much worse about myself when my most basic creations fail unexpectedly.

The problem is (as best I can tell) a syntax error. But neither VSCode nor WebStorm flag this up.

Ok, so to put us all out of our misery:

But why doesn’t the IDE flag this?

I’m not sure how this initial fat arrow could ever be valid syntax? I’ve tried playing around in the console and I can’t seem to make it work.

Anyway, hopefully for you, it’s something similar if not identical. Fat fingers, fat arrows.

How I Fixed: Server channel error: 406, message: PRECONDITION_FAILED – inequivalent arg ‘type’ for exchange ‘my_exchange’ in vhost ‘/’: received ‘fanout’ but current is ‘direct’

Not a fun way to start a Saturday morning. With a bit of spare time this morning I wanted to continue some refactoring work on a tool I’ve been working on for checking broken links on any given website.

The project is quite cool (in my opinion), using a bunch of interesting software / tech such as RabbitMQ with Symfony’s Messenger component, STOMP for real time stuff, React with Hooks, Tailwinds for CSS… and a bunch more buzz-wordy, CV helping stuff that keeps me gainfully employed.

Anyway, the first thing I did was spin up the Symfony docker containers that run the various services to handle incoming broken link checking requests. And as ever, I ran a composer update to bring Symfony up to 4.3.x.

I’m not sure if bumping up to Symfony 4.3 was the cause of this problem. I suspect not. It’s been a while since I’ve worked on this part of the code, but it was all working the last time I brought the project up. And it’s working live and online, too, so something has gone awry.

Anyway, after the composer update completed successfully:

I tried to run my messenger consumer:

Knickers. It all blew up quite badly.

There’s a lot of info to process, and without some nice terminal colouring it’s all a bit of a blur.

The interesting line is:

What I think has gone wrong is that at some point in the past, I’ve switched over my RabbitMQ exchange to use direct, and by default, Symfony’s Messenger component will try to create an exchange with the type of fanout.

To clarify, my exchange and queue combo already exists at: amqp://{username}:{password}@rabbitmq:5672/%2f/fetch

It exists because I have previously configured my RabbitMQ instance to boot up with this exchange / queue combo ready and good to go.

Because Symfony’s Messenger component is not immediately aware that this queue will already exist, it tries to create it.

It cannot create it because the default type of exchange that Symfony’s Messenger component will try to use is fanout.

In order to make this work, I needed to manually specify the config that explicitly sets this exchange / queue combo to the desired setting of direct.

Finding this out via the documentation wasn’t super straightforward. Here’s a few of the steps I took:

bin/console config:dump-reference framework

This shows that for each framework.messenger.transports entry in your config/packages/messenger.yaml file, you can have a variety of additional settings.

As it was, my original config looked like this:

By providing just a DSN (by way of environment variables), all the default config would be used.

What I needed to do was swap over to this:

And after doing so, it all started working again:

In short, this isn’t directly a Symfony / Symfony Messenger problem. It’s a config problem. The messaging could be a little more clear, as could the documentation for what things are viable as options.

How to Change File Modified Date on All Files to Midnight

Bit of an obscure one, but I searched Google without finding a specific example.

After back up, I want to set all my files in a given directory to be modified at midnight of the current day. The real modified date is not very important to me, so this command suffices. I have a specific reason for this process, though it’s quite unusual.

Anyway, here goes:

As ever, use with caution / practice on a copy of your data first.

How I share files between Mac and Ubuntu

For a while now I’ve wanted to share files between my OSX / Macbook Pro laptop, and one (or ideally several) of my Ubuntu Linux PCs.

Why?

Because my laptop has 256gb of hard disk space, and that is consumed at an alarmingly fast rate when recording, and rendering videos.

I’ve tried, and failed, to set up file sharing on Ubuntu on numerous occasions. It is, of course, due to something (or several compounding somethings) I have been doing wrong, but I neither have the patience, nor desire to figure out exactly what.

Enter Docker. Saviour of hair follicles. Provider of solutions.

File Sharing Ubuntu Style, With Docker

Let’s cut right to the chase. Here is some configuration:

Essentially to make this work you need Docker, and Docker Compose installed on the PC (Ubuntu in my case) that you want to share data from.

There are some changes you will need to make.

Make sure each of the volumes match the path to a real directory on your computer.

The part before the colon is on your local PC.

The part after the colon is where that directory will be available inside the resulting running Docker container.

Customise the username and password appropriately.

You can find out what all the no;no;no bits mean in the documentation.

Then put the code from above into a file called docker-compose.yml somewhere on your computer. Once saved off to a file, run docker-compose up (or docker-compose up -d to run in the background) and away you go.

Your Ubuntu File Server For Mac

Once you have your shiny new Ubuntu Samba File Server up and running, how do you connect to it from your Mac? 

Pop in the IP address, or (perhaps more nicely) the name of your Ubuntu PC. 

The share name corresponds with whatever you called the share in the command section of your docker-compose.yml file.

Once you type in the full path to your share, click Connect.

After a second or two you should see a prompt. Enter the credentials to the share you created in your docker-compose.yml file.

Bonza. You are now connected. 

At this point you should have read / write access to the share. This is what I wanted, and allows me to copy all my video files over to the network drive, rather than store them on my over priced, under provisioned hard disk. 

Using ReactCSSTransitionGroup with TypeScript

I wanted to use ReactCSSTransitionGroup to add a little animation to a React and TypeScript project I was working on.

Following the docs:

Seems ok. But on doing this, in my .tsxΒ  file, I ended up with a compilation error:

The fix to this came to me, as I’d read this somewhere previously a few months ago when doing my original exploration of TypeScript.

The syntax I really needed was:

I honestly can’t remember where I first read this. But hopefully I can at least pass a helpful little tip on to you.