DEV Community: bespy

How to alphabetize your import statements in React files and package.json

bespy — Thu, 22 May 2025 03:08:52 +0000

Add the following to package.json and run bun install:

"eslint-config-next": "15.3.2",
"eslint-plugin-package-json": "^0.29.1",
"eslint-plugin-simple-import-sort": "^12.1.1",

// eslint.config.mjs
import { FlatCompat } from '@eslint/eslintrc';
import packageJson from "eslint-plugin-package-json";
import simpleImportSort from 'eslint-plugin-simple-import-sort';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript'),
  {
    plugins: {
      'simple-import-sort': simpleImportSort,
    },
    rules: {
      'simple-import-sort/imports': 'error',
      'simple-import-sort/exports': 'error',
    },
  },
  packageJson.configs.recommended,
];

export default eslintConfig;

How to migrate Pages to App Router

bespy — Thu, 22 May 2025 03:07:15 +0000

The NextJS App Router migration guide says If you have an existing _app or _document file, you can copy the contents (e.g. global styles) to the root layout (app/layout.tsx)..

However, I couldn't find a good example. This is my real world example including Theme and Auth Providers, a NavBar and a Toaster.

NextJS v15

// layout.tsx (NextJS 15)
import "@/src/app/globals.css";

import { NextAuthProvider, ThemeProvider } from "@/src/app/providers";
import { Accordion } from "@/src/components/accordion";
import { Toaster } from "@/src/components/ui/sonner";
import { cn } from "@/src/lib/utils";

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "",
  description: "",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          geistSans.variable,
          geistMono.className
        )}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <NextAuthProvider>
            <main className="flex min-h-screen flex-col items-center md:p-24 p-4 w-full">
              <Accordion />
              <div className="w-full pt-4 mt-16 sm:mt-32 content-center space-y-4">
                {children}
              </div>
            </main>
          </NextAuthProvider>
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  );
}

// page.tsx (NextJS 15)
import { CardCompact } from "@/src/components/card-compact";
import Image from "next/image";

export default function Home() {
  return (
    <section className="flex flex-col gap-8">
      <CardCompact
        title=""
        description=""
        content={
          <Image
            className="dark:invert"
            src="/next.svg"
            alt="Next.js logo"
            width={180}
            height={38}
            priority
          />
        }
      />
    </section>
  );
}

NextJS v14

// _document.tsx (NextJS 14)
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body className="antialiased">
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

// _app.tsx (NextJS 14)
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Firebase local tips

bespy — Tue, 21 Jan 2025 03:21:00 +0000

If you're getting the following error error: Failed to parse private key: Error: Invalid PEM formatted message when using Firebase locally. Try replacing the following with the following:

export class Database {
    public database: admin.database.Database;

    constructor() {
        const app = admin.apps.find((it: any) => it?.name === "[DEFAULT]") ||
            admin.initializeApp({
                credential: admin.credential.cert({
                    projectId: config.FIREBASE_PROJECT_ID,
                    clientEmail: config.FIREBASE_CLIENT_EMAIL,
                    privateKey: config.FIREBASE_PRIVATE_KEY!.replace(/\\n/gm, "\n"),
                }),
                databaseURL: config.FIREBASE_DATABASE
            });

        this.database = getDatabase(app);
    }

export class Database {
  public database: admin.database.Database;

  constructor() {
    const app = admin.initializeApp({
      credential: {
        getAccessToken: () =>
          Promise.resolve({ access_token: 'foo', expires_in: 3600 }),
      },
      databaseURL: `${config.FIREBASE_URL_WITH_PORT}/?ns=demo-yourprojectname`,
    });
 this.database = getDatabase(app);
  }

NextAuth TwitterProvider UserId on Session

bespy — Fri, 13 Dec 2024 00:54:07 +0000

If you follow the NextAuth instructions for the TwitterProvider you won't immediately get the UserId on the Session Provider, when you use the useSession() hook. The below code worked for me.

import NextAuth from 'next-auth';
import TwitterProvider from 'next-auth/providers/twitter';

import { addSignedInUserToDb } from '@/app/auth-client';

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    TwitterProvider({
      clientId: process.env.TWITTER_CLIENT_ID,
      clientSecret: process.env.TWITTER_CLIENT_SECRET,
    }),
  ],
  session: {},
  secret: process.env.SECRET as string,
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      user.x_id = profile.data.id;
      // this is where i add the userId to db
      await addSignedInUserToDb(user);
      return true;
    },
    async redirect({ url, baseUrl }) {
      return baseUrl;
    },
    async session({ session, user, token }) {
      session.user.x_id = token.data.id;
      return session;
    },
    async jwt({ token, user, account, profile }) {
      return { ...token, ...user, ...account, ...profile };
    },
  },
});

Why is CPU usage more than 100% in Mac activity monitor?

bespy — Tue, 19 Nov 2024 06:02:23 +0000

Are you wondering why CPU usage in activity monitor is greater than 100%? The simple answer is CPU usage can be 100% * the number of CPU cores.

Error: Cannot find module 'webpack-cli/bin/config-yargs'

bespy — Tue, 19 Nov 2024 05:55:45 +0000

Are you getting Error: Cannot find module 'webpack-cli/bin/config-yargs'? Have you recently upgraded Webpack? To clear the above message trying changing from "start": "webpack-dev-server --mode development --progress --color", to "start": "webpack serve --mode development --progress --color", in package.json.

yarn run v1.22.5
$ webpack-dev-server --mode development --progress --color
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
warning Skipping preferred cache folder "/.cache/yarn" because it is not writable.
warning Selected the next writable cache folder in the list, will be "/tmp/.yarn-cache-501".
warning Cannot find a suitable global folder. Tried these: "/usr/local, /.yarn"
internal/modules/cjs/loader.js:896
  throw err;
  ^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /../../client/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:893:15)
    at Function.Module._load (internal/modules/cjs/loader.js:743:27)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/../../client/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1076:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/../../client/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
error Command failed with exit code 1.

Related issue in the project's Github