Error: Failed to collect page data for ... A building problem about add redis to next.js project!

[xkungfu]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #79~20.04.1-Ubuntu SMP Thu Apr 20 22:12:07 UTC 2023
    Binaries:
      Node: 20.2.0
      npm: 9.6.6
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.5-canary.0
      eslint-config-next: 13.2.3
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://github.com/xkungfu/ChatGPT-Next-Web

To Reproduce

app/cache/redis.ts:

import { createClient } from 'redis'
const client = createClient();
client.connect();
export default client;

app/api/auth.ts:

import client from '../cache/redis'

and add below to some function:
const message = client.get(xxxxxx);

package.json:

  "browser": {
      "fs": false,
      "dns": false,
      "net": false,
      "stream": false,
      "crypto": false,
      "string_decoder": false,
      "tls": false
  },

"redis": "4.6.6"
Here is my project.
I changed three file to add redis to another next.js project. package.json auth.ts redis.tx

https://github.com/xkungfu/ChatGPT-Next-Web

Describe the Bug

when add redis or ioredis.

npm run build or yarn build fail.

Expected Behavior

- info Linting and checking validity of types  
- info Collecting page data .../home/datad/chat/gpt2/.next/server/app/api/openai/[...path]/route.js:1

Please see the error info. It is very very confusing. which file and what code caused the error?
Can you let next.js give more infomations?

Please help and tell me what is the right way to add redis to next.js?

thanks!

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response