ChronicStone
ChronicStone
Explore posts from servers
NNuxtCDCloudflare DevelopersTtRPC
PostsComments
NNuxt
Created by ChronicStone on 1/10/2025 in #❓・help
Nuxt module type errors leak into app typecheck
I have an internal nuxt module @agorastore/shared-ui, which is consumed by a nuxt app. Locally, on the module code, I don't have any type errors, everything is properly typed & works fine. But when I build & release the module, the build output has some type issues I don't have on the module code. These type issues aren't a big deal, they don't cause harm & the module works as excepted. Except for one thing : when I run nuxi typecheck on my app, these errors leak into the app type errors : 
Found 18 errors in 6 files.

Errors  Files
     3  app/entities/items/schema.tsx:107
     5  node_modules/@agorastore/shared-ui/dist/runtime/components/layout/FloatingSidebar.vue:82
     6  node_modules/@agorastore/shared-ui/dist/runtime/components/layout/SidebarNavigation.vue:41
     1  node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/ArrayTabField.vue:137
     2  node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/CheckboxGroupField.vue:55
     1  node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/TextField.vue:40
Found 18 errors in 6 files.

Errors  Files
     3  app/entities/items/schema.tsx:107
     5  node_modules/@agorastore/shared-ui/dist/runtime/components/layout/FloatingSidebar.vue:82
     6  node_modules/@agorastore/shared-ui/dist/runtime/components/layout/SidebarNavigation.vue:41
     1  node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/ArrayTabField.vue:137
     2  node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/CheckboxGroupField.vue:55
     1  node_modules/@agorastore/shared-ui/dist/runtime/lib/form/components/field/TextField.vue:40
The only valid app-level error here is the first one, all the others shouldn't be visible on my app when type-checking. I've tried various things, such as flagging the package in 'exclude' in tsconfig, enabling skipLibCheck, but no matter what I try, I can't figure out how to exclude these errors from the app-level type errors. This prevents me from enabling typecheck in CI for example, which is quite a big deal
6 replies
NNuxt
Created by ChronicStone on 12/18/2024 in #❓・help
[TypeScript] nuxi typecheck throws errors from node_modules/@agorastore/shared-ui despite skipLibChe
Hi everyone 👋 When running nuxi typecheck, I'm getting a bunch of TypeScript errors specifically from a Nuxt module in my node_modules (@agorastore/shared-ui). For example: 
node_modules/@agorastore/shared-ui/dist/runtime/components/layout/FloatingSidebar.vue:65:16 - error TS2322: Type '{ name: "dashboard" | "auth-login"...' is not assignable to type 'RouteLocationRaw'

node_modules/@agorastore/shared-ui/dist/runtime/components/system/AppRoot.vue:38:6 - error TS2345: Argument of type '{ theme: BuiltInGlobalTheme...' is not assignable to parameter of type 'Partial<...>'
node_modules/@agorastore/shared-ui/dist/runtime/components/layout/FloatingSidebar.vue:65:16 - error TS2322: Type '{ name: "dashboard" | "auth-login"...' is not assignable to type 'RouteLocationRaw'

node_modules/@agorastore/shared-ui/dist/runtime/components/system/AppRoot.vue:38:6 - error TS2345: Argument of type '{ theme: BuiltInGlobalTheme...' is not assignable to parameter of type 'Partial<...>'
I tried adding both of these to my tsconfig.json but the errors persist: 
{
  "compilerOptions": {
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "node_modules/**/*"
  ]
}
{
  "compilerOptions": {
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "node_modules/**/*"
  ]
}
Is there a way to make nuxi typecheck ignore modules in node_modules? I want to run type-checking on the CI before PRs can be merged, but this prevents me from doing so
8 replies
CDCloudflare Developers
Created by ChronicStone on 5/27/2024 in #general-help
Custom install command
I need to run a custom install command when installing packages for some reasons. Is there a way I can achieve this ?
3 replies
NNuxt
Created by ChronicStone on 2/19/2024 in #❓・help
Nuxt postinstall (nuxt prepare cmd) / nuxt build hangs forever
No description
5 replies
CDCloudflare Developers
Created by ChronicStone on 1/9/2024 in #pages-help
Which object holds environment variables (Nuxt)
I just configured & deployed a nuxt app to be deployed to cloudflare pages. Environment variables are all setup, but I can't seem to access them, like to setup my drizzle DB connexion : (I'm using t3-env to valdiate & access my env vars : https://env.t3.gg/) 
// db/index.ts
import { neon, neonConfig } from '@neondatabase/serverless';
import { drizzle as drizzleNeon } from 'drizzle-orm/neon-http';
import * as schema from './schema';
import { env } from '@/server/env';

neonConfig.fetchConnectionCache = true;

export const db = drizzleNeon(neon(env.DATABASE_URL), { schema, logger: false });
// db/index.ts
import { neon, neonConfig } from '@neondatabase/serverless';
import { drizzle as drizzleNeon } from 'drizzle-orm/neon-http';
import * as schema from './schema';
import { env } from '@/server/env';

neonConfig.fetchConnectionCache = true;

export const db = drizzleNeon(neon(env.DATABASE_URL), { schema, logger: false });
// server/env.ts

export const env = createEnv({
  server: {
    APP_BASE_URL: z.string().url(),
    APP_ENV: z.enum(['local', 'production']),
    DATABASE_URL: z.string().url(),
    DATABASE_SOURCE: z.enum(['neon', 'local']),
    CLERK_WEBHOOK_SECRET_KEY: z.string(),
    AWS_ACCESS_KEY_ID: z.string(),
    AWS_SECRET_ACCESS_KEY: z.string(),
    AWS_SES_REGION: z.string(),
    AWS_SES_SOURCE_EMAIL: z.string(),
    AWS_S3_REGION: z.string(),
    AWS_S3_BUCKET: z.string(),
    AWS_CLOUDFRONT_URL: z.string(),
    MAX_USER_PER_ORG: z.string().transform((v) => parseInt(v, 10)),
  },
});
// server/env.ts

export const env = createEnv({
  server: {
    APP_BASE_URL: z.string().url(),
    APP_ENV: z.enum(['local', 'production']),
    DATABASE_URL: z.string().url(),
    DATABASE_SOURCE: z.enum(['neon', 'local']),
    CLERK_WEBHOOK_SECRET_KEY: z.string(),
    AWS_ACCESS_KEY_ID: z.string(),
    AWS_SECRET_ACCESS_KEY: z.string(),
    AWS_SES_REGION: z.string(),
    AWS_SES_SOURCE_EMAIL: z.string(),
    AWS_S3_REGION: z.string(),
    AWS_S3_BUCKET: z.string(),
    AWS_CLOUDFRONT_URL: z.string(),
    MAX_USER_PER_ORG: z.string().transform((v) => parseInt(v, 10)),
  },
});
All these env vars are alaways empty & validation fails. By default it looks into process.env, but I can change the lookup object. But I'm still not sure to understand how I can access these env vars. I tried looking into globalThis, process.env, import.meta.env but none of these objects seem to hold my env vars.
2 replies
TtRPC
Created by ChronicStone on 8/28/2023 in #❓-help
tRPC subscription : Access to socket ID from subscription
I'm trying to implement user online status in a reliable way on my app, on the "live" part of my app. It's done & working well, but on some cases where the connexion is cut & not restored, I can't trigger the mutation marking the user offline. Right now I'm handling this through the client only right now but in some instances, it's not reliable. What I'd like to do would be something like this : (For subscription I need to pass my authToken as an input since wsLink does not support dynamic header resolver yet to my knowledge). 
userOnlineStatusChanged: publicProcedure
.input(z.object({ authToken: z.string() }))
.subscription(async ({ input, ctx, socket }) => {
  const user = await getUserFromJwt()
  if(!user) throw new TRPCError({ code: 'UNAUTHORIZED', message: '...' })

  // SOMEHOW GET SOCKET ID & ASSOCIATE IT TO USER :
  const storage = useStorage('db')
  storage.set(socket.id, user._id)
  

  return observable<{ userId: string; online: boolean }>((emit) => {
    mapEvents.on(
      'userOnlineStatusChanged',
      (params) => params.organizationId === user.organizationId && emit.next(params),
    );

    return () => {
      mapEvents.off(
        'userOnlineStatusChanged',
        (params) => params.organizationId === user.organizationId && emit.next(params),
      );
    };
  });
})
userOnlineStatusChanged: publicProcedure
.input(z.object({ authToken: z.string() }))
.subscription(async ({ input, ctx, socket }) => {
  const user = await getUserFromJwt()
  if(!user) throw new TRPCError({ code: 'UNAUTHORIZED', message: '...' })

  // SOMEHOW GET SOCKET ID & ASSOCIATE IT TO USER :
  const storage = useStorage('db')
  storage.set(socket.id, user._id)
  

  return observable<{ userId: string; online: boolean }>((emit) => {
    mapEvents.on(
      'userOnlineStatusChanged',
      (params) => params.organizationId === user.organizationId && emit.next(params),
    );

    return () => {
      mapEvents.off(
        'userOnlineStatusChanged',
        (params) => params.organizationId === user.organizationId && emit.next(params),
      );
    };
  });
})
The goal being that on disconnexion of the socket, I mark the user as disconnected from the server to make the whole thing more reliable :
5 replies
NNuxt
Created by ChronicStone on 5/25/2023 in #❓・help
Nuxt 3.5 - Experimental typed router - Default layout not applying anymore
After updating to nuxt 3.5, with experimental typed router, the default layout stopped applying at all. Works fine for pages with a layout explicitely set in definePageMeta, otherwise layout is just being ignored, default does not render Did anyone else notice this ?
6 replies
NNuxt
Created by ChronicStone on 2/9/2023 in #❓・help
How to disable route name prefixing from parent routes
No description
2 replies