typescript - hur man fixar felet EventSource ej definierad?

Jag arbetar med att lägga till SSE Events i mitt Next JS-projekt. Jag har en URL för att komma åt SSE Events.

Här är koden:

const ssEvents = new EventSource(stream_url,{withCredentials:false})
  
  ssEvents.addEventListener("participant.details", (e)=>{
    var data = JSON.parse(e.data)
    console.log(data)
  })

Jag får felet EventSource not defined. Eftersom EventSource är ett inbyggt bibliotek i js. Jag kan till och med använda .addEventListener i det. Men vid körning visar det EventSource not defined. Jag vet inte varför det visas. Är det något jag har missat att lägga till i min kod? Vänligen hjälp mig med några lösningar för att fixa detta. Koden är i Typescript. Måste jag lägga till något extra?

Felspårning:

error - pages/index.tsx (55:19) @ Home
ReferenceError: EventSource is not defined

  54 | 
> 55 |   const ssEvents = new EventSource(stream_url,{withCredentials:false})
     |                   ^
  56 |

tsConfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "src/utils/analytics/index.js",
    "react-google-captcha.d.ts",
    "src/providers/apollo.tsx",
    "src/providers/apollo-client.ts",
    "src/utils/wallet/walletManager.js"
  ],
  "exclude": ["node_modules"]
}

Svar #1

Ditt problem är att NextJS finns på serversidan.

Och EventSource existerar inte på Node.

Se till att din SSE-kod endast körs i webbläsaren.

Svar #2

Jag har stött på problem som detta också när jag använder Nuxt3 (inte NextJS). Min lösning är att göra så att filen som använder det bara renderas i klienten genom att lägga till client-taggen (<ClientOnly> i Nuxt3).

Men jag tror att i NextJS kan du lägga till 'use client' högst upp i den filen.

Referenser :

  • https://nextjs.org/docs/getting-started/react-essentials

Relaterade artiklar