javascript - NextJS (15.1.7): ReferenceError: XMLHttpRequest är inte definierad

FELBESKRIVNING

Hej allihopa! Här är ett kodavsnitt från mitt frontend:

'use client';

import Image from "next/image";

import { doSomething } from "./serveractions/do-something";

export default function Home() {
  const handleClick = async () => {
    await doSomething()
  }

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <button onClick={handleClick}>Press me</button>
...

Att klicka på denna knapp anropar Server Action-funktionen som använder @basisai/remote-zip för att lista filer i ZIP via URL:

'use server';

import { RemoteZipPointer } from "@basisai/remote-zip";

export const doSomething = async() => {
    const url = new URL("https://github.com/unidoc/unipdf/archive/refs/tags/v3.66.0.zip");
    const remoteZip = await new RemoteZipPointer({ url }).populate();
    const files = remoteZip.files(); 

    files.forEach(file => console.log(file.filename));
}

Att klicka på den knappen genererar serversidefel: serversidefel klientsidefel

Om jag använder exakt samma kod på ett rent NodeJS (Bun) projekt utan NextJS, fungerar koden som förväntat och filer skrivs ut till konsolen.

VAD JAG GJORDE FÖR ATT LÖSA DETTA

Efter att ha googlat lite provade jag flera nämnda lösningar som hjälpte någon:

  1. Återskapade NextJS-projektet med npm, yarn och pnpm. (inget ändrades)
  2. global.XMLHttpRequest=require('xmlhttprequest').XMLHttpRequest; (kastar 'TypeError: i.arrayBuffer är inte en funktion' fel)
  3. global.XMLHttpRequest=require('xhr2'); (kastar 'TypeError: i.arrayBuffer är inte en funktion' fel)
  4. global.XMLHttpRequest=require('node-fetch'); (kastar 'TypeError: i.arrayBuffer är inte en funktion' fel)

Jag uppskattar alla svar på hur man löser detta eller hur man korrekt använder server-side-bibliotek med NextJS som använder XMLHttpRequest under huven :)

Svar #1

import { RemoteZipPointer } from "@basisai/remote-zip";
  • basisai/remote-zip importerar cross-fetch med version ^3.1.5.
  • cross-fetch har ett avslutat ärende om XMLHttpRequest är inte definierad-felet, vilket det verkar ha blivit fixat i version 4.

Tyvärr är basisai/remote-zip-repoet arkiverat, och det ser ut som att basisai-organisationen också är inaktiv, så du kan inte skapa issues/PRs där och det är osannolikt att de släpper några uppdateringar. Så ditt bästa alternativ är troligen att vendorisera det och antingen ersätta cross-fetch-beroendet med v4.x eller ta bort det helt. De flesta (alla?) moderna JS-miljöer stöder fetch nativt, så du kan troligen bara ta bort det (och ersätta anrop till new fetch.Headers med new Headers).