fix: use esbuild platform browser/node instead of neutral (#8714)

Co-authored-by: sapphi-red <green@sapphi.red>

packages/vite/src/node/optimizer/index.ts

@@ -533,15 +533,30 @@ export async function runOptimizeDeps(
     flatIdToExports[flatId] = exportsData
   }
 
+  // esbuild automatically replaces process.env.NODE_ENV for platform 'browser'
+  // In lib mode, we need to keep process.env.NODE_ENV untouched, so to at build
+  // time we replace it by __vite_process_env_NODE_ENV. This placeholder will be
+  // later replaced by the define plugin
+  const define = {
+    'process.env.NODE_ENV': isBuild
+      ? '__vite_process_env_NODE_ENV'
+      : JSON.stringify(process.env.NODE_ENV || config.mode)
+  }
+
   const start = performance.now()
 
   const result = await build({
     absWorkingDir: process.cwd(),
     entryPoints: Object.keys(flatIdDeps),
     bundle: true,
-    // Ensure resolution is handled by esbuildDepPlugin and
-    // avoid replacing `process.env.NODE_ENV` for 'browser'
-    platform: 'neutral',
+    // We can't use platform 'neutral', as esbuild has custom handling
+    // when the platform is 'node' or 'browser' that can't be emulated
+    // by using mainFields and conditions
+    platform:
+      config.build.ssr && config.ssr?.target !== 'webworker'
+        ? 'node'
+        : 'browser',
+    define,
     format: 'esm',
     target: config.build.target || undefined,
     external: config.optimizeDeps?.exclude,

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

@@ -25,7 +25,8 @@ export function definePlugin(config: ResolvedConfig): Plugin {
     Object.assign(processNodeEnv, {
       'process.env.NODE_ENV': JSON.stringify(nodeEnv),
       'global.process.env.NODE_ENV': JSON.stringify(nodeEnv),
-      'globalThis.process.env.NODE_ENV': JSON.stringify(nodeEnv)
+      'globalThis.process.env.NODE_ENV': JSON.stringify(nodeEnv),
+      __vite_process_env_NODE_ENV: JSON.stringify(nodeEnv)
     })
   }
 
@@ -65,6 +66,10 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       ...(replaceProcessEnv ? processEnv : {})
     }
 
+    if (isBuild && !replaceProcessEnv) {
+      replacements['__vite_process_env_NODE_ENV'] = 'process.env.NODE_ENV'
+    }
+
     const replacementsKeys = Object.keys(replacements)
     const pattern = replacementsKeys.length
       ? new RegExp(

playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -77,6 +77,10 @@ test('import from dep with .notjs files', async () => {
   expect(await page.textContent('.not-js')).toMatch(`[success]`)
 })
 
+test('Import from dependency which uses relative path which needs to be resolved by main field', async () => {
+  expect(await page.textContent('.relative-to-main')).toMatch(`[success]`)
+})
+
 test('dep with dynamic import', async () => {
   expect(await page.textContent('.dep-with-dynamic-import')).toMatch(
     `[success]`

playground/optimize-deps/dep-relative-to-main/entry.js

@@ -0,0 +1 @@
+module.exports = require('./')

playground/optimize-deps/dep-relative-to-main/lib/main.js

@@ -0,0 +1 @@
+module.exports = '[success] imported from main'

playground/optimize-deps/dep-relative-to-main/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "dep-relative-to-main",
+  "private": true,
+  "version": "1.0.0",
+  "main": "lib/main.js"
+}

playground/optimize-deps/index.html

@@ -50,6 +50,12 @@
 <h2>Import from dependency with .notjs files</h2>
 <div class="not-js"></div>
 
+<h2>
+  Import from dependency which uses relative path which needs to be resolved by
+  main field
+</h2>
+<div class="relative-to-main"></div>
+
 <h2>Import from dependency with dynamic import</h2>
 <div class="dep-with-dynamic-import"></div>
 
@@ -109,6 +115,9 @@
   import { notjsValue } from 'dep-not-js'
   text('.not-js', notjsValue)
 
+  import foo from 'dep-relative-to-main/entry'
+  text('.relative-to-main', foo)
+
   import { lazyFoo } from 'dep-with-dynamic-import'
   lazyFoo().then((foo) => {
     text('.dep-with-dynamic-import', foo)

playground/optimize-deps/package.json

@@ -19,6 +19,7 @@
     "dep-linked-include": "link:./dep-linked-include",
     "dep-node-env": "file:./dep-node-env",
     "dep-not-js": "file:./dep-not-js",
+    "dep-relative-to-main": "file:./dep-relative-to-main",
     "dep-with-builtin-module-cjs": "file:./dep-with-builtin-module-cjs",
     "dep-with-builtin-module-esm": "file:./dep-with-builtin-module-esm",
     "dep-with-dynamic-import": "file:./dep-with-dynamic-import",

pnpm-lock.yaml

@@ -607,6 +607,7 @@ importers:
       dep-linked-include: link:./dep-linked-include
       dep-node-env: file:./dep-node-env
       dep-not-js: file:./dep-not-js
+      dep-relative-to-main: file:./dep-relative-to-main
       dep-with-builtin-module-cjs: file:./dep-with-builtin-module-cjs
       dep-with-builtin-module-esm: file:./dep-with-builtin-module-esm
       dep-with-dynamic-import: file:./dep-with-dynamic-import
@@ -633,6 +634,7 @@ importers:
       dep-linked-include: link:dep-linked-include
       dep-node-env: file:playground/optimize-deps/dep-node-env
       dep-not-js: file:playground/optimize-deps/dep-not-js
+      dep-relative-to-main: file:playground/optimize-deps/dep-relative-to-main
       dep-with-builtin-module-cjs: file:playground/optimize-deps/dep-with-builtin-module-cjs
       dep-with-builtin-module-esm: file:playground/optimize-deps/dep-with-builtin-module-esm
       dep-with-dynamic-import: file:playground/optimize-deps/dep-with-dynamic-import
@@ -683,6 +685,9 @@ importers:
   playground/optimize-deps/dep-not-js:
     specifiers: {}
 
+  playground/optimize-deps/dep-relative-to-main:
+    specifiers: {}
+
   playground/optimize-deps/dep-with-builtin-module-cjs:
     specifiers: {}
 
@@ -8783,6 +8788,12 @@ packages:
     version: 1.0.0
     dev: false
 
+  file:playground/optimize-deps/dep-relative-to-main:
+    resolution: {directory: playground/optimize-deps/dep-relative-to-main, type: directory}
+    name: dep-relative-to-main
+    version: 1.0.0
+    dev: false
+
   file:playground/optimize-deps/dep-with-builtin-module-cjs:
     resolution: {directory: playground/optimize-deps/dep-with-builtin-module-cjs, type: directory}
     name: dep-with-builtin-module-cjs