From dcaf582aabd0bad368e53e0077d89823120e0e24 Mon Sep 17 00:00:00 2001
From: Phillip Shiu <pshiu@users.noreply.github.com>
Date: Sat, 17 Sep 2022 16:06:21 -0400
Subject: [PATCH] Revert "Revert "Revert "fix: Edit HtmlWebpackPlugin for New
 Relic snippet from frontend-build (#593)" (#594)"" (#635)

This reverts commit ca0ff1140cc18b98abba6809f6e5abaf4d39d439.

As it turns out, this commit is the actual culprit. It is double-loading
<script>s, which triggers a bug further downstream in our project.
However, this still introduces a bug, so backing out this code.
---
 webpack.prod.config.js | 58 +++++++++++++++++++++++++++---------------
 1 file changed, 38 insertions(+), 20 deletions(-)

diff --git a/webpack.prod.config.js b/webpack.prod.config.js
index b79fe179a..efc5f90c6 100644
--- a/webpack.prod.config.js
+++ b/webpack.prod.config.js
@@ -1,35 +1,53 @@
+const path = require('path');
+const { mergeWithCustomize, unique } = require('webpack-merge');
 const { getBaseConfig } = require('@edx/frontend-build');
 // NOTE: This version of html-webpack-plugin must be the same major version as the one in
 // frontend-build to avoid potential issues.
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 /**
- * This plugin configuration edits the default in webpack-prod for the following reasons:
+ * This plugin configuration overrides the default in webpack-prod for the following reasons:
  *
  * We need to have a custom html-webpack-plugin configuration to allow us to preconnect to
  * various domains.  See the public/index.html file for the companion usage of this configuration.
  */
 
-const config = getBaseConfig('webpack-prod');
+const config = mergeWithCustomize({
+  customizeArray: unique(
+    'plugins',
+    ['HtmlWebpackPlugin'],
+    plugin => plugin.constructor && plugin.constructor.name,
+  ),
+})(
+  getBaseConfig('webpack-prod'),
+  {
+    plugins: [
+      // Generates an HTML file in the output directory.
+      new HtmlWebpackPlugin({
+        inject: false, // Manually inject head and body tags in the template itself.
+        template: path.resolve(__dirname, 'public/index.html'),
+        FAVICON_URL: process.env.FAVICON_URL || null,
+        OPTIMIZELY_PROJECT_ID: process.env.OPTIMIZELY_PROJECT_ID || null,
+        preconnect: (() => {
+          const preconnectDomains = [
+            'https://api.segment.io',
+            'https://cdn.segment.com',
+            'https://www.google-analytics.com',
+          ];
 
-/* eslint-disable no-param-reassign */
-config.plugins.forEach((plugin) => {
-  if (plugin.constructor.name === 'HtmlWebpackPlugin') {
-    const preconnectDomains = [
-      'https://api.segment.io',
-      'https://cdn.segment.com',
-      'https://www.google-analytics.com',
-    ];
+          if (process.env.LMS_BASE_URL) {
+            preconnectDomains.push(process.env.LMS_BASE_URL);
+          }
 
-    if (process.env.LMS_BASE_URL) {
-      preconnectDomains.push(process.env.LMS_BASE_URL);
-    }
+          if (process.env.OPTIMIZELY_PROJECT_ID) {
+            preconnectDomains.push('https://logx.optimizely.com');
+          }
 
-    if (process.env.OPTIMIZELY_PROJECT_ID) {
-      preconnectDomains.push('https://logx.optimizely.com');
-    }
-
-    plugin.userOptions.preconnect = preconnectDomains;
-  }
-});
+          return preconnectDomains;
+        })(),
+      }),
+    ],
+  },
+);
 
 module.exports = config;