Fix website and legacy demo in IE 11 (#19237)

apps/test-bundles/webpack.config.js

@@ -8,13 +8,13 @@ const {
   createEntry,
 } = require('./webpackUtils');
 
-const package = process.env.PACKAGE;
+const packageName = process.env.PACKAGE;
 
 let entries;
-if (package === '@fluentui/react-northstar') {
+if (packageName === '@fluentui/react-northstar') {
   createFluentNorthstarFixtures();
   entries = buildEntries('@fluentui/react-northstar');
-} else if (package === '@fluentui/react') {
+} else if (packageName === '@fluentui/react') {
   createFluentReactFixtures();
   createEntry('@fluentui/keyboard-key');
 
@@ -24,4 +24,4 @@ if (package === '@fluentui/react-northstar') {
   process.exit(1);
 }
 
-module.exports = createWebpackConfig(entries);
+module.exports = createWebpackConfig(entries, packageName);

apps/test-bundles/webpackUtils.js

@@ -7,8 +7,9 @@ const TerserPlugin = require('terser-webpack-plugin');
 
 const FIXTURE_PATH = 'temp/fixtures/';
 
-function createWebpackConfig(entries) {
+function createWebpackConfig(entries, packageName) {
   return Object.keys(entries).map(entryName => {
+    /** @type {BundleAnalyzerPlugin.Options} */
     let anaylizerPluginOptions = {
       analyzerMode: 'static',
       reportFilename: entryName + '.stats.html',
@@ -29,7 +30,7 @@ function createWebpackConfig(entries) {
           modules: true,
 
           builtAt: false,
-          outputPath: false,
+          .../** @type {*} */ ({ outputPath: false }),
           namedChunkGroups: false,
           logging: false,
           children: false,
@@ -45,7 +46,7 @@ function createWebpackConfig(entries) {
       };
     }
 
-    return resources.createConfig(
+    const config = resources.createConfig(
       entryName,
       true,
       {
@@ -69,6 +70,11 @@ function createWebpackConfig(entries) {
       true,
       true,
     )[0];
+    if (packageName === '@fluentui/react-northstar') {
+      // This is used most of the configs for IE 11 compat, which northstar doesn't need
+      delete config.target;
+    }
+    return config;
   });
 }
 

change/@fluentui-react-ee0dc0f6-cd25-46bb-a237-8505a7fe64b2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix website and legacy demo in IE 11",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -216,9 +216,9 @@
     "typescript": "4.1.5",
     "webpack": "5.44.0",
     "webpack-bundle-analyzer": "4.4.2",
-    "webpack-cli": "4.3.1",
+    "webpack-cli": "4.7.2",
     "webpack-dev-middleware": "4.2.0",
-    "webpack-dev-server": "4.0.0-beta.0",
+    "webpack-dev-server": "4.0.0-rc.0",
     "webpack-hot-middleware": "2.25.0",
     "webpack-merge": "5.7.3",
     "workspace-tools": "0.12.3",

scripts/webpack/webpack-resources.js

@@ -30,6 +30,13 @@ const cssRule = {
   use: ['style-loader', 'css-loader'],
 };
 
+/**
+ * As of webpack 5, you have to add the `es5` target for IE 11 compatibility.
+ * Otherwise it will output lambdas for smaller bundle size.
+ * https://webpack.js.org/migrate/5/#need-to-support-an-older-browser-like-ie-11
+ */
+const target = ['web', 'es5'];
+
 module.exports = {
   webpack,
 
@@ -82,6 +89,7 @@ module.exports = {
               pathinfo: false,
             },
             module,
+            target,
             devtool,
             plugins: getPlugins(packageName, false),
           },
@@ -101,6 +109,7 @@ module.exports = {
             },
 
             module,
+            target,
             devtool: excludeSourceMaps ? undefined : devtool,
             plugins: getPlugins(packageName, true, profile),
           },
@@ -263,6 +272,8 @@ module.exports = {
           ...(process.env.TF_BUILD || process.env.SKIP_TYPECHECK ? [] : [new ForkTsCheckerWebpackPlugin()]),
           ...(process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME ? [] : [new webpack.ProgressPlugin({})]),
         ],
+
+        target,
       },
       customConfig,
     );