Describe the bug When passing a component property which folds int

Multiline Vue component props breaks import.meta.env about vitest HOT 4 CLOSED

JarvisH commented on September 27, 2024 6

Multiline Vue component props breaks import.meta.env

from vitest.

Comments (4)

JarvisH commented on September 27, 2024 1

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.

from vitest.

imjasonmiller commented on September 27, 2024

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

from vitest.

hi-ogawa commented on September 27, 2024

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);