Redis with nextjs 13.4 (TypeError: url_1.URL is not a constructor)

Question

I am facing an issue with connecting to redis

Note : I am using secure connection i.e rediss.

It works when I do the following

// src/redis-client.js
const { createClient } = require('redis');

const redisClient = createClient({
  url: REDIS_URL, // can be found in Vercel KV store
});

redisClient.on('error', (error) => {
  console.error('Redis Error:', error);
});

redisClient.connect();

module.exports = redisClient;

// test-redis.js
const redisClient = require('./src/redis-client')


const testRedis = async () => {
    const key = 'foo';
    const value = 'bar';
    const result = await redisClient.set(key, value, { EX: 60 });
    console.log(result);
    const result2 = await redisClient.get(key);
    console.log(result2);
    await redisClient.quit()
};

testRedis();

And then run following command in terminal node test-redis.js

But when I try to do this in nextjs environment

import { createClient } from 'redis';

console.log(process.env.REDIS_URL) // This prints the correct URL

const redisClient = createClient({ url: process.env.REDIS_URL }); // this is where it fails

redisClient.on('error', (error) => {
  console.error('Redis Error:', error);
});

redisClient.connect();

export default redisClient; 

End up getting following error

- event compiled client and server successfully in 2.7s (3788 modules)
- error Error [TypeError]: url_1.URL is not a constructor
    at <unknown> (webpack-internal:///(middleware)/./node_modules/@redis/client/dist/lib/client/index.js:86)
    at Function.parseURL (webpack-internal:///(middleware)/./node_modules/@redis/client/dist/lib/client/index.js:86:76)
    at Commander._RedisClient_initiateOptions (webpack-internal:///(middleware)/./node_modules/@redis/client/dist/lib/client/index.js:394:27)
    at new RedisClient (webpack-internal:///(middleware)/./node_modules/@redis/client/dist/lib/client/index.js:202:148)
    at new Commander (webpack-internal:///(middleware)/./node_modules/@redis/client/dist/lib/commander.js:46:13)
    at create (webpack-internal:///(middleware)/./node_modules/@redis/client/dist/lib/client/index.js:82:16)
    at createClient (webpack-internal:///(middleware)/./node_modules/redis/dist/index.js:78:38)
    at eval (webpack-internal:///(middleware)/./src/redis-client.ts:8:72)
    at Module.(middleware)/./src/redis-client.ts (file:///Users/shreyas/Desktop/planet-webapp/.next/server/middleware.js:6408:1)
    at __webpack_require__ (file:///Users/shreyas/Desktop/planet-webapp/.next/server/edge-runtime-webpack.js:37:33)
    at fn (file:///Users/shreyas/Desktop/planet-webapp/.next/server/edge-runtime-webpack.js:268:21) {
  digest: undefined
}

Does this have to do with nextjs running the code in edge-runtime?

I faced the similar issue when I used dotenv package with nextjs, where it said process.cwd is not a function, but when it is run in nodejs env it worked.

Answer 1

So this is related to the runtime environment.

Nextjs code runs in edge-runtime, thus we get following towards the end of the error

(file:///Users/shreyas/Desktop/planet-webapp/.next/server/edge-runtime-webpack.js:268:21) {
  digest: undefined
}

From what I realized, redis as a package is not designed to run on edge-runtime environment, more suitable packages to run in order to connect to redis in this environment would be @upstash/redis and @vercel/kv