From 2c7a9e4f09103e4ee05074defc1b18843ce45d41 Mon Sep 17 00:00:00 2001
From: Kar Rui Lau <karrui@open.gov.sg>
Date: Tue, 30 Apr 2024 15:21:14 +0800
Subject: [PATCH] feat: load datadog-chunk as separate script from main react
 app

---
 frontend/.gitignore           |  2 --
 frontend/.prettierignore      |  1 -
 frontend/index.html           |  3 ++-
 frontend/package.json         |  1 -
 frontend/tsconfig.dd.json     | 15 ------------
 frontend/vite.config.ts       |  8 +++++++
 frontend/webpack.dd.config.js | 43 -----------------------------------
 7 files changed, 10 insertions(+), 63 deletions(-)
 delete mode 100644 frontend/tsconfig.dd.json
 delete mode 100644 frontend/webpack.dd.config.js

diff --git a/frontend/.gitignore b/frontend/.gitignore
index 3710868679..6d48275991 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -28,5 +28,3 @@ build-storybook.log
 # Lint cache
 .eslintcache
 
-#Datadog chunk files
-datadog-chunk.*.js
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
index 2d2139db1e..7e400bf0de 100644
--- a/frontend/.prettierignore
+++ b/frontend/.prettierignore
@@ -26,7 +26,6 @@ storybook-static
 build-storybook.log
 
 tsconfig.json
-tsconfig.dd.json
 
 # all asset json files
 **/assets/**/*.json
diff --git a/frontend/index.html b/frontend/index.html
index 2823abffd2..c1f97230a8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -46,6 +46,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="./src/index.tsx"></script>
+    <script type="module" src="./datadog-chunk.ts"></script>
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
index ef1d020387..9bfc7cf4d0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -112,7 +112,6 @@
     "start": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "build:dd-chunk": "webpack --config webpack.dd.config.js",
     "test": "cross-env SKIP_PREFLIGHT_CHECK=true vitest",
     "eject": "react-scripts eject",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006",
diff --git a/frontend/tsconfig.dd.json b/frontend/tsconfig.dd.json
deleted file mode 100644
index e2580f5745..0000000000
--- a/frontend/tsconfig.dd.json
+++ /dev/null
@@ -1,15 +0,0 @@
-// Config file for ts-loader in webpack.dd.config.js
-{
-    "compilerOptions": {
-      "outDir": "../../dist/frontend/static/js/",
-      "noImplicitAny": true,
-      "module": "es6",
-      "target": "es2015",
-      "jsx": "react",
-      "allowJs": true,
-      "moduleResolution": "node"
-    },
-    "include": [
-      "datadog-chunk.ts"
-    ]
-}
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 59cebbe971..f4d9cea1f4 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -10,6 +10,14 @@ export default defineConfig(() => {
     build: {
       outDir: '../dist/frontend',
       emptyOutDir: true,
+      rollupOptions: {
+        output: {
+          // Manually chunk datadog-chunk.ts so it gets preloaded in index.html instead of app.
+          manualChunks: {
+            'datadog-chunk': ['datadog-chunk.ts'],
+          },
+        },
+      },
     },
     base: './',
     server: {
diff --git a/frontend/webpack.dd.config.js b/frontend/webpack.dd.config.js
deleted file mode 100644
index 040bf2bf28..0000000000
--- a/frontend/webpack.dd.config.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/* eslint-disable */
-// Webpack config to bundle datadog chunk to be loaded before rest of the react app
-const path = require('path')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-
-module.exports = {
-  entry: {
-    index_head: './datadog-chunk.ts', // _head suffix tells HtmlWebpackPlugin to inject this chunk into the head of index.html
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: {
-              configFile: 'tsconfig.dd.json',
-            },
-          },
-        ],
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  output: {
-    filename: 'datadog-chunk.[contenthash].js',
-    path: path.resolve('static/js'),
-  },
-  // inject the datadog chunk filename into the head of the existing index.html and overwrites index.html
-  plugins: [
-    new HtmlWebpackPlugin({
-      filename: path.resolve('public/index.html'),
-      template: path.resolve('public/index.html'),
-      inject: 'head',
-      minify: false, // Retain non-minified html formatting for readability
-      chunks: ['index_head'],
-    }),
-  ],
-}