Yarn 2/PnP - optimizeDeps not work after esbuil handle it

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)
• If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

When developing with Yarn 2 (PnP) vite not start in dev mode. Esbuild throws an error when try to read the node_modules deps.

Reproduction

• Install yarn 2 (npm i -g yarn)
• npm init @vitejs/app my-vue-app --template react
• cd my-vue-app
• yarn set version berry
• yarn init
• yarn add -D vite @vitejs/plugin-react-refresh
• Install jquery as deps. ( yarn add jquery)
• Import in the main file. (import $ from "jquery")
• In package json add the following line in script block: "dev": "vite"
• Try to run yarn dev

System Info

• vite version: 2.0.0-beta.46
• Operating System: Manjaro
• Node version: v12.20.1
• Package manager (npm/yarn/pnpm) and version: yarn 2

Logs (Optional if provided reproduction)

Optimizable dependencies detected: jquery Pre-bundling them to speed up dev server page load… (this will be run only when your dependencies or config have changed) error: Cannot read directory “.yarn/cache/jquery-npm-3.5.1-965b25dbd8-c50818c848.zip”: not a directory

error: Could not read from file: /home/lege/Documents/projects/vite-app/.yarn/cache/jquery-npm-3.5.1-965b25dbd8-c50818c848.zip/node_modules/jquery/dist/jquery.js

2 errors (node:1452) UnhandledPromiseRejectionWarning: Error: Build failed with 2 errors: error: Cannot read directory “.yarn/cache/jquery-npm-3.5.1-965b25dbd8-c50818c848.zip”: not a directory error: Could not read from file: /home/lege/Documents/projects/vite-app/.yarn/cache/jquery-npm-3.5.1-965b25dbd8-c50818c848.zip/node_modules/jquery/dist/jquery.js at failureErrorWithLog (/home/lege/Documents/projects/vite-app/.yarn/unplugged/esbuild-npm-0.8.34-413cb46503/node_modules/esbuild/lib/main.js:969:15) at buildResponseToResult (/home/lege/Documents/projects/vite-app/.yarn/unplugged/esbuild-npm-0.8.34-413cb46503/node_modules/esbuild/lib/main.js:767:32) at /home/lege/Documents/projects/vite-app/.yarn/unplugged/esbuild-npm-0.8.34-413cb46503/node_modules/esbuild/lib/main.js:819:20 at handleIncomingPacket (/home/lege/Documents/projects/vite-app/.yarn/unplugged/esbuild-npm-0.8.34-413cb46503/node_modules/esbuild/lib/main.js:566:9) at Socket.readFromStdout (/home/lege/Documents/projects/vite-app/.yarn/unplugged/esbuild-npm-0.8.34-413cb46503/node_modules/esbuild/lib/main.js:482:7) at Socket.emit (events.js:209:13) at addChunk (_stream_readable.js:305:12) at readableAddChunk (_stream_readable.js:286:11) at Socket.Readable.push (_stream_readable.js:220:10) at Pipe.onStreamRead (internal/stream_base_commons.js:166:17) (node:1452) 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(). (rejection id: 1) (node:1452) [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. ^Clege@DESKTOP-EOEA808:~/Documents/projects/vite-app$ yarn dev vite:config bundled config file loaded in 184ms +0ms vite:config using resolved config: { vite:config plugins: [ vite:config ‘vite:pre-alias’, vite:config ‘alias’, vite:config ‘vite:dynamic-import-polyfill’, vite:config ‘vite:resolve’, vite:config ‘vite:html’, vite:config ‘vite:css’, vite:config ‘vite:esbuild’, vite:config ‘vite:json’, vite:config ‘vite:wasm’, vite:config ‘vite:worker’, vite:config ‘vite:asset’, vite:config ‘react-refresh’, vite:config ‘vite:css-post’, vite:config ‘vite:client-inject’, vite:config ‘vite:import-analysis’ vite:config ], vite:config server: { hmr: { path: undefined } }, vite:config configFile: ‘/home/lege/Documents/projects/vite-app/vite.config.js’, vite:config inlineConfig: { vite:config root: undefined, vite:config base: undefined, vite:config mode: undefined, vite:config configFile: undefined, vite:config logLevel: undefined, vite:config clearScreen: undefined, vite:config server: {} vite:config }, vite:config root: ‘/home/lege/Documents/projects/vite-app’, vite:config command: ‘serve’, vite:config mode: ‘development’, vite:config isProduction: false, vite:config optimizeCacheDir: ‘/home/lege/Documents/projects/vite-app/node_modules/.vite’, vite:config alias: [ vite:config { vite:config find: /^/@vite//, vite:config replacement: ‘/home/lege/Documents/projects/vite-app/.yarn/cache/vite-npm-2.0.0-beta.46-317080779c-656ec39c5a.zip/node_modules/vite/dist/client/’ vite:config } vite:config ], vite:config build: { vite:config target: [ ‘es2019’, ‘edge16’, ‘firefox60’, ‘chrome61’, ‘safari11’ ], vite:config polyfillDynamicImport: true, vite:config outDir: ‘dist’, vite:config assetsDir: ‘assets’, vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config sourcemap: false, vite:config rollupOptions: {}, vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config minify: ‘terser’, vite:config terserOptions: {}, vite:config cleanCssOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false vite:config }, vite:config env: { BASE_URL: ‘/’, MODE: ‘development’, DEV: true, PROD: false }, vite:config assetsInclude: [Function: assetsInclude], vite:config logger: { vite:config hasWarned: false, vite:config info: [Function: info], vite:config warn: [Function: warn], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen] vite:config }, vite:config base: ‘/’ vite:config } +5ms vite:resolve 0ms jquery -> null +0ms Optimizable dependencies detected: jquery Pre-bundling them to speed up dev server page load… (this will be run only when your dependencies or config have changed) error: Cannot read directory “.yarn/cache/jquery-npm-3.5.1-965b25dbd8-c50818c848.zip”: not a directory

error: Could not read from file: /home/lege/Documents/projects/vite-app/.yarn/cache/jquery-npm-3.5.1-965b25dbd8-c50818c848.zip/node_modules/jquery/dist/jquery.js

2 errors (node:1581) UnhandledPromiseRejectionWarning: Error: Build failed with 2 errors: error: Cannot read directory “.yarn/cache/jquery-npm-3.5.1-965b25dbd8-c50818c848.zip”: not a directory error: Could not read from file: /home/lege/Documents/projects/vite-app/.yarn/cache/jquery-npm-3.5.1-965b25dbd8-c50818c848.zip/node_modules/jquery/dist/jquery.js at failureErrorWithLog (/home/lege/Documents/projects/vite-app/.yarn/unplugged/esbuild-npm-0.8.34-413cb46503/node_modules/esbuild/lib/main.js:969:15) at buildResponseToResult (/home/lege/Documents/projects/vite-app/.yarn/unplugged/esbuild-npm-0.8.34-413cb46503/node_modules/esbuild/lib/main.js:767:32) at /home/lege/Documents/projects/vite-app/.yarn/unplugged/esbuild-npm-0.8.34-413cb46503/node_modules/esbuild/lib/main.js:819:20 at handleIncomingPacket (/home/lege/Documents/projects/vite-app/.yarn/unplugged/esbuild-npm-0.8.34-413cb46503/node_modules/esbuild/lib/main.js:566:9) at Socket.readFromStdout (/home/lege/Documents/projects/vite-app/.yarn/unplugged/esbuild-npm-0.8.34-413cb46503/node_modules/esbuild/lib/main.js:482:7) at Socket.emit (events.js:209:13) at addChunk (_stream_readable.js:305:12) at readableAddChunk (_stream_readable.js:286:11) at Socket.Readable.push (_stream_readable.js:220:10) at Pipe.onStreamRead (internal/stream_base_commons.js:166:17) (node:1581) 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(). (rejection id: 1) (node:1581) [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.

[yyx990803]

Should work after 028c3bb - although I still wouldn’t recommend using Yarn 2 pnp with Vite.

[yyx990803]

AFAIK it’s a known limitation of esbuild: https://github.com/evanw/esbuild/issues/154

I suspect this means Vite 2 simply can’t support Yarn 2 pnp. We’ve actually had various issues with it in the past because how hacky its module resolution is, so I think this is it.

Vite 2 no longer supports Yarn 2. Please use Yarn 1 or pnpm.