define not working with typescript vue template

[mika76]

Describe the bug

Using the vue-ts template, and defining a variable in the define section of the vite config, throws an error when building (works in dev)

Reproduction

create a new vite vue-ts template project

$ pnpm create vite my-vue-ts-app -- --template vue-ts`
$ cd my-vue-ts-app
$ pnpm i

vite.config.ts

export default defineConfig({
  define: {
    __BUILD_DATE: JSON.stringify(Date())
  },
  plugins: [vue()]
})

main.ts

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

console.log(__BUILD_DATE)

and then run build

➜  my-vue-ts-app pnpm run build

> my-vue-ts-app@0.0.0 build /Users/blah/Documents/test/vite/my-vue-ts-app
> vue-tsc --noEmit && vite build

src/main.ts:6:13 - error TS2304: Cannot find name '__BUILD_DATE'.

6 console.log(__BUILD_DATE)
              ~~~~~~~~~~~~


Found 1 error.

 ELIFECYCLE  Command failed with exit code 2.

System Info

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 336.57 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.2.0 - ~/.nvm/versions/node/v17.2.0/bin/node
    npm: 8.2.0 - ~/.nvm/versions/node/v17.2.0/bin/npm
  Browsers:
    Brave Browser: 95.1.31.88
    Chrome: 96.0.4664.93
    Edge: 96.0.1054.43
    Firefox: 94.0.2
    Safari: 15.0
  npmPackages:
    @vitejs/plugin-vue: ^1.10.2 => 1.10.2
    vite: ^2.7.0 => 2.7.1

Used Package Manager

pnpm

Logs

Same as above although I realise now that I use `pnpm run build` which actually runs `vue-tsc --noEmit && vite build` so it's actually vue-tsc that is failing not vite build...

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]

This is a type error, not a build error. If you remove vue-tsc --noEmit it should work again. But to fix the type errors, you can update src/env.d.ts with ImportMetaEnv.

[mika76]

Thanks @bluwy but I still consider it a build error. By default, and by using a documented feature, the build fails. Maybe the docs should be updated for the define section?

[bluwy]

Oops I didn't realize it's define, not import.meta.env. My suggestion wouldn't work then, you have to do this instead:

// src/env.d.ts
declare const __BUILD_DATE: string;

Yes, I think a small note in the define section would be a good addition. Feel free to send a PR if you're interested!

[mika76]

Fantastic, thanks for your help