pre-bundling error when the defines contains expression

[ygj6]

Describe the bug

This is caused by the inconsistent behavior of vite and esbuild. How can we avoid this problem? @patak-js @evanw

From vite's docs

Starting from 2.0.0-beta.70, string values will be used as raw expressions, so if defining a string constant, it needs to be explicitly quoted (e.g. with JSON.stringify).

From esbuild's docs

Replacement expressions must either be a JSON object (null, boolean, number, string, array, or object) or a single identifier.

> vite

Pre-bundling dependencies:
  vue/dist/vue.cjs
(this will be run only when your dependencies or config have changed)
 > error: Invalid define value (must be valid JSON syntax or a single identifier): 1 + 1

error when starting dev server:
Error: Build failed with 1 error:
error: Invalid define value (must be valid JSON syntax or a single identifier): 1 + 1
    at failureErrorWithLog (/Users/ygj6/Downloads/vite-qnxzcc/node_modules/esbuild/lib/main.js:1493:15)
    at /Users/ygj6/Downloads/vite-qnxzcc/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/Users/ygj6/Downloads/vite-qnxzcc/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/Users/ygj6/Downloads/vite-qnxzcc/node_modules/esbuild/lib/main.js:1149:7)
    at /Users/ygj6/Downloads/vite-qnxzcc/node_modules/esbuild/lib/main.js:1258:14
    at /Users/ygj6/Downloads/vite-qnxzcc/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/Users/ygj6/Downloads/vite-qnxzcc/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/Users/ygj6/Downloads/vite-qnxzcc/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (events.js:376:20)
    at addChunk (internal/streams/readable.js:309:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vite-project@0.0.0 dev: `vite`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vite-project@0.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ygj6/.npm/_logs/2021-11-06T09_55_10_642Z-debug.log

Process finished with exit code 1

Reproduction

https://stackblitz.com/edit/vite-qnxzcc

System Info

System:
    OS: macOS 12.0.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 183.78 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Safari: 15.1
  npmPackages:
    vite: ^2.6.0 => 2.6.13 

Used Package Manager

yarn

Logs

No response

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 https://github.com/vuejs/vue-next 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.

[bluwy]

From my understanding, if we can scope Vite's define requirements as a subset of what esbuild can support, then this should be addressed. IIRC esbuild doesn't allow 1 + 1 because that expands the syntax and requires a re-parse for esbuild, and can possibly expand infinitely.

So maybe we can update the docs to discourage syntax like 1 + 1 and point to esbuild docs? If it's just 1 (a single identifier) it should be fine.

[ygj6]

OK, lets document it, I will issue a PR later.