vite-plugin-vue icon indicating copy to clipboard operation
vite-plugin-vue copied to clipboard

Support import.meta.env.VITE_FOO in Vue templates

Open mahnunchik opened this issue 2 years ago • 2 comments

Description

Add support environment variables import.meta.env.VITE_FOO in Vue templates.

// text.vue
<template>
  <p>{{ import.meta.env.VITE_FOO }}</p>
  <div v-if="import.meta.env.VITE_FOO">
    content
  </div>
</template>

Currently the code above raises the error:

[plugin:vite:vue] Error parsing JavaScript expression: import.meta may appear only with 'sourceType: "module"' (1:1)

Suggested solution

Just support it 😉

Alternative

No response

Additional context

Related issues:

  • https://github.com/vitejs/vite/discussions/2669
  • https://github.com/vitejs/vite/issues/5086

Validations

mahnunchik avatar Dec 21 '22 08:12 mahnunchik

This seems to be happening because sourceType: 'module' is not set here. https://github.com/vuejs/core/blob/fe77e2bddaa5930ad37a43fe8e6254ddb0f9c2d7/packages/compiler-core/src/transforms/transformExpression.ts#L250-L252

sapphi-red avatar Dec 21 '22 10:12 sapphi-red

https://github.com/vuejs/rfcs/issues/566

sapphi-red avatar Mar 10 '23 11:03 sapphi-red