niels
niels
Explore posts from servers
FFilamentTTCTheo's Typesafe Cult
PostsComments
FFilament
Created by niels on 10/16/2024 in #❓┊help
$recordRouteKeyName does not apply to table row on-click and edit action
I've set protected static ?string $recordRouteKeyName = 'uid'; (which is a public identifier in favor of incremental identifier) on my Product resource. http://127.0.0.1:8000/products/01JABFVZ0BP27NBRZ4X0RF7A9N/edit now works as expected, but the table row and EditAction both still link to http://127.0.0.1:8000/products/2/edit on-click What am I missing here?
2 replies
FFilament
Created by niels on 9/22/2024 in #❓┊help
How to do auth in React Native
How would someone implement external auth? Do I really need Breeze for this or can I already use Filament's auth layer
4 replies
FFilament
Created by niels on 9/7/2024 in #❓┊help
FIleUpload infinitely loading after "Create"
No description
6 replies
TTCTheo's Typesafe Cult
Created by niels on 1/17/2024 in #questions
Monorepo UI package has no styling when imported
No description
95 replies
TTCTheo's Typesafe Cult
Created by niels on 1/15/2024 in #questions
ESLint: Failed to load config "@repo/eslint-configuration/.eslintrc.nextjs.cjs" to extend from.
I'm working on a Turborepo with an ESLint package. This error gets raised at build and not at dev. Any help welcome. apps/next-app-boilerplate/.eslintrc.cjs 
/** @type {import("eslint").Linter.Config} */
const config = {
  ignorePatterns: ["apps/*", "packages/*"],
  extends: ["@repo/eslint-configuration/.eslintrc.nextjs.cjs"],
};

module.exports = config;
/** @type {import("eslint").Linter.Config} */
const config = {
  ignorePatterns: ["apps/*", "packages/*"],
  extends: ["@repo/eslint-configuration/.eslintrc.nextjs.cjs"],
};

module.exports = config;
"@repo/eslint-configuration": "*" is added as a devDependency to apps/next-app-boilerplate/package.json packages/eslint-configuration/.eslint.nextjs.cjs 
/** @type {import("eslint").Linter.Config} */
const config = {
    extends: [
      "next/core-web-vitals",
      "@repo/eslint-config/.eslintrc.base.cjs"
    ],
  };
  
  module.exports = config;
/** @type {import("eslint").Linter.Config} */
const config = {
    extends: [
      "next/core-web-vitals",
      "@repo/eslint-config/.eslintrc.base.cjs"
    ],
  };
  
  module.exports = config;
packages/eslint-configuration/package.json 
{
    "name": "@repo/eslint-configuration",
    "version": "0.0.0",
    "private": true,
    "files": [
        ".eslintrc.base.cjs",
        ".eslintrc.nextjs.cjs"
    ],
    "dependencies": {
        "@types/eslint": "^8.56.2",
        "eslint": "^8.56.0"
    },
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "6.18.1",
        "@typescript-eslint/parser": "6.18.1",
        "eslint-config-next": "^14.0.4"
    }
}
{
    "name": "@repo/eslint-configuration",
    "version": "0.0.0",
    "private": true,
    "files": [
        ".eslintrc.base.cjs",
        ".eslintrc.nextjs.cjs"
    ],
    "dependencies": {
        "@types/eslint": "^8.56.2",
        "eslint": "^8.56.0"
    },
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "6.18.1",
        "@typescript-eslint/parser": "6.18.1",
        "eslint-config-next": "^14.0.4"
    }
}
4 replies
TTCTheo's Typesafe Cult
Created by niels on 1/11/2024 in #questions
[Turborepo] TypeError: Cannot read properties of undefined (reading 'push')
www:dev: TypeError: Cannot read properties of undefined (reading 'push')
www:dev:     at writeConfigurationDefaults
www:dev: TypeError: Cannot read properties of undefined (reading 'push')
www:dev:     at writeConfigurationDefaults
I'm not sure what's causing this error... Using Turborepo. apps/www/tsconfig,json 
{
  "extends": "@repo/typescript-config/tsconfig.nextjs.json",
}
{
  "extends": "@repo/typescript-config/tsconfig.nextjs.json",
}
apps/www/package,json 
{
  "devDependencies": {
    "@repo/typescript-config": "*",
  }
}
{
  "devDependencies": {
    "@repo/typescript-config": "*",
  }
}
packages/typescript-config/package,json 
{
    "name": "@repo/typescript-config",
    "version": "0.0.0",
    "private": true
}
{
    "name": "@repo/typescript-config",
    "version": "0.0.0",
    "private": true
}
packages/typescript-config/tsconfig.nextjs,json 
{
    "$schema": "https://json.schemastore.org/tsconfig",
    "display": "Next.js",
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
        /* Language compilation options */
        "module": "ESNext",   
        "moduleDetection": "force",
        "isolatedModules": true,     
        "jsx": "preserve",
        "incremental": true,

        /* Path aliases */
        "baseUrl": ".",
        "paths": {
            "~/*": ["./src*"]
        },

        /* Other options */
        "plugins": [{ "name": "next"}],
    },
    "include": [
        ".eslintrc.cjs",
        "next-env.d.ts",
        "**/*.ts",
        "**/*.tsx",
        "**/*.cjs",
        "**/*.js",
        ".next/types/**/*.ts"
      ],
      "exclude": ["node_modules"]
}
{
    "$schema": "https://json.schemastore.org/tsconfig",
    "display": "Next.js",
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
        /* Language compilation options */
        "module": "ESNext",   
        "moduleDetection": "force",
        "isolatedModules": true,     
        "jsx": "preserve",
        "incremental": true,

        /* Path aliases */
        "baseUrl": ".",
        "paths": {
            "~/*": ["./src*"]
        },

        /* Other options */
        "plugins": [{ "name": "next"}],
    },
    "include": [
        ".eslintrc.cjs",
        "next-env.d.ts",
        "**/*.ts",
        "**/*.tsx",
        "**/*.cjs",
        "**/*.js",
        ".next/types/**/*.ts"
      ],
      "exclude": ["node_modules"]
}
2 replies
TTCTheo's Typesafe Cult
Created by niels on 12/21/2023 in #questions
Help me convince my client to move from Nuxt (Vue) to Next.js
What are some really valid points to prove that Next.js is significantly better than Nuxt?
2 replies
TTCTheo's Typesafe Cult
Created by niels on 12/13/2023 in #questions
Shadcn DropdownMenu - Property 'className' does not exist on type 'Omit<DropdownMenuSubTriggerProps
Local is building and starting without any issues. This only happens on Vercel's deployment Property 'className' does not exist on type 'Omit<DropdownMenuSubTriggerProps & RefAttributes<HTMLDivElement>, "ref"> & { inset?: boolean | undefined; }' 
Running "bun run build"
--
01:09:07.074 | $ next build
01:09:07.993 | ▲ Next.js 14.0.4
01:09:07.994 |  
01:09:07.995 | Creating an optimized production build ...
01:09:21.783 | ✓ Compiled successfully
01:09:21.784 | Linting and checking validity of types ...
01:09:28.103 | Failed to compile.
01:09:28.103 |  
01:09:28.104 | ./src/components/ui/dropdown-menu.tsx:26:6
01:09:28.104 | Type error: Property 'className' does not exist on type 'Omit<DropdownMenuSubTriggerProps & RefAttributes<HTMLDivElement>, "ref"> & { inset?: boolean \| undefined; }'.
01:09:28.105 |  
01:09:28.105 | 24 \|         inset?: boolean;
01:09:28.105 | 25 \|     }
01:09:28.106 | > 26 \| >(({ className, inset, children, ...props }, ref) => (
01:09:28.106 | \|      ^
01:09:28.106 | 27 \|     <DropdownMenuPrimitive.SubTrigger
01:09:28.106 | 28 \|         ref={ref}
01:09:28.106 | 29 \|         className={cn(
01:09:28.179 | error: script "build" exited with code 1 (SIGHUP)
01:09:28.183 | Error: Command "bun run build" exited with 1
Running "bun run build"
--
01:09:07.074 | $ next build
01:09:07.993 | ▲ Next.js 14.0.4
01:09:07.994 |  
01:09:07.995 | Creating an optimized production build ...
01:09:21.783 | ✓ Compiled successfully
01:09:21.784 | Linting and checking validity of types ...
01:09:28.103 | Failed to compile.
01:09:28.103 |  
01:09:28.104 | ./src/components/ui/dropdown-menu.tsx:26:6
01:09:28.104 | Type error: Property 'className' does not exist on type 'Omit<DropdownMenuSubTriggerProps & RefAttributes<HTMLDivElement>, "ref"> & { inset?: boolean \| undefined; }'.
01:09:28.105 |  
01:09:28.105 | 24 \|         inset?: boolean;
01:09:28.105 | 25 \|     }
01:09:28.106 | > 26 \| >(({ className, inset, children, ...props }, ref) => (
01:09:28.106 | \|      ^
01:09:28.106 | 27 \|     <DropdownMenuPrimitive.SubTrigger
01:09:28.106 | 28 \|         ref={ref}
01:09:28.106 | 29 \|         className={cn(
01:09:28.179 | error: script "build" exited with code 1 (SIGHUP)
01:09:28.183 | Error: Command "bun run build" exited with 1
1 replies
TTCTheo's Typesafe Cult
Created by niels on 8/22/2023 in #questions
Some domain philosophy
I am currently trying to create my own start up software agency Sadly, the .com domain was already taken. Here are my options right now; - .nl, since I'm from The Netherlands and I'll focus on Dutch audience for the first bit - .io as it is a pretty common tech related domain. Research shows that along with e.g. .com, .io domains are in the same list of top level domains (gTLD) by Google (src: https://blog.hubspot.com/website/io-domains) - .in, this would be 'fun' as my start up's name ends with 'in'. Though I'm not sure if .in domains are also top level domain. I believe it's under country specific (ccTLD) for Indonesia. Would this matter? Would this downgrade me in search results for e.g. Netherlands or international? Would love to hear your thoughts on this!
9 replies
TTCTheo's Typesafe Cult
Created by niels on 7/17/2023 in #questions
Multi-page wizard
3 replies
TTCTheo's Typesafe Cult
Created by niels on 7/7/2023 in #questions
Source for creating my own create-x-app CLI command?
Is there any good source that dives into creating a CLI command such as create-t3-app? Would be very useful for the company I work at!
3 replies
TTCTheo's Typesafe Cult
Created by niels on 6/28/2023 in #questions
Next.js / React international physical conferences?
Does anyone know of any good upcoming Next.js / React international physical conferences?
2 replies
TTCTheo's Typesafe Cult
Created by niels on 6/27/2023 in #questions
useQuery endless fetching loop
15 replies
TTCTheo's Typesafe Cult
Created by niels on 6/26/2023 in #questions
Zod z.infer, z.output and z.input
How do they differ? 
export declare type TypeOf<T extends ZodType<any, any, any>> = T["_output"];
export declare type input<T extends ZodType<any, any, any>> = T["_input"];
export declare type output<T extends ZodType<any, any, any>> = T["_output"];
export declare type TypeOf<T extends ZodType<any, any, any>> = T["_output"];
export declare type input<T extends ZodType<any, any, any>> = T["_input"];
export declare type output<T extends ZodType<any, any, any>> = T["_output"];
4 replies
TTCTheo's Typesafe Cult
Created by niels on 6/26/2023 in #questions
snake_case in Zod and/or Class
I am working with a Python Django back-end. It'd be most efficient to mimic the Django DB model fields in Zod to make communicating with the API more accessible. e.g. in Django I might have a Product.long_description field. Now, in my Next app I have a class Product with some useful getter methods for example. Ideally, I would have a Product.longDescription in TS To make creating and reading API responses <> Product classes more efficient, it'd be most efficient to use snake_case so I don't need to worry about re-assigning every API response field to a camelCase variable/property. Basically my question is. Is it, in this case, really a sin to use snake_case in TS?
22 replies
TTCTheo's Typesafe Cult
Created by niels on 6/19/2023 in #questions
Type for a JSON object or API response?
Is Object good enough?
10 replies
TTCTheo's Typesafe Cult
Created by niels on 6/8/2023 in #questions
server side localstorage?
Any way to access local storage or cookies server side? I have some light/dark theming in my app, but when loading, there's a blink of the light theme even when it says dark in localStorage for example. Is there any way to avoid this?
12 replies
TTCTheo's Typesafe Cult
Created by niels on 6/4/2023 in #questions
Vercel Build, Module not found: Can't resolve path/to/Component
Builds fine locally... 
[21:35:38.579] Running build in Washington, D.C., USA (East) – iad1
[21:35:38.636] Cloning github.com/niebag/sales-portal-next (Branch: staging, Commit: 9324ee0)
[21:35:39.125] Cloning completed: 488.975ms
[21:35:44.352] Restored build cache
[21:35:44.396] Running "vercel build"
[21:35:45.065] Vercel CLI 29.3.6
[21:35:45.489] Detected `pnpm-lock.yaml` version 6 generated by pnpm 8...
[21:35:45.516] Installing dependencies...
[21:35:46.341] Lockfile is up to date, resolution step is skipped
[21:35:46.434] Progress: resolved 1, reused 0, downloaded 0, added 0
[21:35:46.595] Packages: +28
[21:35:46.595] ++++++++++++++++++++++++++++
[21:35:47.468] Progress: resolved 28, reused 0, downloaded 28, added 28, done
[21:35:48.104] 
[21:35:48.104] dependencies:
[21:35:48.104] + @radix-ui/react-dialog 1.0.4
[21:35:48.105] + framer-motion 10.12.16
[21:35:48.105] 
[21:35:48.111] 
[21:35:48.111] > [email protected] prepare /vercel/path0
[21:35:48.112] > husky install
[21:35:48.112] 
[21:35:48.194] husky - Git hooks installed
[21:35:48.202] Done in 2.6s
[21:35:48.225] Detected Next.js version: 13.4.3
[21:35:48.240] Running "pnpm run build"
[21:35:48.916] 
[21:35:48.916] > [email protected] build /vercel/path0
[21:35:48.916] > next build
[21:35:48.916] 
[21:35:49.602] - info Creating an optimized production build...
[21:36:10.454] <w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (659kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
[21:36:10.706] Failed to compile.
[21:36:10.706] 
[21:36:10.707] ./src/app/(auth)/login/page.tsx
[21:36:10.707] Module not found: Can't resolve '@/app/__components__/ui/Button'
[21:36:10.707] 
[21:36:10.707] https://nextjs.org/docs/messages/module-not-found
[21:36:10.707] 
[21:36:10.707] ./src/app/(auth)/login/page.tsx
[21:36:10.707] Module not found: Can't resolve '@/app/__components__/ui/form/Input'
[21:36:10.707] 
[21:36:10.707] https://nextjs.org/docs/messages/module-not-found
[21:36:10.707] 
[21:36:10.707] ./src/app/(auth)/login/page.tsx
[21:36:10.708] Module not found: Can't resolve '@/app/__components__/ui/form/Label'
[21:36:10.708] 
[21:36:10.708] https://nextjs.org/docs/messages/module-not-found
[21:36:10.708] 
[21:36:10.708] ./src/app/(auth)/logout/page.tsx
[21:36:10.708] Module not found: Can't resolve '@/app/__components__/ui/Button'
[21:36:10.708] 
[21:36:10.708] https://nextjs.org/docs/messages/module-not-found
[21:36:10.709] 
[21:36:10.709] ./src/app/__components__/SidebarMobile.tsx
[21:36:10.709] Module not found: Can't resolve './ui/Button'
[21:36:10.709] 
[21:36:10.709] https://nextjs.org/docs/messages/module-not-found
[21:36:10.710] 
[21:36:10.711] 
[21:36:10.711] > Build failed because of webpack errors
[21:36:10.749]  ELIFECYCLE  Command failed with exit code 1.
[21:36:10.776] Error: Command "pnpm run build" exited with 1
[21:36:11.073] BUILD_UTILS_SPAWN_1: Command "pnpm run build" exited with 1
[21:35:38.579] Running build in Washington, D.C., USA (East) – iad1
[21:35:38.636] Cloning github.com/niebag/sales-portal-next (Branch: staging, Commit: 9324ee0)
[21:35:39.125] Cloning completed: 488.975ms
[21:35:44.352] Restored build cache
[21:35:44.396] Running "vercel build"
[21:35:45.065] Vercel CLI 29.3.6
[21:35:45.489] Detected `pnpm-lock.yaml` version 6 generated by pnpm 8...
[21:35:45.516] Installing dependencies...
[21:35:46.341] Lockfile is up to date, resolution step is skipped
[21:35:46.434] Progress: resolved 1, reused 0, downloaded 0, added 0
[21:35:46.595] Packages: +28
[21:35:46.595] ++++++++++++++++++++++++++++
[21:35:47.468] Progress: resolved 28, reused 0, downloaded 28, added 28, done
[21:35:48.104] 
[21:35:48.104] dependencies:
[21:35:48.104] + @radix-ui/react-dialog 1.0.4
[21:35:48.105] + framer-motion 10.12.16
[21:35:48.105] 
[21:35:48.111] 
[21:35:48.111] > [email protected] prepare /vercel/path0
[21:35:48.112] > husky install
[21:35:48.112] 
[21:35:48.194] husky - Git hooks installed
[21:35:48.202] Done in 2.6s
[21:35:48.225] Detected Next.js version: 13.4.3
[21:35:48.240] Running "pnpm run build"
[21:35:48.916] 
[21:35:48.916] > [email protected] build /vercel/path0
[21:35:48.916] > next build
[21:35:48.916] 
[21:35:49.602] - info Creating an optimized production build...
[21:36:10.454] <w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (659kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
[21:36:10.706] Failed to compile.
[21:36:10.706] 
[21:36:10.707] ./src/app/(auth)/login/page.tsx
[21:36:10.707] Module not found: Can't resolve '@/app/__components__/ui/Button'
[21:36:10.707] 
[21:36:10.707] https://nextjs.org/docs/messages/module-not-found
[21:36:10.707] 
[21:36:10.707] ./src/app/(auth)/login/page.tsx
[21:36:10.707] Module not found: Can't resolve '@/app/__components__/ui/form/Input'
[21:36:10.707] 
[21:36:10.707] https://nextjs.org/docs/messages/module-not-found
[21:36:10.707] 
[21:36:10.707] ./src/app/(auth)/login/page.tsx
[21:36:10.708] Module not found: Can't resolve '@/app/__components__/ui/form/Label'
[21:36:10.708] 
[21:36:10.708] https://nextjs.org/docs/messages/module-not-found
[21:36:10.708] 
[21:36:10.708] ./src/app/(auth)/logout/page.tsx
[21:36:10.708] Module not found: Can't resolve '@/app/__components__/ui/Button'
[21:36:10.708] 
[21:36:10.708] https://nextjs.org/docs/messages/module-not-found
[21:36:10.709] 
[21:36:10.709] ./src/app/__components__/SidebarMobile.tsx
[21:36:10.709] Module not found: Can't resolve './ui/Button'
[21:36:10.709] 
[21:36:10.709] https://nextjs.org/docs/messages/module-not-found
[21:36:10.710] 
[21:36:10.711] 
[21:36:10.711] > Build failed because of webpack errors
[21:36:10.749]  ELIFECYCLE  Command failed with exit code 1.
[21:36:10.776] Error: Command "pnpm run build" exited with 1
[21:36:11.073] BUILD_UTILS_SPAWN_1: Command "pnpm run build" exited with 1
2 replies
TTCTheo's Typesafe Cult
Created by niels on 6/3/2023 in #questions
getServerAuthSession at any place crashes my app. 5000+ errors per second!
Below, I have my server component for rendering a hamburger menu based on whether the user is authenticated. 
const SidebarMobile = async () => {
    const session = await getServerAuthSession();

    return session && session.user ? (
        <Sheet>
        ...
        </Sheet>
    ) : null;
};
const SidebarMobile = async () => {
    const session = await getServerAuthSession();

    return session && session.user ? (
        <Sheet>
        ...
        </Sheet>
    ) : null;
};
When I check the Network tab, main-app.js stays in an endless waterfall of downloading content. When I check the Console tab, this error is raised infinitely. It raises this error around 5.000 per second! 
Uncaught (in promise) Error: Invariant: Method expects to have requestAsyncStorage, none available
    at headers (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/headers.js:36:15)
    at getServerSession (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next-auth/next/index.js:145:35)
Uncaught (in promise) Error: Invariant: Method expects to have requestAsyncStorage, none available
    at headers (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/components/headers.js:36:15)
    at getServerSession (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next-auth/next/index.js:145:35)
The server console seems fine with no erros at all. 
- event compiled client and server successfully in 491 ms (2993 modules)
[next-auth][warn][EXPERIMENTAL_API]
`getServerSession` is used in a React Server Component.
https://next-auth.js.org/configuration/nextjs#getServerSession}
https://next-auth.js.org/warnings#EXPERIMENTAL_API
- event compiled client and server successfully in 491 ms (2993 modules)
[next-auth][warn][EXPERIMENTAL_API]
`getServerSession` is used in a React Server Component.
https://next-auth.js.org/configuration/nextjs#getServerSession}
https://next-auth.js.org/warnings#EXPERIMENTAL_API
Could anyone please explain to me what's going on or what I'm implementing wrong?
16 replies
TTCTheo's Typesafe Cult
Created by niels on 5/31/2023 in #questions
useSession has an empty user object {}
When using the useSession hook, session.data contains { user: {}, expires: '2023-06-30T20:30:42.181Z' } this is my auth options: 
declare module 'next-auth' {
    interface Session {
        user: {
            id: string;
            token: string;
        };
    }
}

export const authOptions: NextAuthOptions = {
    pages: {
        signIn: '/login',
        signOut: '/logout',
    },
    session: {
        strategy: 'jwt',
    },
    providers: [
        CredentialsProvider({
            name: 'Credentials',

            credentials: {
                pincode: { label: 'Pincode', type: 'text', placeholder: '1234567' },
            },

            async authorize(credentials) {
                const pincode = credentials?.pincode;

                try {
                    const {
                        data: {
                            user: { id, token },
                        },
                    } = await api.post<AuthResponse>(`/auth/login/`, { pincode: pincode });

                    return {
                        id: id,
                        token: token,
                    };
                } catch (error) {
                    throw new AuthError('Failed to authorize.');
                }
            },
        }),
    ],
};
declare module 'next-auth' {
    interface Session {
        user: {
            id: string;
            token: string;
        };
    }
}

export const authOptions: NextAuthOptions = {
    pages: {
        signIn: '/login',
        signOut: '/logout',
    },
    session: {
        strategy: 'jwt',
    },
    providers: [
        CredentialsProvider({
            name: 'Credentials',

            credentials: {
                pincode: { label: 'Pincode', type: 'text', placeholder: '1234567' },
            },

            async authorize(credentials) {
                const pincode = credentials?.pincode;

                try {
                    const {
                        data: {
                            user: { id, token },
                        },
                    } = await api.post<AuthResponse>(`/auth/login/`, { pincode: pincode });

                    return {
                        id: id,
                        token: token,
                    };
                } catch (error) {
                    throw new AuthError('Failed to authorize.');
                }
            },
        }),
    ],
};
4 replies