When an error happened during dep optimization, show that the error happened during that

[zheung]

Describe the bug

When I build my project, I install a library that I have written. This library, like my main project, runs the latest esnext environment and uses the latest top-level-await syntax. The problem then arises:

• When I use the vite build command to build, no errors occur.
• When I use the vite command for development, an error occurs:

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

vite.config.js in the project has build.target set to esnext.
The target environment in the error message is clearly the default and does not match the target environment I have set. So I think this is a problem with passing the configuration in development mode.

And I also remember that I used the local link library in early development and did not have the same problem. So I did the following test and the results were obvious:

Let's say the library that uses the top-level-await syntax is called tla-module, and the folder it's in is also called ../tla-module

case	published package	local tarball	local link	import directly
install command	npm install tla-module	npm install ../tla-module-1.0.0.tgz	npm install ../tla-module	(no install)
import command	import('tla-module')	import('tla-module')	import('tla-module')	import('../tla-module')
develop	✖ Error	✖ Error	✔ OK	✔ OK
build	✔ OK	✔ OK	✔ OK	✔ OK

Reproduction

https://github.com/zheung/bug-target-vite-example

Steps to reproduce

cd /main-repo

npm install
# only 1 dep: vite

npm install ../tla-module/tla-module-1.0.0.tgz
# install local tarball
# The tarball is created using the command `npm pack`
# Installing a local tarball should be the same as installing a published package. They are copied in full to `node_modules`

npm run develop
# error: Top-level await is not available in the configured target environment...

System Info

System:
  OS: Windows 10 10.0.19045
  CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
  Memory: 4.11 GB / 15.91 GB
Binaries:
  Node: 14.21.3 - D:\Runtime\Node\node.EXE
  npm: 6.14.18 - D:\Runtime\Node\npm.CMD
Browsers:
  Chrome Beta: 114.0.5735.45
  Chrome Canary: 116.0.5798.0
  Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.57)
  Internet Explorer: 11.0.19041.1566
npmPackages:
  vite: ^4.3.9 => 4.3.9

Used Package Manager

npm

Logs

Click to expand logs!

> bug-target-vite@1.0.0 develop D:\Desktop\bug-taget-vite\main-repo
> vite --force

Forced re-optimization of dependencies

  VITE v4.3.9  ready in 331 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
X [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

    node_modules/top-await-module/index.js:4:0:
      4 │ await 'something module';
        ╵ ~~~~~

(node:30216) UnhandledPromiseRejectionWarning: Error: Build failed with 1 error:
node_modules/top-await-module/index.js:4:0: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
    at failureErrorWithLog (D:\Desktop\bug-taget-vite\main-repo\node_modules\esbuild\lib\main.js:1636:15)
    at D:\Desktop\bug-taget-vite\main-repo\node_modules\esbuild\lib\main.js:1048:25
    at D:\Desktop\bug-taget-vite\main-repo\node_modules\esbuild\lib\main.js:1512:9
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:30216) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:30216) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

The error is happening during dep optimization. If you set optimizeDeps.esbuildOptions.target: 'esnext', it will work.

I think we should add something like "An error happened during dep optimization:" before the error from esbuild.

[spanishpear]

I can no longer reproduce this issue when running against ^7.0.0-beta.0, but it still fails in v6.

✅ Passing

i/main-repo/package.json w/main-repo/package.json
index c4782a1..86e8b5a 100644
--- i/main-repo/package.json
+++ w/main-repo/package.json
@@ -4,12 +4,12 @@
        "private": true,
        "type": "module",
        "scripts": {
-               "develop": "vite --force",
-               "build": "vite build --force",
+               "develop": "vite",
+               "build": "vite build",
                "preview": "vite preview"
        },
        "dependencies": {
                "tla-module": "file:../tla-module/tla-module-1.0.0.tgz",
-               "vite": "^4.3.9"
+               "vite": "^7.0.0-beta.0"
        }
 }
diff --git i/main-repo/vite.config.js w/main-repo/vite.config.js
index 5381e9f..7ae75bc 100644
--- i/main-repo/vite.config.js
+++ w/main-repo/vite.config.js
@@ -6,5 +6,8 @@ export default defineConfig({
        build: {
                target: 'esnext',
        },
+       optimizeDeps: {
+               force: true,
+       },
        clearScreen: false,
 });

❌ Failing

diff --git i/main-repo/package.json w/main-repo/package.json
index c4782a1..8be9ed3 100644
--- i/main-repo/package.json
+++ w/main-repo/package.json
@@ -4,12 +4,12 @@
        "private": true,
        "type": "module",
        "scripts": {
-               "develop": "vite --force",
-               "build": "vite build --force",
+               "develop": "vite",
+               "build": "vite build",
                "preview": "vite preview"
        },
        "dependencies": {
                "tla-module": "file:../tla-module/tla-module-1.0.0.tgz",
-               "vite": "^4.3.9"
+               "vite": "^6.0.0"
        }
 }
diff --git i/main-repo/vite.config.js w/main-repo/vite.config.js
index 5381e9f..7ae75bc 100644
--- i/main-repo/vite.config.js
+++ w/main-repo/vite.config.js
@@ -6,5 +6,8 @@ export default defineConfig({
        build: {
                target: 'esnext',
        },
+       optimizeDeps: {
+               force: true,
+       },
        clearScreen: false,
 });

[sapphi-red]

It doesn't happen with Vite 7.0.0-beta.0 because it has a higher default target that includes TLA support.
It'll error if the target is set to a lower one.