Skip to content

[BUG] Getting maxCachedSessions error after deploying #603

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ryan-Adami opened this issue Apr 24, 2025 · 3 comments
Open

[BUG] Getting maxCachedSessions error after deploying #603

Ryan-Adami opened this issue Apr 24, 2025 · 3 comments
Labels

Comments

@Ryan-Adami
Copy link

Describe the bug

When accessing the website after deployment, the following error is thrown:

TypeError: Cannot read properties of undefined (reading 'maxCachedSessions')

The application uses KV for incremental cache. This error does not appear in development, only after deployment.

Steps to reproduce

  1. Deploy the app

  2. Visit the website.

  3. Observe the error in the logs or the browser.

Note: Using KV for incremental caching. The error appears to originate from a node module or underlying HTTP/HTTPS agent config.

Expected behavior

The website should load normally without throwing a TypeError. The KV-based cache should function as expected.

@opennextjs/cloudflare version

~1.0.0-beta.0 || ^1.0.0

Wrangler version

4.12.1

next info output

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:16 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.17.0
  npm: 10.8.2
  Yarn: 1.22.19
  pnpm: 8.10.0
Relevant Packages:
  next: 15.3.1 // Latest available version is detected (15.3.1).
  eslint-config-next: 15.3.1
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Additional context

No response

@Ryan-Adami Ryan-Adami added bug Something isn't working triage labels Apr 24, 2025
@conico974
Copy link
Collaborator

Please include a repo (link a minimal repro in a GH repository).
Thanks.

@leonardo2204
Copy link

leonardo2204 commented Apr 27, 2025

I'm having the same problem when calling a "use server" function from a form.

Edit. Adding some more info:

Pausing on caugh excepetions, this seems to be the problem:

class a extends o {
          constructor(e3) {
            super(e3), this.defaultPort = 443, this.protocol = "https:", this.maxCachedSessions = this.options.maxCachedSessions, void 0 === this.maxCachedSessions && (this.maxCachedSessions = 100), this._sessionCache = { map: {}, list: [] };
          }
          createConnection(e3, t3) {
            let r3 = this[s](e3, t3);
            return this[i](r3, e3), r3;
          }
        }

Both this.maxCachedSession and this.options.maxCachedSessions are undefined (the latter, the this.options is)

My code is as simple as that:

async function handleFormAction(state: void | null, formData: FormData) {
        try {
            const result = await generatePost(formData);
            if (result) {
                onGenerate(result);
                setIsDialogOpen(false);
            }
            return null;
        } catch (error) {
            if (error instanceof Error) {
                setErrorMessage(error.message);
            }
            return null;
        }
    }

const [_, formAction, isPending] = useActionState(handleFormAction, null);

 <form action={formAction} className="space-y-4">
                    <Textarea
                        id='ai-prompt'
                        name='ai-prompt'
                        placeholder='Escreva uma breve descrição para a IA gerar o post'
                        className="transition-all duration-200 rounded-md border-2 border-purple-500 focus:border-purple-500 ring-purple-500 bg-zinc-900/50"
                        disabled={!creditsData?.credits}
                        required
                        minLength={10}
                    />
                    <div className="flex items-center space-x-2">
                        <Checkbox
                            id="add-hashtags"
                            name="add-hashtags"
                            disabled={!creditsData?.credits}
                        />
                        <label htmlFor="add-hashtags" className="text-sm text-muted-foreground">Adicionar hashtags</label>
                    </div>
                    <div className="flex items-center space-x-2">
                        <Checkbox
                            id="add-emojis"
                            name="add-emojis"
                            disabled={!creditsData?.credits}
                        />
                        <label htmlFor="add-emojis" className="text-sm text-muted-foreground">Adicionar emojis 🎉</label>
                    </div>
                    <p className="text-sm text-muted-foreground">
                        Clique no botão "Gerar Post" para usar a IA e criar uma descrição baseada no seu texto.
                    </p>
                    <div className='flex justify-end'>
                        <Button
                            type="submit"
                            className='w-40 bg-purple-600 hover:bg-purple-700'
                            disabled={isButtonDisabled}
                        >
                            {isPending ? (
                                <>
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                    Gerando...
                                </>
                            ) : (
                                'Gerar Post'
                            )}
                        </Button>
                    </div>
                </form>

And the action

export async function generatePost(formData: FormData) {
  const prompt = formData.get('ai-prompt') as string;
  const tone = formData.get('tone') as string;
  const addHashtags = formData.get('add-hashtags') === 'on';
  const addEmojis = formData.get('add-emojis') === 'on';

  try {
    generatePostSchema.parse({ prompt, tone, addHashtags, addEmojis });
  } catch (error) {
    if (error instanceof z.ZodError) {
      const errorMessages = error.errors.map((e) => e.message).join("\n");
      console.error("Validation failed:", errorMessages);
      throw new Error(errorMessages);
    }
    throw error;
  }

versions

"next": "15.3.1",
"wrangler": "^4.13.2"
"react": "^19.1.0",
"react-dom": "^19.1.0",

And wrangler.jsonc

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "main": ".open-next/worker.js",
  "name": "limao-app",
  "compatibility_date": "2025-04-02",
  "compatibility_flags": [
    "nodejs_compat"
  ],
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS",
  },
  "services": [
    {
      "binding": "WORKER_SELF_REFERENCE",
      // The service should match the "name" of your worker
      "service": "limao-app",
    },
  ],
  "minify": true,
  "observability": {
    "enabled": true
  },
  "placement": {
    "mode": "smart"
  },

But from what I see the action is never called anyways, so the problem may be in the action call.
BTW, I'll try to create a simple project to reproduce it, but I'm in a rush, so just wanted to shed some light for now!

Thanks

@vicb
Copy link
Contributor

vicb commented Apr 29, 2025

@Ryan-Adami please create a minimal repro and link it (link to a GH repository) in this issue.

@leonardo2204 you can do the same in a separate issue.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants