TypeError: EventSource is not a constructor

[adbusa67]

I want to add event source in stencil component but it shows me error .
i have used this code.

import { NativeEventSource, EventSourcePolyfill } from 'event-source-polyfill';
const EventSource = NativeEventSource || EventSourcePolyfill;

componentWillLoad () {
    this.base = new BaseComponent(this, dxp)
    this.base.i18Init(dxp, 'Notification', messages)
    const eventSource = new EventSource('http://localhost:9999/notify')
    eventSource.onmessage = e => {
      const msg = e.data
      this.message = msg
    }

[Yaffle]

Could you debug this issue? Could you look what you have in the EventSource variable?

[adbusa67]

Actually even if i do not import eventsource it should work for crome. but it shows "[ts] Cannot find name 'EventSource'". but if i write it in script tag then it works but script tag is not allowed in .tsx. so any idea how to use eventsource or script tag in .tsx file ?

[Yaffle]

I have no ideas, sorry

[adbusa67]

[ ERROR ] Rollup: Missing Export: src/dxp-notification.js:4:9
'NativeEventSource' is not exported by node_modules\event-source-polyfill\src\eventsource.js i figured it but now i am getting this error while building.
any idea about that ?

[Yaffle]

No, what is the best way to export the NativeEventSource?

[adbusa67]

can you provide eventsource.ts typeScript of same eventsource.js file ?
that might work.

[Yaffle]

could you create a pulll request with that file?

[franzcortez1127]

Similar issue below?

TypeError: ActiveXObject is not a constructor
at new XMLHttpRequest (/Users/ts-cortez.franz/ts-sample/node_modules/event-source-polyfill/src/eventsource.js:37:14)
at getBestXHRTransport (/Users/ts-cortez.franz/ts-sample/node_modules/event-source-polyfill/src/eventsource.js:724:9)
at start (/Users/ts-cortez.franz/ts-sample/node_modules/event-source-polyfill/src/eventsource.js:743:148)
at new EventSourcePolyfill (/Users/ts-cortez.franz/ts-sample/node_modules/event-source-polyfill/src/eventsource.js:719:5)
at /Users/ts-cortez.franz/ts-sample/dist/index.js:32:22
at Layer.handle [as handle_request] (/Users/ts-cortez.franz/ts-sample/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/ts-cortez.franz/ts-sample/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/Users/ts-cortez.franz/ts-sample/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/Users/ts-cortez.franz/ts-sample/node_modules/express/lib/router/layer.js:95:5)
at /Users/ts-cortez.franz/ts-sample/node_modules/express/lib/router/index.js:281:22

[Yaffle]

@franzcortez1127 , are you trying to use it in node.js? It was never working this way, only in browsers, which provide "fetch API". Not sure if it is hard to add node.js support.

[alexfilitaryn-awtg]

I have tried it with Nest.js. Looks like the same issue.
TypeError: eventsource_1.EventSource is not a constructor.

Possible some updates or plans with fixing it?

[Yaffle]

@alexfilitaryn-awtg , please propose a fix, I have no idea how to fix it

[alexfilitaryn-awtg]

In my case the issue happened with the origin lib https://www.npmjs.com/package/eventsource and I thought that here could be similar solution. Anyway for my case with origin lib was enough only use correct importing import * as EventSource from 'eventsource';.

[Yaffle]

@alexfilitaryn-awtg thanks for the info
Thus lib does not export anything as es module and so you can only import 'EventSource.js' and then aget the constructor from globalThis . I do not know howpeople use it or if someone uses packers and if they modify the code somehow. The lib cannot be updated to export for compatibility with okd browsers