diff --git a/.changeset/rude-buckets-fold.md b/.changeset/rude-buckets-fold.md
new file mode 100644
index 00000000000..4ba365a2368
--- /dev/null
+++ b/.changeset/rude-buckets-fold.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Converted commonjs `require` of `focus-visible` to an esm `import`
diff --git a/@types/focus-visible/index.d.ts b/@types/focus-visible/index.d.ts
new file mode 100644
index 00000000000..9324650874f
--- /dev/null
+++ b/@types/focus-visible/index.d.ts
@@ -0,0 +1 @@
+declare module 'focus-visible'
diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx
index e4ae52fc79b..90da9934be7 100644
--- a/src/BaseStyles.tsx
+++ b/src/BaseStyles.tsx
@@ -4,6 +4,9 @@ import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './co
 import {useTheme} from './ThemeProvider'
 import {ComponentProps} from './utils/types'
 
+// load polyfill for :focus-visible
+import 'focus-visible'
+
 const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>`
   * { box-sizing: border-box; }
   body { margin: 0; }
@@ -36,9 +39,6 @@ function BaseStyles(props: BaseStylesProps) {
   const {children, ...rest} = props
   const {colorScheme} = useTheme()
 
-  // load polyfill for :focus-visible
-  require('focus-visible')
-
   return (
     <Base {...rest} data-portal-root>
       <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />