feat: Add “use client” to fix React Server Components (#2656)

webpack.config.js

@@ -1,6 +1,8 @@
 const path = require('path')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+const { BannerPlugin } = require('webpack')
 
 const uswdsIncludePaths = [
   './node_modules/@uswds',
@@ -19,6 +21,18 @@ module.exports = {
     libraryTarget: 'umd',
     globalObject: 'this',
   },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: {
+            // Preserve directives like "use client"
+            directives: false,
+          },
+        },
+      }),
+    ],
+  },
   externals: {
     react: {
       root: 'React',
@@ -39,6 +53,14 @@ module.exports = {
       chunkFilename: '[name].[id].css',
     }),
     new ForkTsCheckerWebpackPlugin(),
+    new BannerPlugin({
+      // Support React Server Components
+      // See: https://react.dev/reference/react/use-client
+      banner: '"use client";',
+      raw: true,
+      entryOnly: true,
+      test: /\.js$/,
+    }),
   ],
   resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js'],