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

hlege · 2021-01-24T18:07:53Z

⚠️ 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.

The text was updated successfully, but these errors were encountered:

yyx990803 · 2021-01-24T18:48:25Z

AFAIK it's a known limitation of esbuild: evanw/esbuild#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.~~

hlege · 2021-01-24T18:58:11Z

Maybe you could add a custom plugin option directly to esbuild, so we can add our plugin something like this:

let yarnPnpPlugin = {
  name: 'yarn-pnp',
  setup(build) {
    build.onResolve({ filter: /.*/ }, args => ({
      path: require.resolve(args.path, {paths: [args.resolveDir]}),
    }))
    build.onLoad({ filter: /.*/ }, async (args) => ({
      contents: await require('fs').promises.readFile(args.path),
      loader: 'default',
    }))
  },
}

Detailed information about how it works : evanw/esbuild#237

yyx990803 · 2021-01-24T19:31:51Z

It would make the pre-bundling significantly slower because the fs read is now performed in Node and then has to be passed back to the esbuild Go process, creating non-trivial overhead.

Or we'll have to manually detect Yarn pnp and inject this plugin. So technically I guess this can work, but honestly I just don't understand why people even use Yarn 2. It just creates more problems than it solves compared to pnpm.

ref #1688

yyx990803 · 2021-01-24T19:45:43Z

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

hlege · 2021-01-24T20:36:28Z

Or we'll have to manually detect Yarn pnp and inject this plugin. So technically I guess this can work, but honestly I just don't understand why people even use Yarn 2. It just creates more problems than it solves compared to pnpm.

We use it cause it has outstanding monorepo support for a very large project (multi thread build, complete workspace linking etc) also it's support offline install so the CI doesn't need to download the deps over and over again so the build time much slower, also the deps never broken cause minor update or network issue. I know all the previous can be solvable other ways or tools but it is much out of the box than other. By the way thx for the quick fix.

yyx990803 · 2021-01-24T21:18:51Z

Yarn 1 and pnpm both have complete monorepo support. And if you cache your installed deps on CI + install with --frozen-lockfile it won't re-download every time (which is standard for any CI config really). But I guess to each their own :/

hlege added the pending triage label Jan 24, 2021

yyx990803 closed this as completed Jan 24, 2021

yyx990803 added a commit that referenced this issue Jan 24, 2021

fix: esbuild optimizer yarn 2 pnp compat

028c3bb

ref #1688

github-actions bot locked and limited conversation to collaborators Jul 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

hlege commented Jan 24, 2021 •

edited

Loading

yyx990803 commented Jan 24, 2021 •

edited

Loading

hlege commented Jan 24, 2021

yyx990803 commented Jan 24, 2021 •

edited

Loading

yyx990803 commented Jan 24, 2021

hlege commented Jan 24, 2021 •

edited

Loading

yyx990803 commented Jan 24, 2021

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

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

Comments

hlege commented Jan 24, 2021 • edited Loading

Describe the bug

Reproduction

System Info

Logs (Optional if provided reproduction)

yyx990803 commented Jan 24, 2021 • edited Loading

hlege commented Jan 24, 2021

yyx990803 commented Jan 24, 2021 • edited Loading

yyx990803 commented Jan 24, 2021

hlege commented Jan 24, 2021 • edited Loading

yyx990803 commented Jan 24, 2021

hlege commented Jan 24, 2021 •

edited

Loading

yyx990803 commented Jan 24, 2021 •

edited

Loading

yyx990803 commented Jan 24, 2021 •

edited

Loading

hlege commented Jan 24, 2021 •

edited

Loading