⨯ TypeError: Cannot convert a Symbol value to a string

[akshay kadam (a2k)]

i'm trying this in next.js 14.

components/Fingerprint.tsx

'use client'

import FingerprintJS from '@fingerprintjs/fingerprintjs'
import React from 'react'
import { setCookie } from 'cookies-next'

const isBrowser = () => typeof window !== undefined

export const VISITOR_ID = 'vid'

export function Fingerprint() {
  React.useEffect(() => {
    async function setFingerprint() {
      if (isBrowser()) {
        const fp = await FingerprintJS.load()
        const { visitorId } = await fp.get()
        setCookie(VISITOR_ID, visitorId)
      }
    }

    setFingerprint()
  }, [])
  return null
}

api/login/route.ts

import { NextRequest, NextResponse } from 'next/server'
import { getCookie } from 'cookies-next'
import { cookies } from 'next/headers'

import { VISITOR_ID } from '@/app/components/Fingerprint'

export const POST = async (request: NextRequest, response: NextResponse) => {
  const req = await request.json()
  console.info('🏁 POST /api/login/route')
  console.log(getCookie(VISITOR_ID, { req: request, res: response }))
  const cookie = cookies().get(VISITOR_ID)?.value ?? null
  console.log({ cookie })
}

i tried both ways to log cookie but the 2nd one logs null & 1st log gives an error:

⨯ TypeError: Cannot convert a Symbol value to a string
at _ (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:255037)
at Object.get (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:255158)
at Proxy.toString ()
at getCookie (webpack-internal:///(rsc)/./node_modules/.pnpm/cookies-next@4.1.1/node_modules/cookies-next/lib/index.js:90:25)
at POST (webpack-internal:///(rsc)/./src/app/api/login/route.ts:28:72)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:63809
at async eU.execute (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:53964)
at async eU.handle (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:65062)
at async doRender (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1333:42)
at async cacheEntry.responseCache.get.routeKind (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1555:28)
at async DevServer.renderToResponseWithComponentsImpl (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1463:28)
at async DevServer.renderPageComponent (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1856:24)
at async DevServer.renderToResponseImpl (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1894:32)
at async DevServer.pipeImpl (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:911:25)
at async NextNodeServer.handleCatchallRenderRequest (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\next-server.js:271:17)
at async DevServer.handleRequestImpl (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:807:17)
at async E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:331:20
at async Span.traceAsyncFn (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\trace\trace.js:151:20)
at async DevServer.handleRequest (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:328:24)
at async invokeRender (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:163:21)
at async handleRequest (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:342:24)
at async requestHandlerImpl (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:366:13)
at async Server.requestListener (E:\Next\nextjs-rate-limit\node_modules.pnpm\next@14.1.0_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\start-server.js:140:13)

how to solve it?

my job is simply to get the fingerprint value from client to server using api routes? im using cookies for that.

[akshay kadam (a2k)]

It did get solve once with NextApiRequest but then again I tested it & that didn't work.

So I went with a global store like Zustand as I don't think I need cookies. Maybe cookies were a better option but Next.js makes cookies really hard.

Definitely couldn't make it work again though for some reason.