Posts

Today, I encountered an unusual problem on my MacBook Pro 16" 2019 when I woke it from sleep. The Chrome browser displayed strange blue noise/lines on the screen, as shown in the image below: Initially, I thought it could be a temporary glitch and reloaded the page, but the issue persisted. I remembered facing a similar problem a few weeks ago, which was resolved by rebooting. However, I didn’t want to rely on this solution as I prefer to avoid frequent reboots....

While working on a Next.js website, I recently encountered the error message: “PrismaClient is unable to be run in the browser.” This issue arose after I commented out a single line of code within the getStaticProps() method of my page file. In this particular line of code, I invoked a method from my Prisma instance, which I had previously imported at the top of the page file. Next.js determines which code to utilize for the backend by analyzing the code within getStaticProps(), excluding it from shipment to the frontend....

If you are facing the error “SyntaxError: Unexpected token ‘{’. import call expects exactly one argument,” this article will guide you through the steps to fix it. Backed by my own experience in resolving this issue, I will provide a solution that has worked for me. I encountered this error while using Safari, but it may also be displayed as “Uncaught SyntaxError: Cannot use import statement outside a module” in Chrome....

If you have recently updated an old Next.js application and encounter the following error when running npm run dev: error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css Error: Your custom PostCSS configuration must export a `plugins` key. Fortunately, this error can be easily fixed. Here’s what you need to do: Create a postcss.config.json file in the root directory of your Next.js application if it doesn’t already exist. Open the postcss.config.json file and add the following content:...

When upgrading my Node.js installation on macOS using Homebrew, I encountered a problem. After running brew upgrade node, Homebrew automatically executed brew cleanup. During this process, I noticed a series of removals: Removing: /Users/...... However, the process was interrupted with an error message: Error: Permission denied @ apply2files - /usr/local/lib/docker/cli-plugins Upon further investigation, I discovered that the error was related to Docker, which I had recently deleted. To resolve the issue, I recreated the Docker app folder by executing the following command:...

While working on a Next.js/React application, you might come across a puzzling error message like this one: TypeError: resolver is not a function Fortunately, the solution to this issue is quite simple. The error typically occurs when the default export of the component for an API call is commented out or missing. To resolve it, ensure that you have a default export for the component. For example, if you have commented out the default export like this:...

If you are looking to create an input field that only allows users to upload images, there is a simple solution. By adding the accept attribute to your input element, you can specify the file types that are allowed to be uploaded. To allow all image file types, use the following code: <input type="file" accept="image/*"> If you only want to allow PNG images, you can use the following code: <input type="file" accept="image/png"> You can also apply the same syntax to restrict uploads to videos or audio files....

When you add a file field to a form, it can be useful to limit the selection to only images. This not only enhances user experience by avoiding wasted time and resources in uploading non-image files, but also adds a client-side filtering capability to complement your server-side filtering. To achieve this, you can utilize the accept attribute of the <input type="file"> element, specifying the MIME type of the accepted files. By setting the value to image/*, you can allow all types of images....

If you find yourself needing to process multiple URLs within a string using a regular expression in JavaScript, capturing groups can come in handy. They allow you to extract specific parts of the matched pattern. In this article, we’ll explore how to retrieve all results of a regular expression with capturing groups. Let’s start by examining how to get a single result using the match() method: const text = 'hello1 bla bla hello2'; const regex = /hello\d/; text....

Learn how to retrieve both the parsed body and raw body in Express using the body-parser middleware. In a recent application I developed, I encountered a specific challenge. While working with Express, I successfully imported the body-parser module to parse the body as JSON: import bodyParser from 'body-parser' app.use(bodyParser.json()) However, when integrating with the Stripe payments API, I needed access to the raw body without parsing it, while still being able to parse the body as JSON....