Multiline Vue component props breaks import.meta.env

[JarvisH]

Describe the bug

When passing a component property which folds into multiple lines, any use of import.meta.env breaks the test and shows the following error:

ReferenceError: im__vite_ssr_import_meta__ is not defined

Using the following example, the error occurs when the ternary condition inside some-prop folds into multiple lines. If the text was shortened to fx. :some-prop="testValue ? 'Hello' : 'World'" the error does not occur. This also happens when passing object-syntax to class attributes etc.

The error does not occur in Vitest < 1.3.0.

<template>
  <SomeOtherComponent
    :some-prop="
      testValue
        ? 'A long value to break handling of env variables'
        : 'it needs to break into a new line'
    "
   <!-- This also breaks env variables -->
    :class="{
        'truncate text-xs': someCondition,
        'text-sm': !someOtherCondition
      }"
  >
    <div>{{ count }} x {{ times }} = {{ result }}</div>
    <button @click="times += 1">x1</button>
  </SomeOtherComponent>
</template>

<script lang="ts">
import { computed, ref, defineComponent } from 'vue';
import SomeOtherComponent from './SomeOtherComponent.vue';

export default defineComponent({
  components: {
    SomeOtherComponent,
  },
  props: {
    count: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const times = ref(2);
    const result = computed(() => props.count * times.value);
    const testValue = ref(false);

    // any use of import.meta.env will cause an error
    console.log(import.meta.env.MODE);

    return {
      times,
      result,
      testValue,
    };
  },
});
</script>

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-tfewql?file=components%2FHello.vue

System Info

Info from Stackblitz example. It was forked from official Vitest Vue example.


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: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-vue: latest => 5.0.4 
    vite: latest => 5.1.6 
    vitest: latest => 1.3.1

Used Package Manager

npm

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.
• 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.

[imjasonmiller]

I ran into the same issue (import.meta.env.DEV) and I couldn't figure out what was causing it, thank you!

[JarvisH]

I should mention I have solved this by exporting all needed env values from a separate file:

// fx utils/env.ts
export const MODE = import.meta.env.MODE
export const PROD = import.meta.env.PROD

This allows for easy mocking as well during tests.

[hi-ogawa]

It looks like strip-literal is confused by Vue component file. v1.3.0 is where strip-literal changed from acorn to js-token https://github.com/vitest-dev/vitest/releases/tag/v1.3.0 #5136, so that may be the reason (though I'm not sure how acorn could've handle Vue either).

When I locally debug the code around here:

vitest/packages/vitest/src/node/plugins/ssrReplacer.ts

Lines 16 to 18 in 6eda473

	let s: MagicString | null = null
	const cleanCode = stripLiteral(code)
	const envs = cleanCode.matchAll(/\bimport\.meta\.env\b/g)

I see following transformations:

Hello.vue

• original

<template>
  <SomeOtherComponent
    :some-prop="
      testValue
        ? 'A long value to break handling of env variables'
        : 'it needs to break into a new line'
    "
  >
    ...
  </SomeOtherComponent>
</template>

<script lang="ts">
...
    console.log(import.meta.env.MODE);

• after stripLiteral
  • there are two additional " in :some-prop="" ... "", which is probably pushing an offset by two later in MagicString.overwrite.

<template>
  <SomeOtherComponent
    :some-prop=""
      testValue
        ? '                                               '
        : '                                 '
    ""
  >
    ...
  </SomeOtherComponent>
</template>

<script lang="  ">
...
    console.log(import.meta.env.MODE);

• after MagicString.overwrite

<template>
  <SomeOtherComponent
    :some-prop="
      testValue
        ? 'A long value to break handling of env variables'
        : 'it needs to break into a new line'
    "
  >
    ...
  </SomeOtherComponent>
</template>

<script lang="ts">
...
    console.log(im__vite_ssr_import_meta__.envODE);

[hi-ogawa]

This is fixed in strip-literal v2.1.0. You can upgrade the transitive dependency either by re-creating lockfile or tools such as pnpm dedupe.

I confirmed the reproduction is fixed using package.json overrides:
https://stackblitz.com/edit/vitest-dev-vitest-bifxjk?file=package.json