Adding event-source-polyfill to webpack in aurelia

Question

I have my application build in asp.net core spa with aurelia and webpack (based on Rob Eisenberg's tutorial). It runs perfectly on chrome and firefox, but in IE, which is the main browser that I need to support, it has issues with hot module reload. I get this error: webpack-hot-middleware's client requires EventSource to work. You should include a polyfill if you want to support this browser

I ran npm install event-source-polyfill In devdependencies of package.json, I added:

    "webpack-hot-middleware": "^2.18.0",
    "event-source-polyfill": "^0.0.12"

Then in my webpack.config.js, I added

    module.exports = {
       entry: ['app': ['event-source-polyfill', 'aurelia-bootstrapper'],
          // ...
    };

as suggested here: https://github.com/jods4/aurelia-webpack-build/wiki/Polyfills

I also added

    new webpack.ProvidePlugin({
           es: 'event-source-polyfill'
       }),

inside plugins of webpack.config.js Then I imported import 'event-source-polyfill/src/eventsource.min.js'. My event-source-polyfill lives inside node-modules folder. Should I manually copy it somewhere? Then how do I actually use it? I do not know what to do in aurelia to tell it to use this polyfill for IE. So far the error is still the same.

I'm voting to close this question as off-topic because This is not a question. It is a feature request. Please raise it as an issue @ https://github.com/aurelia/cli repo To be fair your issue is about developing with IE, not runing the app in IE. And that is torture (-: — Alexander Taran, Mar 23 '18 at 10:44
@AlexanderTaran Does it mean it is not possible? Could you suggest an alternative to this? I have completed making the application before I realized it does not work in IE :( — she, Mar 25 '18 at 20:23
@AlexanderTaran I should clarify that I'm ok with developing using another browser but I need it to run in IE. The problem I'm having while running the application is when I update something, it does not update on the view before numerous page reloads or restarting the app. The bigger issue is IE throwing "localhost is not loading due to a long running script" and hanging. The error I got in console is "You should include a polyfill if you want to support this browser", hence I thought these were related. Should I post a new question? — she, Mar 25 '18 at 20:47
As you yourself noted - the polyfil is needed for HMR in webpack. You don't run in production with webpack. Right? You shouldn't. Try build for prod and see how it goes. — Alexander Taran, Mar 25 '18 at 22:32

score 0 · Answer 1 · answered Sep 27 '19 at 05:56

Before I answer your question, let me say that Alex Taran is right, HMR won't work with IE even if you do add the event-source polyfill, and no-one capable of making it work with IE is interested in doing so.

Nevertheless, the actual question is how to add the event-source polyfill via webpack and this can indeed be done. Here's how.

Near the bottom of your webpack.config.js file you will find the plugins section. You need to add or modify webpack.ProvidePlugin as illustrated. In this snippet it adds jquery and the line for the event source plugin is commented out.

    plugins: [
        new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
        new webpack.ProvidePlugin({
            //"window.EventSource": ['event-source-polyfill', 'EventSourcePolyfill'],
            $: "jquery", jQuery: "jquery", "window.jQuery": "jquery"
        }),
        new HtmlWebpackPlugin({ template: 'Views/Shared/_LayoutTemplate.cshtml', filename: "../../Views/Shared/_Layout.cshtml", inject: false, metadata: {}, alwaysWriteToDisk: true }),
        new AureliaPlugin({ aureliaApp: "boot" }),
        new GlobDependenciesPlugin({ "boot": ["ClientApp/**/*.{ts,html}"] }),
        new ModuleDependenciesPlugin({}),
        extractCSS
    ]

Obviously you have to add it with npm first.

Adding event-source-polyfill to webpack in aurelia

1 Answers1