From ef95e35408ff6d03bf207d13200dc0ae166a0b58 Mon Sep 17 00:00:00 2001
From: Heather Buchel <hbuchel@gmail.com>
Date: Wed, 7 Feb 2024 17:51:12 -0500
Subject: [PATCH] Fix code samples for vite-polyfill for react/vue (#4989)

---
 .../troubleshooting/shared/vite-polyfill.mdx  | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/docs/src/pages/[platform]/getting-started/troubleshooting/shared/vite-polyfill.mdx b/docs/src/pages/[platform]/getting-started/troubleshooting/shared/vite-polyfill.mdx
index 1e93af4469b..67c123c7db7 100644
--- a/docs/src/pages/[platform]/getting-started/troubleshooting/shared/vite-polyfill.mdx
+++ b/docs/src/pages/[platform]/getting-started/troubleshooting/shared/vite-polyfill.mdx
@@ -1,3 +1,5 @@
+import { InlineFilter } from '@/components/InlineFilter';
+
 **1.** Add the following script tag to the `index.html` file right before the `</body>` tag. This will only run on the client side and will polyfill Node globals.
 
 ```html
@@ -13,6 +15,7 @@
 
 **2.** Update the `vite.config.ts` (or `vite.config.js`) and add a resolve alias inside the `defineConfig({})` as seen below.
 
+<InlineFilter filters={['react']}>
 ```ts
 export default defineConfig({
   plugins: [react()],
@@ -26,3 +29,20 @@ export default defineConfig({
   }
 })
 ```
+</InlineFilter>
+
+<InlineFilter filters={['vue']}>
+```ts
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+      alias: [
+      {
+        find: './runtimeConfig',
+        replacement: './runtimeConfig.browser', // ensures browser compatible version of AWS JS SDK is used
+      },
+    ]
+  }
+})
+```
+</InlineFilter>
\ No newline at end of file