ReferenceError: json is not defined
Remix uses the loader function to provide a behind the scenes API for the browser side script to supply data in JSON format. The function should return serialized data using the json instruction. When you get the error message: ReferenceError: json is…
Initial url (undefined) does not match URL at time of hydration
React web applications pre-render the pages during application build for faster display and “hydrates” them with the client side javascript to make them interactive and to display data. This error can have causes: Initial url (undefined) does…
Rotating pizza stone for the Ooni Koda 12 pizza oven
Pizza is awesome, we have never found anyone who does not like it. The Ooni Koda 12 gas fired pizza oven can fully bake a 12 inch pizza in 3 minutes, but we need to rotate it every 20-30 seconds to bake it evenly and avoid burning it on one side. The…
How to convert PostgreSQL array column to scalar column type
If your PostgreSQL database table contains “timestamp with time zone []” or “timestamp without time zone []” type columns and you want to convert them to “timestamp with time zone” or “timestamp without time…
TypeError: Cannot destructure property ‘…’ of ‘useLoaderData(…)’ as it is null.
React web applications (Next.js, Remix) use React hooks to transfer data between the server side and browser side code. Remix uses the loader() function to run code on the server to produce data for the web page, and the instruction in the browser…
Migrating a Next.js web application to Remix
Application configuration At this point Remix version 1 is “forward compatible”. It already contains the version 2 features, and you can start to use them before the official release. To enable the version 2 features in version 1 Migration…
Cannot edit table rows in pgAdmin 4
If the table has no primary key, pgAdmin 4 cannot identify them, so disables the row insert and edit. Lock icons appear next to the column names, and the Add row button is disabled. To be able to edit table rows in pgAdmin4, select the primary key column…
How to expose Next.js environment variables to the browser specific code
The Next.js React web application runs separate code on the server and in the browser. By default, the environment variables are only accessible in the server side script. Warning: by exposing environment variables to the browser code you may reveal…
Error: Cannot find module ‘…’ outside of the development environment
When the Node.js application runs correctly in the development environment, but throws the following error in higher environments: Error: Cannot find module ‘…’ Make sure the module is not listed in the “devDependencies”…
React Developer Tools
Download the React Developer Tools for the browser you use from https://react.dev/learn/react-developer-tools