Encountering issues with connecting to Upstash using next.js 13: receiving error message "Unable to access properties of undefined (reading 'startsWith')."

I'm attempting to establish a connection with upstash's redis using the code snippet below. However, I am encountering an error.

Can you identify what the issue might be?

【code】

import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_URL,
  token: process.env.UPSTASH_REDIS_TOKEN
});

【error】

- error node_modules\@upstash\redis\esm\platforms\nodejs.js (27:36) @ startsWith
- error Error [TypeError]: Cannot read properties of undefined (reading 'startsWith')      
    at new Redis (webpack-internal:///(rsc)/./node_modules/@upstash/redis/esm/platforms/nodejs.js:30:37)
    at eval (webpack-internal:///(rsc)/./app/upstash/page.tsx:10:15)
    at (rsc)/./app/upstash/page.tsx (C:\SourceCode\nextjs\.next\server\app\upstash\page.js:975:1)
    at Function.__webpack_require__ (C:\SourceCode\nextjs\.next\server\webpack-runtime.js:33:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async collectGenerateParams (C:\SourceCode\nextjs\node_modules\next\dist\build\utils.js:828:17) {
  digest: undefined
}

Answer №1

There is a high likelihood that your process.env.UPSTASH_REDIS_URL or process.env.UPSTASH_REDIS_TOKEN variables are currently set as undefined (or both!). Before attempting to initialize Redis, you should verify their values by using console.log.

This solution was effective for a similar issue reported in the GitHub repository, as seen here. Upon reviewing the relevant source code, it appears that the function startWith is applied immediately after referencing your URL or token:

if (
  configOrRequester.url.startsWith(" ") ||
)
...
if (
  configOrRequester.token.startsWith(" ") ||
)

For proper handling of these variables, consult the NextJS documentation on working with environment variables.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are there any notable purposes for using the `.d.ts` file extension beyond just improving code readability?

Within my project, I have a file named shims-vue.d.ts located in the src folder: declare module '*.vue' { import type { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component } I ...

Tips for correctly implementing React.Children and React.cloneElement?

I'm currently trying to clone my react children using the cloneElement method, but I'm encountering some issues when it comes to typing them. Here's the code snippet where I am passing a custom onClick function as a prop to the children: c ...

Error message: The property .match cannot be read as it is undefined (AWS Amplify Build Error)

I'm facing an issue when trying to deploy my React/Typescript app using Amazon's AWS Amplify. The build process keeps failing and the error message says: "Cannot read property .match of undefined". I've gone through numerous discussions, bu ...

Ionic3 footer using ion-tabs

Is there a way to create a common footer for all pages with 5 buttons, where the first button is selected by default? The page opened by this first button should have three tabs. I have already created the tabs but am unsure how to add the footer without r ...

Is it possible to sign in using next auth if I already possess the access_token obtained from my Backend server?

I possess an access token already. How can I inform next auth to modify its internal states (like changing the status to "authenticated")? When I am unauthenticated, the "update" function from useSession() does not have any effect. However, it works succe ...

esBuild failing to generate typescript declaration files while running in watch mode

Recently dove into using edBuild and I have to say, it's been a breeze to get up and running - simple, fast, and easy. When I execute my esBuild build command WITHOUT WATCH, I can see that the type files (.d.ts) are successfully generated. However, ...

Insert data into Typeorm even if it already exists

Currently, I am employing a node.js backend in conjunction with nest.js and typeorm for my database operations. My goal is to retrieve a JSON containing a list of objects that I intend to store in a mySQL database. This database undergoes daily updates, bu ...

`There seems to be an unusual issue causing tailwindcss to malfunction`

It seems like my tailwindcss isn't functioning properly. Is there something I missed? tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx,mdx}", ". ...

Explaining the structure of a nested object within a TypeScript declaration file

As I work on my project, I encounter the challenge of importing an object created by a dynamic function. The dynamic nature of the keys on this object poses a problem for the IDE, as it cannot determine what keys are present based on the provided config. T ...

Is it possible to create a dynamically generated key for TypeScript enums?

As a newcomer to TypeScript coming from the JavaScript world, please bear with me if my questions seem naive. What am I trying to accomplish? enum Add { PREFIX = 'ADD', ROUTE_PREFIX = 'add' } export CrudAdd { `${Add.PREFIX}_CUS ...

Error message stating that 'exports is not defined' surfaced upon upgrading Storybook to version 7.6.x

I recently updated Storybook from version 7.5.3 to the latest version available at the time, which is v7.6.7. Our project utilizes Webpack 5 and is built with TypeScript and ReactJS. The build process completes successfully without any visible errors dur ...

When using NextJS in a production build, encountering a 500 error when utilizing Mui's <Container> on a page

I have integrated MUI into my page, and it works perfectly throughout except for one specific page that appears to be malfunctioning. When in development mode (using next dev), everything runs smoothly. However, when I switch to production build (by runnin ...

Testing an HTTP error Observable with Jasmine and RxJS simulations

I encountered a similar issue, but due to commenting constraints on other questions, I had to create a new one. The problem lies in a jasmine test where a function is expected to manage an error from a service call. The service call returns an RxJS `Observ ...

Tips for transforming alphanumeric characters into value ranges using Typescript

myArray = ["AB01","AB02","AB03","AB04","AB11","BC12","BC13", "SB33"]; // code snippet to create expected string: "AB01-AB04, AB11, BC12-BC13, SB33" The array contains combinations of one or two letter characters followed by two or three digits. Examples ...

Clearing the require cache in Node.js using TypeScript

I need to repeatedly require a module in TypeScript and Node for testing purposes. I came across an approach on this post which suggests the following code snippet: const config = require('./foo'); delete require.cache[require.resolve('./fo ...

I am interested in monitoring for any alterations to the @input Object

I've been attempting to detect any changes on the 'draft' Object within the parent component, however ngOnChange() does not seem to be triggering. I have included my code below, but it doesn't even reach the debugger: @Input() draft: ...

Explain what one-time typescript interfaces are

As someone who has been using React for quite some time, I am now looking to integrate Typescript into my projects. In the past, I would create large "container" objects like this: const theme = { colors: { primary: '#00f', accent: &ap ...

Numerous toggle classes available

Having the following HTML inside a <span> element: <span (click)="openLeft()"></span> A method in a @Component sets a boolean variable like so: private isOpen: boolean; openLeft() { this.isOpen = !this.isOpen; } To toggle classes ...

Encountering a hydration issue in Next.js 13 due to applying initial framer-motion animation value conditionally depending on the screen size

In my Next.js 13 app, I am utilizing framer-motion for animations on a single-page layout with multiple screens. Navigation is achieved by scrolling to their respective section IDs, and I am using the traditional pages directory. One of the screens featur ...

Child router receives subscription from parent router

Is there a way to trigger events on every URL change within a child router? I have been able to implement event firing on URL changes within the main router using the following code, but I am struggling with achieving this in a child router. I'm curr ...