Latest in Frontend

HomeFrontend

TypeScript-friendly useSize from @react-hook/resize-observer.

So you went to https://www.npmjs.com/package/@react-hook/resize-observer and copied useSize, but it has a bunch of typescript errors, and it pisses you off (I know it does).
Here's a version that is TypeScript-friendly... And not just that, it's a complete file you can put in your project and import from your components:
import useResizeObserver from "@react-hook/resize-observer" import { useLayoutEffect, useState } from "react" const useSize = (target:any) => { const [size, setSize] = useState<DOMRectReadOnly>() useLayoutEffect(() =>...

Argument of type 'FormData' is not assignable to parameter of type 'string | string[][] | Record | URLSearchParams | undefined'.

It's very disappointing when you find this issue was there for 5 years and it was Closed without being resolved.
Here's the full error as shown by TypeScript:
const fd = new FormData(form); const values = new URLSearchParams(fd).toString(); Argument of type 'FormData' is not assignable to parameter of type 'string | string[][] | Record<string, string> | URLSearchParams | undefined'. Type 'FormData' is missing the following properties from type 'URLSearchParams': size, sort...

Group in a group with TailwindCSS.

Some time ago, there was a common problem of having multiple nested group classes. Imagine having a main menu dropdown group, where top level elements are groups, and sub-level elements are groups as well. You might be tempted to use something like this:
<ul class="relative"> <li class="group"> Top level item <ul class="hidden group-hover:block"> <li class="group"> Sub level items will be here <ul class="hidden group-hover:block"> <li>Sub-sub level item 1</li> <li>Sub-sub level item 2</li> <li>Sub-sub level item 3</li> </ul> </li> </ul> </li> </ul>
While...

Another day, another TypeScript challenge with useRef.

How many times per day you swear when writing React code with TypeScript?..
Today I got this:
Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'. Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'RefObject<HTMLInputElement>'. Types of property 'current' are incompatible. Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement | null'. Type 'undefined' is not assignable to type 'HTMLInputElement | null'.ts(2322)
Hmmm, so...

clearTimeout or clearInterval in React Native views with React Navigation

When working on a regular React app, it is common to initialize some hooks after the component is mounted, and unbind them after the component is unmounted. However, while working on a React Native app, you might have noticed that the views are actually not unmounted, and as such your bound events and background tasks continue to run from the previous view. Here's what you can do.
useFocusEffect to the rescue useFocusEffect is a special hook from @react-navigation/native,...

Next.js ChunkLoadError: Loading chunk failed after deploying.

Everything was working fine locally, but the whole console gets red with ChunkLoadError after you deploy to production. Moreover, the frontend becomes blank white and you see Application error: a client-side exception has occurred (see the browser console for more information). The issue seems to be here for a while, and it looks like no-one knows which part exactly is responsible for the error (Next.js or Webpack or both), but the workaround is present.
Here are the steps that helped in my situation:
Your TypeScript project can't find expo/tsconfig.base, although you are sure it is there (besides, the project works just fine). Here's the fix.
You probably use VS Code, am I right? Then, restart your IDE. Yes, simple as that...

Storybook not building due to string-width ES Module dependency error.

You upgraded or just installed the latest Storybook 7 and now you can't build the project. No matter which Node version, NPM, Yarn, whatever other modules you have.
Error [ERR_REQUIRE_ESM]: require() of ES Module /x/node_modules/string-width/index.js from /x/node_modules/cli-table3/src/utils.js not supported. Instead change the require of index.js in /x/node_modules/cli-table3/src/utils.js to a dynamic import() which is available in all CommonJS modules. at Object.<anonymous> (/x/node_modules/cli-table3/src/utils.js:1:21) at Object.<anonymous> (/x/node_modules/cli-table3/src/table.js:2:15) at Object.<anonymous> (/x/node_modules/cli-table3/index.js:1:18) at Object.<anonymous> (/x/node_modules/@storybook/core-server/dist/index.js:113:7858) at Object.<anonymous> (/x/node_modules/@storybook/cli/dist/generate.js:11:4494) at Object.<anonymous> (/x/node_modules/@storybook/cli/bin/index.js:9:1) at Object.<anonymous> (/x/node_modules/storybook/index.js:3:1) { code:...

[!] RollupError: Node tried to load your configuration as an ES module even though it is likely CommonJS. To resolve this, change the extension of your configuration to ".cjs" or pass the "--bundleConfigAsCjs" flag.

Sounds familiar?
It took me a while to figure out that the actual error is written lower:
Original error: module is not defined in ES module scope.
What this means is there's no variable named module in the rollup.config.mjs file.
To fix that, you just need to replace CommonJS export to ES export, which means your module.exports = { should become export...

error TS2792: Cannot find module 'moment'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

Got this error when trying to import moment into a TypeScript React (.tsx) module?
To fix the issue, you will need to adjust your tsconfig.json file and add "moduleResolution": "node" to your compilerOptions, so it looks like this:
{ "compilerOptions": { ... "moduleResolution": "node", ... } }
The "moduleResolution": "node" setting in tsconfig.json tells the TypeScript compiler to use Node.js module resolution logic when resolving module names. This allows...

Push instant updates with EventSource API

EventSource is a handy API supported by all browsers, which runs over the regular HTTP protocol and doesn't require setting up a separate WebSocket service. However, it has limitations, such as data being one-directional (server to client) or a connection being constantly occupied. Let's dive in.
The server We will start with setting up a simple server using one of the ways from the previous article. After you have the server, we will set up a separate...

fetch() with timeout

Being from early JavaScript days, you might've been used to setting a timeout for all your HTTP requests in jQuery or libraries like axios, request, etc. Yet to your surprise, there's no timeout parameter for native browser's fetch.
However, the way fetch extends on this, is now it allows you to set a different condition to abort the request. This can be not only the timeout, but any other condition (i.e. user logs out of the system, and all pending requests have to be...

About Code with Node.js

This is a personal blog and reference point of a Node.js developer.

I write and explain how different Node and JavaScript aspects work, as well as research popular and cool packages, and of course fail time to time.