'build.define' works on dev but throws error on build

[cliqer]

Describe the bug

Used build.define in vite.config.ts like below to display the version string from package.json:

export default {
  define: {
    __VERSION__: JSON.stringify(process.env.npm_package_version);
  }
}

Then on the main index.vue and while using pug preprocessor I'm retrieving it like so:

<template lang="pug">
  div {{ `v${version}` }}
<template>

<script setup>
const version = ref('');
onMounted(() => {
  version.value = window.__VERSION__; // I may be doing this wrong tho works on dev...
}

While in dev it works perfectly well when trying to build it throws:

rollup-plugin-dynamic-import-variables] Unexpected token (385:24)
file: /Users/admin/WebstormProjects/vite/src/views/Index.vue:385:24
error during build:
SyntaxError: Unexpected token (385:24)
    at Object.pp$4.raise (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:15591:13)
    at Object.pp.unexpected (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:13283:8)
    at Object.pp.semicolon (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:13260:64)
    at Object.pp$1.parseExpressionStatement (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:13739:8)
    at Object.pp$1.parseStatement (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:13474:24)
    at Object.pp$1.parseBlock (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:13755:21)
    at Object.pp$3.parseFunctionBody (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:15441:22)
    at Object.pp$3.parseArrowExpression (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:15402:8)
    at Object.pp$3.parseParenArrowList (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:15131:15)
    at Object.pp$3.parseParenAndDistinguishExpression (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:15097:19)
    at Object.pp$3.parseExprAtom (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:14950:41)
    at Object.pp$3.parseExprSubscripts (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:14793:19)
    at Object.pp$3.parseMaybeUnary (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:14770:17)
    at Object.parseMaybeUnary (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:19515:29)
    at Object.pp$3.parseExprOps (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:14705:19)
    at Object.pp$3.parseMaybeConditional (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:14688:19)
error Command failed with exit code 1.

System Info

• vite version: 2.1.2
• Operating System: Big Sur (Macbook Air M1)
• Node version: v15.11.0
• Package manager (npm/yarn/pnpm) and version: yarn 1.22.10

Logs (Optional if provided reproduction)

yarn build
yarn run v1.22.10
$ cross-env MODE=production vite build --debug
  vite:config bundled config file loaded in 190ms +0ms
[dotenv][DEBUG] did not match key and value when parsing line 3: 
  vite:config using resolved config: {
  vite:config   define: {
  vite:config     __VERSION__: '1.3.3',
  vite:config     __VUE_OPTIONS_API__: true,
  vite:config     __VUE_PROD_DEVTOOLS__: false,
  vite:config     __VUE_I18N_LEGACY_API__: false,
  vite:config     __VUE_I18N_FULL_INSTALL__: true,
  vite:config     __INTLIFY_PROD_DEVTOOLS__: false
  vite:config   },
  vite:config   server: { port: 5000, open: false },
  vite:config   plugins: [
  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     'vite:vue',
  vite:config     'vite-plugin-vue-i18n',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'obfuscator',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     include: [
  vite:config       'socket.io-client/dist/socket.io.js',
  vite:config       'peerjs/dist/peerjs.min.js'
  vite:config     ],
  vite:config     exclude: [ 'socket.io-client', 'peerjs' ]
  vite:config   },
  vite:config   outDir: 'dist',
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge18', '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: { output: [Object], plugins: [Array] },
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: { compress: [Object], mangle: [Object], output: [Object] },
  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     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 700
  vite:config   },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   configFile: '/Users/admin/WebstormProjects/vite/vite.config.ts',
  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     build: {}
  vite:config   },
  vite:config   root: '/Users/admin/WebstormProjects/vite',
  vite:config   base: '/',
  vite:config   publicDir: '/Users/admin/WebstormProjects/vite/public',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   optimizeCacheDir: '/Users/admin/WebstormProjects/vite/node_modules/.vite',
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  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   createResolver: [Function: createResolver]
  vite:config } +3ms
vite v2.1.2 building for production...
✓ 16 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (385:24)
file: /Users/admin/WebstormProjects/vite/src/views/Index.vue:385:24
error during build:
SyntaxError: Unexpected token (385:24)
    at Object.pp$4.raise (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:15591:13)
    at Object.pp.unexpected (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:13283:8)
    at Object.pp.semicolon (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:13260:64)
    at Object.pp$1.parseExpressionStatement (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:13739:8)
    at Object.pp$1.parseStatement (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:13474:24)
    at Object.pp$1.parseBlock (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:13755:21)
    at Object.pp$3.parseFunctionBody (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:15441:22)
    at Object.pp$3.parseArrowExpression (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:15402:8)
    at Object.pp$3.parseParenArrowList (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:15131:15)
    at Object.pp$3.parseParenAndDistinguishExpression (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:15097:19)
    at Object.pp$3.parseExprAtom (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:14950:41)
    at Object.pp$3.parseExprSubscripts (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:14793:19)
    at Object.pp$3.parseMaybeUnary (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:14770:17)
    at Object.parseMaybeUnary (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:19515:29)
    at Object.pp$3.parseExprOps (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:14705:19)
    at Object.pp$3.parseMaybeConditional (/Users/admin/WebstormProjects/vite/node_modules/rollup/dist/shared/rollup.js:14688:19)
error Command failed with exit code 1.

[patak-dev]

From the docs: https://vitejs.dev/config/#define

Entries will be defined as globals during dev and statically replaced during build.

In dev, your code works because __VERSION__ is defined as a global, in build it is not.

You need to use __VERSION__ directly instead of window.__VERSION__.

Note: As this var doesn't change, you can directly use it in your code as

const version = __VERSION__

There is no need for a ref here