fix(resolve): skip module field when the importer is a require ca…

…ll (#7438)

packages/playground/resolve/__tests__/resolve.spec.ts

@@ -58,6 +58,12 @@ test('dont add extension to directory name (./dir-with-ext.js/index.js)', async
   expect(await page.textContent('.dir-with-ext')).toMatch('[success]')
 })
 
+test('do not resolve to the `module` field if the importer is a `require` call', async () => {
+  expect(await page.textContent('.require-pkg-with-module-field')).toMatch(
+    '[success]'
+  )
+})
+
 test('a ts module can import another ts module using its corresponding js file name', async () => {
   expect(await page.textContent('.ts-extension')).toMatch('[success]')
 })

packages/playground/resolve/index.html

@@ -58,6 +58,9 @@ <h2>Resolve file name containing dot</h2>
 <h2>Browser Field</h2>
 <p class="browser">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>
+
 <h2>CSS Entry</h2>
 <p class="css"></p>
 
@@ -181,6 +184,9 @@ <h2>resolve package that contains # in path</h2>
     text('.browser', main)
   }
 
+  import { msg as requireButWithModuleFieldMsg } from 'require-pkg-with-module-field'
+  text('.require-pkg-with-module-field', requireButWithModuleFieldMsg)
+
   import { msg as customExtMsg } from './custom-ext'
   text('.custom-ext', customExtMsg)
 

packages/playground/resolve/package.json

@@ -12,6 +12,7 @@
     "@babel/runtime": "^7.16.0",
     "es5-ext": "0.10.53",
     "normalize.css": "^8.0.1",
+    "require-pkg-with-module-field": "link:./require-pkg-with-module-field",
     "resolve-browser-field": "link:./browser-field",
     "resolve-custom-condition": "link:./custom-condition",
     "resolve-custom-main-field": "link:./custom-main-field",

packages/playground/resolve/require-pkg-with-module-field/dep.cjs

@@ -0,0 +1,5 @@
+const BigNumber = require('bignumber.js')
+
+const x = new BigNumber('1111222233334444555566')
+
+module.exports = x.toString()

packages/playground/resolve/require-pkg-with-module-field/index.cjs

@@ -0,0 +1,8 @@
+const dep = require('./dep.cjs')
+
+const msg =
+  dep === '1.111222233334444555566e+21'
+    ? '[success] require-pkg-with-module-field'
+    : '[failed] require-pkg-with-module-field'
+
+exports.msg = msg

packages/playground/resolve/require-pkg-with-module-field/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "require-pkg-with-module-field",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./index.cjs",
+  "dependencies": {
+    "bignumber.js": "9.0.2"
+  }
+}

packages/playground/resolve/vite.config.js

@@ -40,5 +40,8 @@ module.exports = {
         }
       }
     }
-  ]
+  ],
+  optimizeDeps: {
+    include: ['require-pkg-with-module-field']
+  }
 }

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

@@ -738,7 +738,11 @@ export function resolvePackageEntry(
           : isObject(data.browser) && data.browser['.']
       if (browserEntry) {
         // check if the package also has a "module" field.
-        if (typeof data.module === 'string' && data.module !== browserEntry) {
+        if (
+          !options.isRequire &&
+          typeof data.module === 'string' &&
+          data.module !== browserEntry
+        ) {
           // if both are present, we may have a problem: some package points both
           // to ESM, with "module" targeting Node.js, while some packages points
           // "module" to browser ESM and "browser" to UMD.