Thimo_o
Thimo_o
Explore posts from servers
NNuxtTtRPCTTCTheo's Typesafe CultDTDrizzle Team
PostsComments
NNuxt
Created by Thimo_o on 3/12/2025 in #❓・help
dynamic CSS not working in Nuxt
Hey all, I made the Nuxt-codemirror module, but I have the weirdest issue I ever encountered and hope someone could help 🥺 CodeMirror can be enhanced with extensions. All work except for the syntaxhighlighting There is a package from codemirror itself which has a basic set of extensions including highlighting. If I import that and use it highlighting works. this makes highlighting work 
<script setup lang="ts">
import { javascript } from '@codemirror/lang-javascript'
import { minimalSetup } from 'codemirror'
</script>

<template>
  <NuxtCodeMirror
    ref="codemirror"
    v-model="code"
    :extensions="[minimalSetup, javascript()]"
    style="width: 500px; height: 400px;"
    placeholder="Enter your code here..."
    :auto-focus="true"
    :basic-setup="true"
  />
</template>
<script setup lang="ts">
import { javascript } from '@codemirror/lang-javascript'
import { minimalSetup } from 'codemirror'
</script>

<template>
  <NuxtCodeMirror
    ref="codemirror"
    v-model="code"
    :extensions="[minimalSetup, javascript()]"
    style="width: 500px; height: 400px;"
    placeholder="Enter your code here..."
    :auto-focus="true"
    :basic-setup="true"
  />
</template>
the minimalSetup variable does this: 
export const minimalSetup: Extension = (() => [
  highlightSpecialChars(),
  history(),
  drawSelection(),
  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
  keymap.of([
    ...defaultKeymap,
    ...historyKeymap,
  ])
])()
export const minimalSetup: Extension = (() => [
  highlightSpecialChars(),
  history(),
  drawSelection(),
  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
  keymap.of([
    ...defaultKeymap,
    ...historyKeymap,
  ])
])()
However, when I don't use the import { minimalSetup } from "codemirror" but use my exact own function then it doesnt work. I don't know how this can happen
6 replies
TtRPC
Created by Thimo_o on 3/2/2025 in #❓-help
Trpc V11 Nuxt 4
Hello, I was wondering if theres a possibility to have a trpc v11 example repo maybe on the examples page since the trpc-nuxt module is not really maintained. Also I think a module is not really nessesary with v11? Thanks in advance!
2 replies
TtRPC
Created by Thimo_o on 9/7/2023 in #❓-help
tRPC error in app Router (undefined headers)
I use the tRPC file structure from Jack Herringtons video I added clerk auth for protected routes and set the create Context in the route handler: 
createContext: () => createTRPCContext(req),



interface AuthContext {
  auth: SignedInAuthObject | SignedOutAuthObject
}
const createInnerTRPCContext = async ({ auth }: AuthContext) => {
  return {
    auth,
  }
}

export const createTRPCContext = async (req: NextRequest) => {
  return await createInnerTRPCContext({ auth: getAuth(req) })
}

export type Context = trpc.inferAsyncReturnType<typeof createTRPCContext>

export const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError: error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    }
  },
})

export const createTRPCRouter = t.router
createContext: () => createTRPCContext(req),



interface AuthContext {
  auth: SignedInAuthObject | SignedOutAuthObject
}
const createInnerTRPCContext = async ({ auth }: AuthContext) => {
  return {
    auth,
  }
}

export const createTRPCContext = async (req: NextRequest) => {
  return await createInnerTRPCContext({ auth: getAuth(req) })
}

export type Context = trpc.inferAsyncReturnType<typeof createTRPCContext>

export const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError: error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    }
  },
})

export const createTRPCRouter = t.router
but this results in the following error: 
 error TypeError: Cannot read properties of undefined (reading 'headers')
     at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61)
     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 error TypeError: Cannot read properties of undefined (reading 'headers')
     at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61)
     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2 replies
TtRPC
Created by Thimo_o on 8/26/2023 in #❓-help
How do I setup App router + TRPC + Lucia Auth? (protected routes)
I'm trying to setup tRPC with Lucia in app router but I struggle to make protected routes work. I made a trpc context where I put lucia session and a getDefaultSession function to get the session 
export const getDefaultSession = cache((req: NextRequest) => {
  const authRequest = auth.handleRequest({
    request: req,
    cookies,
  })
  return authRequest.validate()
})

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
  }
}

export const createTRPCContext = async (req: NextRequest) => {
  const session = await getDefaultSession(req)

  return createInnerTRPCContext({
    session,
  })
}
export const getDefaultSession = cache((req: NextRequest) => {
  const authRequest = auth.handleRequest({
    request: req,
    cookies,
  })
  return authRequest.validate()
})

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
  }
}

export const createTRPCContext = async (req: NextRequest) => {
  const session = await getDefaultSession(req)

  return createInnerTRPCContext({
    session,
  })
}
I wrote a isAuth function to make the protected procedure 
const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.session || !ctx.session?.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" })
  }
  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  })
})

export const protectedProcedure = t.procedure.use(enforceUserIsAuthed)
const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.session || !ctx.session?.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" })
  }
  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  })
})

export const protectedProcedure = t.procedure.use(enforceUserIsAuthed)
and added it in my route.ts handler 
const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext(req),
  })

export { handler as GET, handler as POST }
const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext(req),
  })

export { handler as GET, handler as POST }
But the session is not passed into ctx resulting in always getting the unauthorized error. Does someone know what I did wrong to make this work?
7 replies
TTCTheo's Typesafe Cult
Created by Thimo_o on 7/21/2023 in #questions
nextauth google provider not properly creating account
2 replies
TTCTheo's Typesafe Cult
Created by Thimo_o on 6/13/2023 in #questions
Nextauth add data to user that tries to sign up
I have my frontend where a user can signup to the website. For signing up they get a team number and a participant ID. When the user tries to login I want to add this data to my user. If the user tries to login without a valid team number/participantID then I want to block signing in in the nextauth callback. The issue I face is that the user needs to exist in my DB before I can review if he is provided the correct information and i can't access the team number or participantID in the signin callback. Do you know how I can make this work?
3 replies
TTCTheo's Typesafe Cult
Created by Thimo_o on 5/17/2023 in #questions
Fetch request in server action not working
2 replies
DTDrizzle Team
Created by Thimo_o on 5/9/2023 in #help
Is drizzle fully framework agnostic?
I saw a lot of people use drizzle in NextJS, but i didn't find a lot of information about usage in frameworks like Nuxt 3 or Sveltekit. Are there things that need to be done diffrently depending on the framework?
4 replies
TTCTheo's Typesafe Cult
Created by Thimo_o on 3/31/2023 in #questions
ThreeJS with Create T3 app
Hello, I have seen this repository that combines nextjs with react three fiber: https://github.com/pmndrs/react-three-next but I was wondering if someone made a template/starter project that combines CT3A with react three fiber
2 replies
TTCTheo's Typesafe Cult
Created by Thimo_o on 3/18/2023 in #questions
Tailwind vscode extension not working
Does anyone else have had the same problem where the vscode extension is not doing anything? I tried botha default Next 13 app and the ct3a project. Both on windows and wsl2 it doesn't seem to wanna work
6 replies
NNuxt
Created by Thimo_o on 2/9/2023 in #❓・help
How to see nuxt devtools?
I enabled devtools globally by doing "npx nuxi@latest devtools enable" How can I now see the devtools window? Do I need to install something more?
27 replies
NNuxt
Created by Thimo_o on 2/8/2023 in #❓・help
Wrong favicon in development
Hi all, I just started a new project with nuxt 3, and when I ran yarn dev to see the default welcome page, the favicon was from a completely different website I visited earlier. Is this a caching issue? I tried chrome cache wipe but didn't fix it yet I don't have a public folder or any reference to favicon in my project. What things could I try to solve it or might this be a bug in nuxt? Thanks in advance!
2 replies