diff --git a/packages/next/src/server/config.ts b/packages/next/src/server/config.ts
index f24d73dbda0d4..49c8ecd87df2a 100644
--- a/packages/next/src/server/config.ts
+++ b/packages/next/src/server/config.ts
@@ -732,6 +732,7 @@ function assignDefaults(
       '@heroicons/react/20/solid',
       '@heroicons/react/24/solid',
       '@heroicons/react/24/outline',
+      '@visx/visx',
     ]),
   ]
 
diff --git a/test/development/basic/barrel-optimization.test.ts b/test/development/basic/barrel-optimization.test.ts
index 5977e27925cb4..32ce267c956ef 100644
--- a/test/development/basic/barrel-optimization.test.ts
+++ b/test/development/basic/barrel-optimization.test.ts
@@ -38,6 +38,7 @@ describe('optimizePackageImports', () => {
         'lucide-react': '0.264.0',
         '@headlessui/react': '1.7.17',
         '@heroicons/react': '2.0.18',
+        '@visx/visx': '3.3.0',
       },
     })
   })
@@ -117,4 +118,9 @@ describe('optimizePackageImports', () => {
     const html = await next.render('/recursive')
     expect(html).toContain('<h1>42</h1>')
   })
+
+  it('should support visx', async () => {
+    const html = await next.render('/visx')
+    expect(html).toContain('<linearGradient')
+  })
 })
diff --git a/test/development/basic/barrel-optimization/pages/visx.js b/test/development/basic/barrel-optimization/pages/visx.js
new file mode 100644
index 0000000000000..e2cc81659a18c
--- /dev/null
+++ b/test/development/basic/barrel-optimization/pages/visx.js
@@ -0,0 +1,10 @@
+import { Gradient } from '@visx/visx'
+
+export default function Page() {
+  return (
+    <svg width={400} height={400}>
+      <Gradient.GradientPinkBlue id="g" from="red" to="blue" />
+      <rect width={400} height={400} fill="url(#g)" />
+    </svg>
+  )
+}