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 notes Referencing files Instead of @ use ~ to refer to the root of the site, …

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 secrets. Make sure the exposed environment variables do not contain any secrets. If secrets are …

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” section of the package.json and package-lock.json files. If you have installed a package with the –save-dev @types/… option, the package is considered a …

error: INSERT has more expressions than target columns

When the parameterized PostgreSQL statement has more elements in the “VALUES” option than the number of columns specified, we get the error message: error: INSERT has more expressions than target columns In the sample code below there are two columns listed, and there are three elements in the “VALUES” option. Solution Remove the extra elements …

error: could not determine data type of parameter $1

For security reasons we should always use parameterized queries to avoid SQL injections through parameters. The usual format is When a PostgreSQL command runs and a parameter is not used, we get the error message error: could not determine data type of parameter $1 Solution: Remove the unused parameter from the “parameters” array, in this …

How to disable static page generation during Next.js site build

If your Next.js React TypeScript web application uses database calls to display data on the pages, and during build time the database is not available, we need to disable the static page generation, otherwise we get the following error: info Generating static pages…TypeError: Failed to parse URL from ……code: ‘ERR_INVALID_URL’ To disable the static page …

Object is possibly ‘undefined’

The ESLint static code analysis tool flags code where we operate on objects which can be undefined. Object is possibly ‘undefined’ The end of the red line shows the extent of the object which can be undefined, as the “children” element is defined as optional in the type definition: To satisfy the linter, we need to …