Ryan Posts - Answer Overflow

Ryan

•Created by Ryan on 11/16/2024 in #questions

Error: The string to be decoded is not correctly encoded when using @clerk/nextjs in Next.js 15.0.3

I’m running into an issue while setting up a Next.js app (v15.0.3) with u/clerk/nextjs. When I try to run the development server, the app compiles but fails with the following error:

⨯ Error [InvalidCharacterError]: The string to be decoded is not correctly encoded. at (rsc)/./node_modules/@clerk/nextjs/dist/esm/server/constants.js (/app/.next/server/vendor-chunks/@clerk.js:615:1) ...

⨯ Error [InvalidCharacterError]: The string to be decoded is not correctly encoded. at (rsc)/./node_modules/@clerk/nextjs/dist/esm/server/constants.js (/app/.next/server/vendor-chunks/@clerk.js:615:1) ...

Key Details: Stack: Next.js version: 15.0.3 @clerk/nextjs version: Latest (as of this post). Environment Setup: Running locally with Docker. .env includes keys like NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY (see below). Files for Context: layout.tsx:

import { ClerkProvider } from "@clerk/nextjs";
import localFont from "next/font/local";
import "./globals.css";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en" suppressHydrationWarning>
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

import { ClerkProvider } from "@clerk/nextjs";
import localFont from "next/font/local";
import "./globals.css";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en" suppressHydrationWarning>
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

next.config.js:

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

.env:

DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=public"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_nbvbnhgfghnmhgfghjhgfghjhgfghjhghjhgfhj
CLERK_SECRET_KEY=sk_test_fghjhgfghjhgfghjhgfghjhgfghjhgf

DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=public"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_nbvbnhgfghnmhgfghjhgfghjhgfghjhghjhgfhj
CLERK_SECRET_KEY=sk_test_fghjhgfghjhgfghjhgfghjhgfghjhgf

docker-compose.yaml:

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgresql://user:password@db:5432/mydb?schema=public
      - NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=${NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
      - CLERK_SECRET_KEY=${CLERK_SECRET_KEY}
    env_file:
      - .env
    depends_on:
      db:
        condition: service_healthy
    volumes:
      - .:/app
  db:
    image: postgres:13
    environment:
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=password
      - POSTGRES_DB=mydb
    volumes:
      - postgres_data:/var/lib/postgresql/data
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U user -d mydb"]
      interval: 10s
      timeout: 5s
      retries: 5

volumes:
  postgres_data:

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgresql://user:password@db:5432/mydb?schema=public
      - NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=${NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
      - CLERK_SECRET_KEY=${CLERK_SECRET_KEY}
    env_file:
      - .env
    depends_on:
      db:
        condition: service_healthy
    volumes:
      - .:/app
  db:
    image: postgres:13
    environment:
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=password
      - POSTGRES_DB=mydb
    volumes:
      - postgres_data:/var/lib/postgresql/data
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U user -d mydb"]
      interval: 10s
      timeout: 5s
      retries: 5

volumes:
  postgres_data:

Dockerfile

# Use an official Node runtime as the base image
FROM node:18-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm ci


# Copy the rest of the application code
COPY . .

# Generate Prisma client
RUN npx prisma generate

# RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the application
CMD ["npm", "run", "dev"]
# Use an official Node runtime as the base image
FROM node:18-alpine


# Set the working directory in the container
WORKDIR /app


# Copy package.json and package-lock.json
COPY package*.json ./


# Install dependencies
RUN npm ci



# Copy the rest of the application code
COPY . .


# Generate Prisma client
RUN npx prisma generate

EXPOSE 3000

CMD ["npm", "run", "dev"]

# Use an official Node runtime as the base image
FROM node:18-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm ci


# Copy the rest of the application code
COPY . .

# Generate Prisma client
RUN npx prisma generate

# RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the application
CMD ["npm", "run", "dev"]
# Use an official Node runtime as the base image
FROM node:18-alpine


# Set the working directory in the container
WORKDIR /app


# Copy package.json and package-lock.json
COPY package*.json ./


# Install dependencies
RUN npm ci



# Copy the rest of the application code
COPY . .


# Generate Prisma client
RUN npx prisma generate

EXPOSE 3000

CMD ["npm", "run", "dev"]

What I’ve Tried: Verified environment variables are correctly set. Reinstalled all dependencies. Confirmed the Clerk keys are correct for my development environment.
Could this be related to the way environment variables are passed or the server-side setup? Any debugging tips for narrowing down where this string decoding error is happening? Thanks in advance for your help! Let me know if you need more details

2 replies

Gaming

Programming