chore(deps): update to next config to address build errors

web/.knip.json

@@ -11,14 +11,13 @@
 		"public/**",
 		"tests/**",
 		"i18n/index.js",
-		"i18next-parser.config.mjs",
+		"i18next-parser.config.mjs"
 	],
 	"ignoreDependencies": [
 		"@fontsource/inter",
 		"@fontsource/poppins",
 		"@next/bundle-analyzer",
 		"autoprefixer",
-		"webpack-deadcode-plugin",
 		"yaml",
 		"postcss-flexbugs-fixes",
 		"sharp",
@@ -33,9 +32,7 @@
 		"@storybook/addon-links",
 		"@storybook/addon-postcss",
 		"@storybook/addon-viewport",
-		"@storybook/builder-webpack5",
 		"@storybook/cli",
-		"@storybook/manager-webpack5",
 		"@storybook/mdx2-csf",
 		"@storybook/preset-scss",
 		"@mdx-js/react",
@@ -66,16 +63,13 @@
 		"less-loader",
 		"mdx-mermaid",
 		"mermaid",
-		"prettier",
 		"sass-loader",
 		"sb",
-		"storybook-addon-designs",
 		"storybook-addon-fetch-mock",
 		"storybook-preset-less",
 		"style-loader",
 		"ts-jest",
 		"stylelint-config-standard",
-		"stylelint-config-standard-scss",
 		"postcss",
 		"stylelint",
 		"@babel/core",

web/next.config.js

@@ -2,7 +2,7 @@ const withLess = require('next-with-less');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
-
+const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
 const runtimeCaching = require('next-pwa/cache');
 
 const withPWA = require('next-pwa')({
@@ -31,57 +31,73 @@ const withPWA = require('next-pwa')({
   disable: process.env.NODE_ENV === 'development',
 });
 
-module.exports = withPWA(
+async function rewrites() {
-  withBundleAnalyzer(
+  return [
-    withLess({
+    {
-      productionBrowserSourceMaps: process.env.SOURCE_MAPS === 'true',
+      source: '/api/:path*',
-      trailingSlash: true,
+      destination: 'http://localhost:8080/api/:path*', // Proxy to Backend to work around CORS.
-      reactStrictMode: true,
+    },
-      images: {
+    {
-        unoptimized: true,
+      source: '/hls/:path*',
-      },
+      destination: 'http://localhost:8080/hls/:path*', // Proxy to Backend to work around CORS.
-      swcMinify: true,
+    },
-      output: 'export',
+    {
-      webpack(config) {
+      source: '/img/:path*',
-        config.module.rules.push({
+      destination: 'http://localhost:8080/img/:path*', // Proxy to Backend to work around CORS.
-          test: /\.svg$/i,
+    },
-          issuer: /\.[jt]sx?$/,
+    {
-          use: ['@svgr/webpack'],
+      source: '/logo',
-        });
+      destination: 'http://localhost:8080/logo', // Proxy to Backend to work around CORS.
+    },
+    {
+      source: '/thumbnail.jpg',
+      destination: 'http://localhost:8080/thumbnail.jpg', // Proxy to Backend to work around CORS.
+    },
+    {
+      source: '/customjavascript',
+      destination: 'http://localhost:8080/customjavascript', // Proxy to Backend to work around CORS.
+    },
+  ];
+}
+
+module.exports = async phase => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  let nextConfig = withPWA(
+    withBundleAnalyzer(
+      withLess({
+        productionBrowserSourceMaps: process.env.SOURCE_MAPS === 'true',
+        trailingSlash: true,
+        reactStrictMode: true,
+        images: {
+          unoptimized: true,
+        },
+        swcMinify: true,
+        webpack(config) {
+          config.module.rules.push({
+            test: /\.svg$/i,
+            issuer: /\.[jt]sx?$/,
+            use: ['@svgr/webpack'],
+          });
 
-        return config;
+          return config;
-      },
+        },
-      async rewrites() {
+        pageExtensions: ['tsx'],
-        return process.env.NODE_ENV === 'development'
+      }),
-          ? [
+    ),
-              {
+  );
-                source: '/api/:path*',
+
-                destination: 'http://localhost:8080/api/:path*', // Proxy to Backend to work around CORS.
+  if (phase === PHASE_DEVELOPMENT_SERVER) {
-              },
+    nextConfig = {
-              {
+      ...nextConfig,
-                source: '/hls/:path*',
+      rewrites,
-                destination: 'http://localhost:8080/hls/:path*', // Proxy to Backend to work around CORS.
+    };
-              },
+  } else {
-              {
+    nextConfig = {
-                source: '/img/:path*',
+      ...nextConfig,
-                destination: 'http://localhost:8080/img/:path*', // Proxy to Backend to work around CORS.
+      output: 'export',
-              },
+    };
-              {
+  }
-                source: '/logo',
+  return nextConfig;
-                destination: 'http://localhost:8080/logo', // Proxy to Backend to work around CORS.
+};
-              },
-              {
-                source: '/thumbnail.jpg',
-                destination: 'http://localhost:8080/thumbnail.jpg', // Proxy to Backend to work around CORS.
-              },
-              {
-                source: '/customjavascript',
-                destination: 'http://localhost:8080/customjavascript', // Proxy to Backend to work around CORS.
-              },
-            ]
-          : null;
-      },
-      pageExtensions: ['tsx'],
-    }),
-  ),
-);