@elliemae/pui-cli 9.0.0-next.6 → 9.0.0-next.61

package/dist/esm/webpack/helpers.js

@@ -1,8 +1,8 @@
 import path from "node:path";
 import fs from "node:fs";
+import zlib from "zlib";
 import _ from "lodash";
 import CompressionPlugin from "compression-webpack-plugin";
-import zlib from "zlib";
 import { findMonoRepoRoot } from "../monorepo/utils.js";
 import { basePath, getAppConfig } from "../utils.js";
 let pathSep = path.sep;
@@ -15,10 +15,9 @@ const getNodeModulesRegEx = (modules) => modules.map(
 const excludeNodeModulesExcept = (modules) => {
   const moduleRegExps = getNodeModulesRegEx(modules);
   return function(modulePath) {
-    if (/node_modules/.test(modulePath)) {
-      for (let i = 0; i < moduleRegExps.length; i += 1)
-        if (moduleRegExps[i].test(modulePath))
-          return false;
+    if (modulePath.includes("node_modules")) {
+      for (const moduleRegExp of moduleRegExps)
+        if (moduleRegExp.test(modulePath)) return false;
       return true;
     }
     return false;
@@ -32,7 +31,7 @@ const getLibraryName = () => {
   const modifiedLibName = `emui-${libraryName.replace("@elliemae/", "").replace("pui-", "")}`;
   return _.camelCase(modifiedLibName);
 };
-const getLibraryVariableName = () => (process.env.LIBRARY_VARIABLE_NAME || getLibraryName()).split(".");
+const getLibraryVariableName = () => (process.env.LIBRARY_VARIABLE_NAME ?? getLibraryName()).split(".");
 const mapToFolder = (dependencies, folder) => dependencies.reduce(
   (acc, dependency) => ({
     [dependency]: path.resolve(`${folder}/${dependency.replace("$", "")}`),
@@ -41,7 +40,7 @@ const mapToFolder = (dependencies, folder) => dependencies.reduce(
   {}
 );
 const getAlias = () => {
-  const monorepoRoot = findMonoRepoRoot(process.cwd()) || "";
+  const monorepoRoot = findMonoRepoRoot(process.cwd()) ?? "";
   return mapToFolder(
     [
       "@babel/runtime",
@@ -55,6 +54,8 @@ const getAlias = () => {
       "styled-components",
       "immer",
       "react-dates",
+      "react-select",
+      "react-spring",
       "react-transition-group",
       "@elliemae/pui-cli",
       "@elliemae/pui-app-sdk$",
@@ -63,6 +64,15 @@ const getAlias = () => {
     path.join(monorepoRoot, "./node_modules")
   );
 };
+const getLibraryAlias = (name, alias) => {
+  const monorepoRoot = findMonoRepoRoot(process.cwd()) ?? "";
+  const aliasPath = path.resolve(
+    `${path.join(monorepoRoot, "./node_modules")}/${alias}`
+  );
+  return {
+    [name]: aliasPath
+  };
+};
 const modulesToTranspile = [
   "@elliemae/pui-*",
   "@elliemae/ds-*",
@@ -75,12 +85,11 @@ const getUserMonitoringFileName = () => {
     process.cwd(),
     "node_modules/@elliemae/pui-user-monitoring/dist/public/js"
   );
-  if (!fs.existsSync(userMonLibPath))
-    return `${libName}.js`;
+  if (!fs.existsSync(userMonLibPath)) return `${libName}.js`;
   const distJSFiles = fs.readdirSync(userMonLibPath);
-  return distJSFiles.filter(
-    (fName) => fName.match(/emuiUserMonitoring+((?!chunk).)*\.js$/)
-  )[0];
+  return distJSFiles.find(
+    (fName) => /emuiUserMonitoring+((?!chunk).)*\.js$/.exec(fName)
+  );
 };
 const getAppLoaderFileName = () => {
   const libName = "emuiAppLoader";
@@ -88,12 +97,11 @@ const getAppLoaderFileName = () => {
     process.cwd(),
     "node_modules/@elliemae/pui-app-loader/dist/public/js"
   );
-  if (!fs.existsSync(appLoaderLibPath))
-    return `${libName}.js`;
+  if (!fs.existsSync(appLoaderLibPath)) return `${libName}.js`;
   const distJSFiles = fs.readdirSync(appLoaderLibPath);
-  return distJSFiles.filter(
-    (fName) => fName.match(/emuiAppLoader+((?!chunk).)*\.js$/)
-  )[0];
+  return distJSFiles.find(
+    (fName) => /emuiAppLoader+((?!chunk).)*\.js$/.exec(fName)
+  );
 };
 const getDiagnosticsFileName = () => {
   const libName = "emuiDiagnostics";
@@ -101,12 +109,11 @@ const getDiagnosticsFileName = () => {
     process.cwd(),
     "node_modules/@elliemae/pui-diagnostics/dist/public/js"
   );
-  if (!fs.existsSync(libPath))
-    return `${libName}.js`;
+  if (!fs.existsSync(libPath)) return `${libName}.js`;
   const distJSFiles = fs.readdirSync(libPath);
-  return distJSFiles.filter(
-    (fName) => fName.match(/emuiDiagnostics+((?!chunk).)*\.js$/)
-  )[0];
+  return distJSFiles.find(
+    (fName) => /emuiDiagnostics+((?!chunk).)*\.js$/.exec(fName)
+  );
 };
 const getENCWLoaderFileName = () => {
   const libName = "emuiEncwLoader";
@@ -114,18 +121,16 @@ const getENCWLoaderFileName = () => {
     process.cwd(),
     "node_modules/@elliemae/encw-loader/dist/public/js"
   );
-  if (!fs.existsSync(appLoaderLibPath))
-    return `${libName}.js`;
+  if (!fs.existsSync(appLoaderLibPath)) return `${libName}.js`;
   const distJSFiles = fs.readdirSync(appLoaderLibPath);
-  return distJSFiles.filter(
-    (fName) => fName.match(/emuiEncwLoader+((?!chunk).)*\.js$/)
-  )[0];
+  return distJSFiles.find(
+    (fName) => /emuiEncwLoader+((?!chunk).)*\.js$/.exec(fName)
+  );
 };
 const getAppVersion = () => {
-  if (!process.env.APP_VERSION)
-    return LATEST_VERSION;
-  const match = process.env.APP_VERSION.match(/^v?(\d+\.\d+)\..*$/);
-  return match && match[1] || LATEST_VERSION;
+  if (!process.env.APP_VERSION) return LATEST_VERSION;
+  const match = /^v?(\d+\.\d+)\..*$/.exec(process.env.APP_VERSION);
+  return match?.[1] ?? LATEST_VERSION;
 };
 const getPaths = (latestVersion = true) => {
   const version = latestVersion ? LATEST_VERSION : getAppVersion();
@@ -160,9 +165,9 @@ const getCompressionPlugins = (isLibrary = false) => {
   ];
   const commonConfig = {
     test: /\.(js|css)$/,
-    exclude: !isLibrary ? excludeList : [],
     // we are compressing all files since in aws cloudfront edge lambda, we don't want to whitelist files that are not compressed due to below limits
-    minRatio: Infinity
+    minRatio: Infinity,
+    ...!isLibrary ? { exclude: excludeList } : {}
   };
   return [
     new CompressionPlugin({
@@ -202,6 +207,7 @@ export {
   getAlias,
   getAppVersion,
   getCompressionPlugins,
+  getLibraryAlias,
   getLibraryName,
   getLibraryVariableName,
   getMediaPath,

package/dist/esm/webpack/interceptor-middleware.js

@@ -0,0 +1,105 @@
+const VALID_PARAMS = ["isInterceptable", "intercept", "afterSend"];
+const validateParams = (methods) => {
+  Object.keys(methods).forEach((k) => {
+    if (!VALID_PARAMS.includes(k)) {
+      throw new Error(`${k} isn't a valid param (${VALID_PARAMS.join(", ")})`);
+    }
+  });
+  if (!("isInterceptable" in methods)) {
+    throw new Error("isInterceptable is a required param (function)");
+  }
+};
+const interceptorMiddleware = (fn) => (req, res, next) => {
+  const methods = fn(req, res);
+  validateParams(methods);
+  const originalEnd = res.end;
+  const originalWrite = res.write;
+  const chunks = [];
+  let isIntercepting;
+  let isFirstWrite = true;
+  function intercept(rawChunk, encoding) {
+    if (isFirstWrite) {
+      isFirstWrite = false;
+      isIntercepting = methods.isInterceptable();
+    }
+    if (isIntercepting) {
+      if (rawChunk) {
+        let tempChunk = rawChunk;
+        if (rawChunk !== null && !Buffer.isBuffer(tempChunk)) {
+          if (!encoding) {
+            tempChunk = Buffer.from(rawChunk);
+          } else {
+            tempChunk = Buffer.from(
+              rawChunk,
+              encoding
+            );
+          }
+        }
+        chunks.push(tempChunk);
+      }
+    }
+    return isIntercepting;
+  }
+  const newResWrite = (...args) => {
+    if (!intercept(args[0], args[1])) {
+      return originalWrite.apply(res, args);
+    }
+    return true;
+  };
+  res.write = newResWrite;
+  const afterSend = (oldBody, newBody) => {
+    if (typeof methods.afterSend === "function") {
+      process.nextTick(() => {
+        methods.afterSend?.(oldBody, newBody);
+      });
+    }
+  };
+  const newResEnd = (...args) => {
+    if (intercept(args[0], args[1])) {
+      isIntercepting = false;
+      const oldBody = Buffer.concat(chunks).toString("utf-8");
+      if (methods.intercept) {
+        if (typeof methods.intercept !== "function") {
+          throw new Error(
+            "`send` must be a function with the body to be sent as the only param"
+          );
+        }
+        res.removeHeader("Content-Length");
+        methods.intercept(oldBody, (newBody) => {
+          args[0] = newBody;
+          originalEnd.apply(res, args);
+          afterSend(oldBody, newBody);
+        });
+      } else {
+        afterSend(oldBody, oldBody);
+        originalEnd.apply(res, args);
+      }
+    } else {
+      originalEnd.apply(res, args);
+    }
+  };
+  res.end = newResEnd;
+  next();
+};
+const addCSPNonceMiddleware = (middlewares) => {
+  const index = middlewares.findIndex(
+    (middleware) => middleware.name === "webpack-dev-middleware"
+  );
+  middlewares.splice(index, 0, {
+    name: "csp-nonce-middleware",
+    middleware: interceptorMiddleware((_req, res) => ({
+      // Only HTML responses will be intercepted
+      isInterceptable() {
+        return (res.get("Content-Type") ?? "").includes("text/html");
+      },
+      // Appends a paragraph at the end of the response body
+      intercept(body, send) {
+        send(body.replace(/__CSP_NONCE__/g, res.locals.cspNonce));
+      }
+    }))
+  });
+};
+export {
+  addCSPNonceMiddleware,
+  interceptorMiddleware
+};

package/dist/esm/webpack/webpack.base.babel.js

@@ -102,14 +102,16 @@ const plugins = [
         noErrorOnMissing: true,
         globOptions: {
           ignore: ["readme.md"]
-        }
+        },
+        info: { minimized: true }
       },
       {
         from: "webroot",
         noErrorOnMissing: true,
         globOptions: {
           ignore: ["readme.md"]
-        }
+        },
+        info: { minimized: true }
       }
     ])
   }),
@@ -118,7 +120,7 @@ const plugins = [
     fileName: "./latest/manifest.json",
     publicPath: "",
     map: (file) => {
-      file.name = file.name.replace(/^latest\//, "");
+      file.name = file.name.replace(/^latest(\/|\\)/, "");
       return file;
     }
   }),
@@ -257,36 +259,20 @@ const baseConfig = (options) => ({
     mainFields: ["browser", "module", "main"],
     alias: {
       ...getAlias(),
-      ...(options.resolve || {}).alias || {}
+      ...options.resolve?.alias ?? {}
     }
   },
+  externalsPresets: {
+    web: true
+  },
   externals: {
     "@elliemae/pui-user-monitoring": "emuiUserMonitoring",
     "@elliemae/pui-app-loader": "emuiAppLoader",
-    "@elliemae/pui-diagnostics": "emuiDiagnostics",
-    react: "emuiAppReactDependencies.react",
-    "react-dom": "emuiAppReactDependencies.reactDOM",
-    "@reduxjs/toolkit": "emuiAppReactDependencies.rtk",
-    axios: "emuiAppReactDependencies.axios.default",
-    dompurify: "emuiAppReactDependencies.dompurify",
-    history: "emuiAppReactDependencies.history",
-    immer: "emuiAppReactDependencies.immer",
-    invariant: "emuiAppReactDependencies.invariant",
-    "pubsub-js": "emuiAppReactDependencies.pubsubjs",
-    "react-aria-live": "emuiAppReactDependencies.reactAriaLive",
-    "react-helmet": "emuiAppReactDependencies.reactHelmet",
-    "react-hook-form": "emuiAppReactDependencies.reactHookForm",
-    "react-redux": "emuiAppReactDependencies.reactRedux",
-    "react-router-dom": "emuiAppReactDependencies.reactRouterDOM",
-    reduxInjectors: "emuiAppReactDependencies.reduxInjectors",
-    reselect: "emuiAppReactDependencies.reselect",
-    // "styled-components": "emuiAppReactDependencies.styledComponents",
-    "styled-system": "emuiAppReactDependencies.styledSystem"
-    // "@xstyled/styled-components": "emuiAppReactDependencies.xstyled",
+    "@elliemae/pui-diagnostics": "emuiDiagnostics"
   },
-  devtool: options.devtool || "eval-source-map",
-  performance: options.performance || {},
-  devServer: options.devServer || {}
+  devtool: options.devtool ?? "eval-source-map",
+  performance: options.performance ?? {},
+  devServer: options.devServer ?? {}
 });
 export {
   baseConfig

package/dist/esm/webpack/webpack.dev.babel.js

@@ -6,6 +6,7 @@ import CircularDependencyPlugin from "circular-dependency-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
 import expressStaticGzip from "express-static-gzip";
+import { addCSPNonceMiddleware } from "./interceptor-middleware.js";
 import { setupDefaultMiddlewares } from "../server/middlewares.js";
 import { loadRoutes } from "../server/appRoutes.js";
 import {
@@ -14,6 +15,10 @@ import {
   isGoogleTagManagerEnabled
 } from "./helpers.js";
 import { baseConfig } from "./webpack.base.babel.js";
+import { wsPort } from "../server/utils.js";
+import { createWSServer } from "../server/wsServer.js";
+import { getCertOptions } from "../server/cert.js";
+import { isHttps } from "../utils.js";
 const __filename = fileURLToPath(import.meta.url);
 const {
   appVersion,
@@ -25,6 +30,10 @@ const {
   diagnosticsScriptPath,
   encwLoaderScriptPath
 } = getPaths();
+const serverOptions = {
+  type: "https",
+  options: getCertOptions()
+};
 const devConfig = {
   mode: "development",
   cache: {
@@ -68,7 +77,7 @@ const devConfig = {
   // Add development plugins
   plugins: [
     new HtmlWebpackPlugin({
-      inject: !isAppLoaderEnabled(),
+      inject: !isAppLoaderEnabled() && process.env.CSP !== "true",
       // Inject all files that are generated by webpack, e.g. bundle.js
       template: !isAppLoaderEnabled() ? "app/index.html" : "app/index-app-loader.html",
       emui: {
@@ -79,9 +88,14 @@ const devConfig = {
         appLoaderScriptPath,
         diagnosticsScriptPath,
         encwLoaderScriptPath,
-        googleTagManager: isGoogleTagManagerEnabled()
-      }
+        googleTagManager: isGoogleTagManagerEnabled(),
+        csp: process.env.CSP === "true"
+      },
+      scriptLoading: "defer"
     }),
+    // new CspPlugin(HtmlWebpackPlugin, {
+    //   enableUnsafeEval: true,
+    // }),
     new CircularDependencyPlugin({
       exclude: /a\.(js|ts|jsx|tsx)|node_modules/,
       // exclude node_modules
@@ -113,12 +127,13 @@ const devConfig = {
     },
     hot: true,
     open: [basePath],
-    port: process.env.PORT || "auto",
+    port: process.env.PORT ?? "auto",
+    server: isHttps() ? serverOptions : {},
     setupMiddlewares: (middlewares, devServer) => {
+      addCSPNonceMiddleware(middlewares);
       if (devServer.app) {
         setupDefaultMiddlewares(devServer.app);
-        loadRoutes(devServer.app).then(() => {
-        }).catch((err) => {
+        loadRoutes(devServer.app).catch((err) => {
           console.error(err);
         });
         const cdnRouter = expressStaticGzip("cdn", {});
@@ -130,6 +145,13 @@ const devConfig = {
           }
           next();
         });
+        createWSServer({
+          port: wsPort
+        }).then(({ wsServer }) => {
+          if (devServer.app) devServer.app.locals.wsServer = wsServer;
+        }).catch((err) => {
+          console.error(err);
+        });
       }
       return middlewares;
     }

package/dist/esm/webpack/webpack.lib.base.babel.js

@@ -39,13 +39,11 @@ const plugins = [
   new webpack.DefinePlugin({
     APP_CONFIG: getAppConfig()
   }),
-  /* eslint-disable indent */
   ...copyPluginPatterns.length > 0 ? [
     new CopyWebpackPlugin({
       patterns: copyPluginPatterns
     })
   ] : [],
-  /* eslint-enable indent */
   new webpack.optimize.LimitChunkCountPlugin({
     maxChunks: 1
   }),
@@ -57,14 +55,22 @@ const baseConfig = (options) => ({
   output: {
     clean: true,
     path: path.resolve(process.cwd(), "dist/umd"),
+    filename: "[name].js",
+    chunkFilename: "[name].[chunkhash].chunk.js",
+    assetModuleFilename: "assets/[name].[hash][ext][query]",
     publicPath: "auto",
     library: {
       name: getLibraryVariableName(),
-      type: "umd"
+      type: "var"
+      // type: 'module',
     },
+    // module: true,
     ...options.output
   },
   // Merge with env dependent settings
+  // experiments: {
+  //   outputModule: true,
+  // },
   optimization: options.optimization,
   module: {
     rules: [
@@ -112,6 +118,7 @@ const baseConfig = (options) => ({
             loader: "postcss-loader",
             options: {
               postcssOptions: {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-call
                 plugins: [PostcssPresetEnv({ autoprefixer: { grid: true } })]
               },
               sourceMap: true
@@ -177,7 +184,7 @@ const baseConfig = (options) => ({
     mainFields: ["browser", "module", "main"],
     alias: {
       ...getAlias(),
-      ...(options.resolve || {}).alias || {}
+      ...options.resolve?.alias ?? {}
     },
     plugins: [new ResolveTypeScriptPlugin({})]
   },
@@ -186,9 +193,9 @@ const baseConfig = (options) => ({
     "@elliemae/pui-app-loader": "emuiAppLoader",
     "@elliemae/pui-diagnostics": "emuiDiagnostics"
   },
-  devtool: options.devtool || "eval-source-map",
-  performance: options.performance || {},
-  devServer: options.devServer || {}
+  devtool: options.devtool ?? "eval-source-map",
+  performance: options.performance ?? {},
+  devServer: options.devServer ?? {}
 });
 export {
   baseConfig

package/dist/esm/webpack/webpack.lib.dev.babel.js

@@ -5,26 +5,25 @@ import fg from "fast-glob";
 import CircularDependencyPlugin from "circular-dependency-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
-import { getPaths } from "./helpers.js";
+import { getPaths, getLibraryVariableName } from "./helpers.js";
 import { baseConfig } from "./webpack.lib.base.babel.js";
 const { basePath } = getPaths();
 const getHtmlWebpackPlugins = () => {
-  const htmlTemplateFiles = fg.sync([path.join(process.cwd(), "lib/*.html")]);
+  const htmlTemplateFiles = fg.sync([
+    path.join(process.cwd(), "lib", "*.html").replace(/\\/g, "/")
+  ]);
   return htmlTemplateFiles.map(
     (htmlTemplateFile) => new HtmlWebpackPlugin({
       template: htmlTemplateFile,
       filename: path.basename(htmlTemplateFile),
-      inject: true
+      inject: "head",
+      scriptLoading: "defer",
+      library: getLibraryVariableName()
     })
   );
 };
 var webpack_lib_dev_babel_default = baseConfig({
   mode: "development",
-  // output: {
-  //   filename: `js/${libraryName}.js`,
-  //   chunkFilename: `js/${libraryName}.chunk.js`,
-  //   assetModuleFilename: '[name][ext][query]',
-  // },
   optimization: {
     splitChunks: {
       chunks: "all"
@@ -41,10 +40,7 @@ var webpack_lib_dev_babel_default = baseConfig({
       failOnError: false
       // show a warning when there is a circular dependency
     }),
-    new MiniCssExtractPlugin({
-      // filename: `css/${libraryName}.css`,
-      // chunkFilename: `css/${libraryName}.chunk.css`,
-    }),
+    new MiniCssExtractPlugin({}),
     new webpack.ProgressPlugin()
   ],
   devtool: "eval-source-map",
@@ -62,7 +58,7 @@ var webpack_lib_dev_babel_default = baseConfig({
     historyApiFallback: true,
     hot: true,
     open: [basePath],
-    port: process.env.PORT || "auto",
+    port: process.env.PORT ?? "auto",
     headers: {
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS"

package/dist/esm/webpack/webpack.lib.prod.babel.js

@@ -5,15 +5,23 @@ import HtmlWebpackPlugin from "html-webpack-plugin";
 import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
 import { EsbuildPlugin } from "esbuild-loader";
 import browserslistToEsbuild from "browserslist-to-esbuild";
-import { getCompressionPlugins, getLibraryName } from "./helpers.js";
+import {
+  getCompressionPlugins,
+  getLibraryName,
+  getLibraryVariableName
+} from "./helpers.js";
 import { baseConfig } from "./webpack.lib.base.babel.js";
 const getHtmlWebpackPlugins = () => {
-  const htmlTemplateFiles = fg.sync([path.join(process.cwd(), "lib/*.html")]);
+  const htmlTemplateFiles = fg.sync([
+    path.join(process.cwd(), "lib", "*.html").replace(/\\/g, "/")
+  ]);
   return htmlTemplateFiles.map(
     (htmlTemplateFile) => new HtmlWebpackPlugin({
       template: htmlTemplateFile,
       filename: path.basename(htmlTemplateFile),
-      inject: true,
+      inject: "head",
+      scriptLoading: "defer",
+      library: getLibraryVariableName(),
       minify: {
         removeComments: true,
         collapseWhitespace: true,
@@ -37,7 +45,9 @@ const prodConfig = {
     minimizer: [
       new EsbuildPlugin({
         target: browserslistToEsbuild(),
-        css: true
+        css: true,
+        pure: ["console.log", "console.warn"],
+        drop: ["debugger"]
       })
     ],
     nodeEnv: "production",
@@ -49,10 +59,7 @@ const prodConfig = {
   },
   plugins: [
     ...getHtmlWebpackPlugins(),
-    new MiniCssExtractPlugin({
-      // filename: `css/${libraryName}.[contenthash].css`,
-      // chunkFilename: `css/${libraryName}.[contenthash].chunk.css`,
-    }),
+    new MiniCssExtractPlugin({}),
     ...getCompressionPlugins(true),
     new BundleAnalyzerPlugin({
       analyzerMode: "static",

package/dist/esm/webpack/webpack.prod.babel.js

@@ -29,10 +29,13 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
     },
     optimization: {
       moduleIds: "deterministic",
+      // realContentHash: false,
       minimizer: [
         new EsbuildPlugin({
           target: browserslistToEsbuild(),
-          css: true
+          css: true,
+          pure: ["console.log", "console.warn"],
+          drop: ["debugger"]
         })
       ],
       runtimeChunk: true,
@@ -46,7 +49,8 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
           },
           vendors: {
             name: "vendors",
-            test: /[\\/]node_modules[\\/]/
+            test: /[\\/]node_modules[\\/]/,
+            enforce: true
           }
         }
       }
@@ -83,7 +87,7 @@ const {
   basePath
 } = getPaths();
 const htmlWebpackPlugin = new HtmlWebpackPlugin({
-  inject: !isAppLoaderEnabled(),
+  inject: !isAppLoaderEnabled() && process.env.CSP !== "true",
   template: !isAppLoaderEnabled() ? "app/index.html" : "app/index-app-loader.html",
   minify: {
     removeComments: true,
@@ -105,12 +109,15 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({
     appLoaderScriptPath,
     diagnosticsScriptPath,
     encwLoaderScriptPath,
-    googleTagManager: isGoogleTagManagerEnabled()
-  }
+    googleTagManager: isGoogleTagManagerEnabled(),
+    csp: process.env.CSP === "true"
+  },
+  scriptLoading: "defer"
 });
 const config = baseConfig(getProdConfig());
-if (config.plugins)
+if (config.plugins) {
   config.plugins.push(htmlWebpackPlugin);
+}
 var webpack_prod_babel_default = config;
 export {
   webpack_prod_babel_default as default