fix: use browser field if it is not likely UMD or CJS (fixes #9445) (#9459)

Author: sapphi-red

packages/vite/src/node/plugins/resolve.ts

@@ -867,6 +867,8 @@ export function resolvePackageEntry(
             ) {
               // likely UMD or CJS(!!! e.g. firebase 7.x), prefer module
               entryPoint = data.module
+            } else {
+              entryPoint = browserEntry
             }
           }
         } else {

playground/resolve/__tests__/resolve.spec.ts

@@ -87,6 +87,14 @@ test('browser field', async () => {
   expect(await page.textContent('.browser')).toMatch('[success]')
 })
 
+test('Resolve browser field even if module field exists', async () => {
+  expect(await page.textContent('.browser-module1')).toMatch('[success]')
+})
+
+test('Resolve module field if browser field is likely UMD or CJS', async () => {
+  expect(await page.textContent('.browser-module2')).toMatch('[success]')
+})
+
 test('css entry', async () => {
   expect(await page.textContent('.css')).toMatch('[success]')
 })

playground/resolve/browser-module-field1/index.js

@@ -0,0 +1 @@
+export default '[fail] this should not run in the browser'

playground/resolve/browser-module-field1/index.web.js

@@ -0,0 +1 @@
+export default '[success] this should run in browser'

playground/resolve/browser-module-field1/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "resolve-browser-module-field1",
+  "private": true,
+  "version": "1.0.0",
+  "//": "real world example: https://github.com/aws/aws-sdk-js-v3/blob/59cdfd81452bce16bb26d07668e5550ed05d9d06/packages/credential-providers/package.json#L6-L7",
+  "module": "index.js",
+  "browser": "index.web.js"
+}

playground/resolve/browser-module-field2/index.js

@@ -0,0 +1 @@
+export default '[success] this should run in browser'

playground/resolve/browser-module-field2/index.web.js

@@ -0,0 +1 @@
+module.exports = '[fail] this should not run in the browser'

playground/resolve/browser-module-field2/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "resolve-browser-module-field2",
+  "private": true,
+  "version": "1.0.0",
+  "module": "index.js",
+  "browser": "index.web.js"
+}

playground/resolve/index.html

@@ -76,6 +76,12 @@ <h2>Resolve absolute path</h2>
 <h2>Browser Field</h2>
 <p class="browser">fail</p>
 
+<h2>Resolve browser field even if module field exists</h2>
+<p class="browser-module1">fail</p>
+
+<h2>Resolve module field if browser field is likely UMD or CJS</h2>
+<p class="browser-module2">fail</p>
+
 <h2>Don't resolve to the `module` field if the importer is a `require` call</h2>
 <p class="require-pkg-with-module-field">fail</p>
 
@@ -213,6 +219,12 @@ <h2>resolve package that contains # in path</h2>
     text('.browser', main)
   }
 
+  import browserModule1 from 'resolve-browser-module-field1'
+  text('.browser-module1', browserModule1)
+
+  import browserModule2 from 'resolve-browser-module-field2'
+  text('.browser-module2', browserModule2)
+
   import { msg as requireButWithModuleFieldMsg } from 'require-pkg-with-module-field'
   text('.require-pkg-with-module-field', requireButWithModuleFieldMsg)
 

playground/resolve/package.json

@@ -14,6 +14,8 @@
     "normalize.css": "^8.0.1",
     "require-pkg-with-module-field": "link:./require-pkg-with-module-field",
     "resolve-browser-field": "link:./browser-field",
+    "resolve-browser-module-field1": "link:./browser-module-field1",
+    "resolve-browser-module-field2": "link:./browser-module-field2",
     "resolve-custom-condition": "link:./custom-condition",
     "resolve-custom-main-field": "link:./custom-main-field",
     "resolve-exports-env": "link:./exports-env",