Add IE11 support recipe

[mattgallagher92]

Babel is no longer part of the default template from dotnet new safe. This made npm and webpack maintenance easier, but means that the client is no longer compatible with Internet Explorer. Add a recipe that explains how to add IE11 support back.

Relates to https://github.com/SAFE-Stack/SAFE-template/pull/415#issuecomment-851579254.

[mattgallagher92]

Kevin Frey has provided some information to help:

• Minimal repo updated to work with IE11
• Relevant part of package.json:

        "@babel/core": "^7.16.0",
        "@babel/preset-env": "^7.16.0",
        "babel-loader": "^8.2.3",
  

• webpack.config.js CONFIG:

      babel: {
        presets: [
            ['@babel/preset-env', {
                modules: false,
                // This adds polyfills when needed. Requires core-js dependency.
                // See https://babeljs.io/docs/en/babel-preset-env#usebuiltins
                // Note that you still need to add custom polyfills if necessary (e.g. whatwg-fetch)
                useBuiltIns: 'usage',
                corejs: 3
            }]
        ],
    }
  

• webpack.config.js module.exports target:

    target: ["web", "es5"],
  

• webpack.config.js module.exports module rules:

    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: CONFIG.babel
                },
            },
            ...
  

[Freymaurer]

While working with webpack 5 and the changes shown above i noticed that hot module replacement is broken. I checked the error message and found the following post referring to this comment.

So by expanding optimization with runtimeChunk: "single" it works again.

// more context
module.exports = {
    // ..
    optimization: {
        splitChunks: {
            chunks: 'all'
        },
        runtimeChunk: "single"
    },
    // ..
}

[Freymaurer]

Not sure when exactly this broke down. But these steps are not longer able to provide ie 11 compatibility with the newest SAFE stack version.

[isaacabraham]

@Freymaurer Is this still an issue you're seeing (i.e. requirement) given that it's not even supported by Microsoft any longer?

[Freymaurer]

I understand this is an edge case. I used this for an excel add-in. Excel 2019 still uses ie11 as in app browser.

[martinbryant]

Closing this as end of life of Internet Explorer was 15 June 2022 - https://www.microsoft.com/en-US/download/details.aspx?id=41628