eventsourcestencil-component

EventSource.js not exporting NativeEventSource, EventSourcePolyfill


I am adding polyfill to my stencil component. here is my component.tsx file

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

    ...code ....

    export class Notification {
      ...code ..
      componentWillLoad () {
     const eventSource = new EventSource(this.serverUrl)
    eventSource.onmessage = function(e){
      let msg = e.data;
      myMsg.message=msg;
    };
    }
    }
render () {
const styles = [
<link rel="stylesheet" href={`${process.env.DXP_STYLE_BASE_URL}/dxp.css`}/>,
]
return (
<div class={this.base.componentClass()} dir={this.dir}>
{styles}
<p>{this.message}</p>
</div>
)
}

My build is failing. it shows this error

[ ERROR ] Rollup: Missing Export: src/dxp-notification.js:4:9 'NativeEventSource' is not exported by node_modules\event-source-polyfill\src\eventsource.js

I have included event-source-polyfill in node_modules with latest version.


Solution

  • I just figured out that stencil should provide the built in support for eventsource polyfill and that is the best and permanent solution or we can load a script while consuming the component for polyfill.