ERROR TypeError: (intermediate value)(intermediate value)(intermediate value).request is not a function

[udhayakumarcp]

Hi Team,

I am using this package in the Angular application. Please find angular environment details below

I am trying to use SSE through this package by using the following code

import  EventSource  from 'eventsource';

const eventSourceUrl = 'http://localhost:3000/v1/notifications';

const eventSourceInitDict = { headers: { Authorization: 'Tokken' } };
const noticationEventSource = new EventSource(eventSourceUrl, eventSourceInitDict);

But unfortunately, it throws the following error ERROR TypeError: (intermediate value)(intermediate value)(intermediate value).request is not a function

[kevincentius]

I am getting the same error in Angular 13

ERROR Error: Uncaught (in promise): TypeError: (intermediate value)(intermediate value)(intermediate value).request is not a function
TypeError: (intermediate value)(intermediate value)(intermediate value).request is not a function
    at connect (eventsource.js:146:37)
    at new EventSource (eventsource.js:283:3)
    ...
    at tryCatch (runtime.js:63:40)
    at Generator.invoke [as _invoke] (runtime.js:294:22)
    at Generator.next (runtime.js:119:21)
    at tslib.es6.js:76:1
    at new ZoneAwarePromise (zone.js:1387:29)
    at __awaiter (tslib.es6.js:72:1)
    ...
    at resolvePromise (zone.js:1213:31)
    at new ZoneAwarePromise (zone.js:1390:17)
    at __awaiter (tslib.es6.js:72:1)
    ...
    at executeListenerWithErrorHandling (core.mjs:14979:16)
    at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15017:22)
    at HTMLButtonElement.<anonymous> (platform-browser.mjs:466:38)
    at ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:25535:33)

[zeid0ne]

Hi, i have the same error with vue, in an electron app using vite and quasar.

eventsource version : 2.0.2

[sam-6174]

This can happen if you don't polyfill https

In my case, with React + Vite, I had to add https to vite.config.mjs, so that it looks like:

import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
    plugins: [
      nodePolyfills({
        include: [
          // 👇 eventsource 👇
          'events',
          'http',
          'https',
          'url',
          'util',
          // 👆 eventsource 👆
        ],
      }),
      // ...
    ],
    // ...
});

[udhayakumarcp]

@sam-6174 , Thanks for the post. Is this working for you?

[sam-6174]

@sam-6174 , Thanks for the post. Is this working for you?

Correct 👍

[mlanlazc]

I spent a lot of time trying to figure out what is wrong, but in the end it turned out that the solution is as simple as it gets. This is my config (vite version: 5.4.1), and it works for both development and production builds:

export default defineConfig({
  plugins: [
    react(),
    svgr({
      svgrOptions: {
        plugins: ["@svgr/plugin-jsx"],
      },
    }),
    eslint(),
    nodePolyfills(),
  ],
  server: {
    port: 3000,
  },
  resolve: {
    alias: [
      {
        find: "@/",
        replacement: `${path.resolve(__dirname, "src")}/`,
      },
    ],
  },
});

Many replies on Stackoverflow and in GH issues are actually misleading as they suggest using @esbuild-plugins/node-modules-polyfill @esbuild-plugins/node-globals-polyfill and rollupNodePolyFill (e.g. https://github.com/EventSource/eventsource/issues/285).

I tried many different combinations with that and did not manage to get both development server and production build to work the same. With the config above, everything works smoothly.