Topic: javascript

Could not load the "sharp" module using the win32-x64 runtime
Category: javascript
By: jeremy-two

When using the node.js sharp library on Windows and you encounter this error while trying run your app.


npm install --force @img/sharp-win32-x64

It's worth noting that using --force should be done cautiously. It might be necessary in some situations, but it can potentially lead to problems if there are compatibility issues or conflicts between packages.

It's usually better to understand and resolve the root cause of any installation issues rather than relying on the --force flag.

Uncaught Error: Minified React error #425
Category: javascript
By: jeremy-one

The solution is to create your date(s) inside useEffect. Now only the client computes the new date and updates the DOM.

Get a JWT Secret from Vercel
Category: javascript
By: Jeremy Faucher

Here is were you can get a fresh JWT secret from Vercel:

Next 13 updates for useRouter
Category: javascript
By: jeremy-one

Replace router with navigation

import { useRouter } from 'next/router'; import { usePathname } from "next/navigation";

We also need to replace useRouter with usePathname

const router = useRouter(); const pathname = usePathname();

And when using as a link remove router

className={router.pathname == "/" ? "active" : ""} className={pathname == "/" ? "active" : ""}
How to create dynamic a category url route with next.js
Category: javascript
By: jeremy-one

I know in Next.js, you can create dynamic routes using square brackets "[]". But what name do I use in the brackets?

This is how to get a list of wp core panel IDs:
Category: javascript
By: jeremy-one 'core/edit-post' ).getPreferences().panels;
Server side and client side rendering with the Next.js app router
Category: javascript
By: jeremy-one

I found the trick is to nest client side components in server side components.

Use server side components as the outer frame of the UI and nest interactive client side components inside.

This will create a server side layout to pass down all the properties you need to the client side component.

So for example you could use the UI wireframes to visualize all the server side components like header or nav and sidebar and main. From there any time you need a new client side you can import it into the parent server component.

This will create a hierarchy Like

page (server side) -components --TopicList (server side) ---TopicListItem (client side)

As you can see here this keep all the client side elements to a minimum.