From fad63b1d6f5f01ba742cdb093ee05dc117d1753b Mon Sep 17 00:00:00 2001
From: Sawyer Hollenshead <git@sawyerh.com>
Date: Tue, 21 Nov 2023 05:56:33 -0800
Subject: [PATCH] =?UTF-8?q?feat:=20Add=20=E2=80=9Cuse=20client=E2=80=9D=20?=
 =?UTF-8?q?to=20fix=20React=20Server=20Components=20(#2656)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webpack.config.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/webpack.config.js b/webpack.config.js
index 403fbeb9c7..4d1c269d5c 100644
--- a/webpack.config.js
+++ b/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'],