Building a Vite project with @vue/devtools imported causes Vite to try and bundle the node version

segevfiner commented 1 year ago

Vue devtools version

6.5.0

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ptp8ed?file=log.txt

Steps to reproduce & screenshots

npm run build the reproduction, or check the saved log.txt

What is expected?

A browser build using Vite shouldn't try to bundle a Node version of @vue/devtools

What is actually happening?

It tries to bundle the Node version. This even fails in some setups with errors such as:

[commonjs--resolver] Failed to resolve entry for package "fs". The package may have incorrect main/module/exports specified in its package.json.
file: /Users/segevfiner/prj/swimm-tech-debt/node_modules/.pnpm/@vue+devtools@6.5.0/node_modules/@vue/devtools/index.js
error during build:
Error: Failed to resolve entry for package "fs". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///Users/segevfiner/prj/swimm-tech-debt/node_modules/.pnpm/vite@4.4.8_@types+node@18.17.1/node_modules/vite/dist/node/chunks/dep-75f53616.js:28687:11)
    at resolvePackageEntry (file:///Users/segevfiner/prj/swimm-tech-debt/node_modules/.pnpm/vite@4.4.8_@types+node@18.17.1/node_modules/vite/dist/node/chunks/dep-75f53616.js:28684:5)
    at tryNodeResolve (file:///Users/segevfiner/prj/swimm-tech-debt/node_modules/.pnpm/vite@4.4.8_@types+node@18.17.1/node_modules/vite/dist/node/chunks/dep-75f53616.js:28415:20)
    at Object.resolveId (file:///Users/segevfiner/prj/swimm-tech-debt/node_modules/.pnpm/vite@4.4.8_@types+node@18.17.1/node_modules/vite/dist/node/chunks/dep-75f53616.js:28176:28)
    at file:///Users/segevfiner/prj/swimm-tech-debt/node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:25416:40
    at runNextTicks (node:internal/process/task_queues:60:5)
    at process.processImmediate (node:internal/timers:447:9)
    at async PluginDriver.hookFirstAndGetPlugin (file:///Users/segevfiner/prj/swimm-tech-debt/node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:25316:28)
    at async resolveId (file:///Users/segevfiner/prj/swimm-tech-debt/node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:23991:26)
    at async ModuleLoader.resolveId (file:///Users/segevfiner/prj/swimm-tech-debt/node_modules/.pnpm/rollup@3.27.1/node_modules/rollup/dist/es/shared/node-entry.js:24405:15)
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.10 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

This is caused by the dynamic code to figure out if running in browser or node done in index.js this package should migrate to package.json exports instead which Vite can understand.

Azurewarth0920 commented 1 year ago

Somehow the side effect of modules should be removed.

https://stackblitz.com/edit/vitejs-vite-ptp8ed?file=log.txt

↑ In this reproduction, the devtools is tree-shaked. the console's log output is not always reliable. You can check the dependency map of the build artifact.

segevfiner commented 1 year ago

Yes. It should be. But something in my project caused it to not be tree shaken when I updated Vite/esbuild past a certain version...

vuejs / devtools-v6