diff --git a/playground/resolve/__tests__/mainfields-custom-first/resolve-mainfields-custom-first.spec.ts b/playground/resolve/__tests__/mainfields-custom-first/resolve-mainfields-custom-first.spec.ts
new file mode 100644
index 00000000000000..c15f0f56d72375
--- /dev/null
+++ b/playground/resolve/__tests__/mainfields-custom-first/resolve-mainfields-custom-first.spec.ts
@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest'
+import { page } from '~utils'
+
+test('resolve.mainFields.custom-first', async () => {
+  expect(await page.textContent('.custom-browser-main-field')).toBe(
+    'resolved custom field',
+  )
+})
diff --git a/playground/resolve/__tests__/resolve.spec.ts b/playground/resolve/__tests__/resolve.spec.ts
index d5067698e13713..45b87c23e4ab10 100644
--- a/playground/resolve/__tests__/resolve.spec.ts
+++ b/playground/resolve/__tests__/resolve.spec.ts
@@ -167,6 +167,12 @@ test('resolve.mainFields', async () => {
   expect(await page.textContent('.custom-main-fields')).toMatch('[success]')
 })
 
+test('resolve.mainFields.browser-first', async () => {
+  expect(await page.textContent('.custom-browser-main-field')).toBe(
+    'resolved browser field',
+  )
+})
+
 test('resolve.conditions', async () => {
   expect(await page.textContent('.custom-condition')).toMatch('[success]')
 })
diff --git a/playground/resolve/custom-browser-main-field/index.browser.js b/playground/resolve/custom-browser-main-field/index.browser.js
new file mode 100644
index 00000000000000..a12f4a603c068d
--- /dev/null
+++ b/playground/resolve/custom-browser-main-field/index.browser.js
@@ -0,0 +1 @@
+export const msg = 'resolved browser field'
diff --git a/playground/resolve/custom-browser-main-field/index.custom.js b/playground/resolve/custom-browser-main-field/index.custom.js
new file mode 100644
index 00000000000000..01ea529fad19b5
--- /dev/null
+++ b/playground/resolve/custom-browser-main-field/index.custom.js
@@ -0,0 +1 @@
+export const msg = 'resolved custom field'
diff --git a/playground/resolve/custom-browser-main-field/index.js b/playground/resolve/custom-browser-main-field/index.js
new file mode 100644
index 00000000000000..27f9fcfd43658b
--- /dev/null
+++ b/playground/resolve/custom-browser-main-field/index.js
@@ -0,0 +1 @@
+export const msg = '[fail] resolved main field'
diff --git a/playground/resolve/custom-browser-main-field/package.json b/playground/resolve/custom-browser-main-field/package.json
new file mode 100644
index 00000000000000..0d372bc5eba9fc
--- /dev/null
+++ b/playground/resolve/custom-browser-main-field/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@vitejs/test-resolve-custom-browser-main-field",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js",
+  "browser": "index.browser.js",
+  "custom": "index.custom.js"
+}
diff --git a/playground/resolve/index.html b/playground/resolve/index.html
index 3d52ad6722e28c..89eced2e7149e9 100644
--- a/playground/resolve/index.html
+++ b/playground/resolve/index.html
@@ -158,6 +158,9 @@ <h2>resolve.extensions</h2>
 <h2>resolve.mainFields</h2>
 <p class="custom-main-fields"></p>
 
+<h2>resolve.mainFields.custom-browser-main</h2>
+<p class="custom-browser-main-field"></p>
+
 <h2>resolve.conditions</h2>
 <p class="custom-condition"></p>
 
@@ -341,6 +344,9 @@ <h2>resolve package that contains # in path</h2>
   import { msg as customMainMsg } from '@vitejs/test-resolve-custom-main-field'
   text('.custom-main-fields', customMainMsg)
 
+  import { msg as customBrowserMsg } from '@vitejs/test-resolve-custom-browser-main-field'
+  text('.custom-browser-main-field', customBrowserMsg)
+
   import { msg as customConditionMsg } from '@vitejs/test-resolve-custom-condition'
   text('.custom-condition', customConditionMsg)
 
diff --git a/playground/resolve/package.json b/playground/resolve/package.json
index 23718a6ee648f6..c748f776fd805b 100644
--- a/playground/resolve/package.json
+++ b/playground/resolve/package.json
@@ -28,6 +28,7 @@
     "@vitejs/test-resolve-browser-module-field3": "link:./browser-module-field3",
     "@vitejs/test-resolve-custom-condition": "link:./custom-condition",
     "@vitejs/test-resolve-custom-main-field": "link:./custom-main-field",
+    "@vitejs/test-resolve-custom-browser-main-field": "link:./custom-browser-main-field",
     "@vitejs/test-resolve-exports-and-nested-scope": "link:./exports-and-nested-scope",
     "@vitejs/test-resolve-exports-env": "link:./exports-env",
     "@vitejs/test-resolve-exports-from-root": "link:./exports-from-root",
diff --git a/playground/resolve/vite.config-mainfields-custom-first.js b/playground/resolve/vite.config-mainfields-custom-first.js
new file mode 100644
index 00000000000000..96279c461edd5b
--- /dev/null
+++ b/playground/resolve/vite.config-mainfields-custom-first.js
@@ -0,0 +1,6 @@
+import config from './vite.config.js'
+config.resolve.mainFields = [
+  'custom',
+  ...config.resolve.mainFields.filter((f) => f !== 'custom'),
+]
+export default config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6abe42374ed1ed..456f8c34f9f033 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1074,6 +1074,9 @@ importers:
       '@vitejs/test-resolve-browser-module-field3':
         specifier: link:./browser-module-field3
         version: link:browser-module-field3
+      '@vitejs/test-resolve-custom-browser-main-field':
+        specifier: link:./custom-browser-main-field
+        version: link:custom-browser-main-field
       '@vitejs/test-resolve-custom-condition':
         specifier: link:./custom-condition
         version: link:custom-condition
@@ -1143,6 +1146,8 @@ importers:
 
   playground/resolve/browser-module-field3: {}
 
+  playground/resolve/custom-browser-main-field: {}
+
   playground/resolve/custom-condition: {}
 
   playground/resolve/custom-main-field: {}