Skip to content

Destructured env vars not replaced in --modern builds #4658

Closed
@runarberg

Description

@runarberg

Version

4.0.0-rc.7

Reproduction link

https://github.com/runarberg/vue-cli-modern-process-env-fail

Environment info

$ npx @vue/cli@next info

Environment Info:

  System:
    OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
    CPU: (4) x64 Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz
  Binaries:
    Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
    Yarn: Not Found
    npm: 6.11.3 - ~/.nvm/versions/node/v12.11.1/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 69.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  4.0.0-rc.7 
    @vue/babel-preset-jsx:  1.1.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.1.0 
    @vue/cli-overlay:  4.0.0-rc.7 
    @vue/cli-plugin-babel: ^4.0.0-rc.7 => 4.0.0-rc.7 
    @vue/cli-plugin-eslint: ^4.0.0-rc.7 => 4.0.0-rc.7 
    @vue/cli-service: ^4.0.0-rc.7 => 4.0.0-rc.7 
    @vue/cli-shared-utils:  4.0.0-rc.7 
    @vue/component-compiler-utils:  3.0.0 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  5.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.7.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Destructure process.env somewhere in your code:

<template>
  <HelloWorld :msg="msg" />
</template>

<script>
const { VUE_APP_MSG: msg } = process.env;

export default {
  data() {
    return {
      msg,
    };
  },
};
</script>

Add the env var to your .env:

 VUE_APP_MSG="Hello, Bug!"

Then build with the --modern flag:

npm run build -- --modern

What is expected?

The build output should have the destructured env vars replaced. That is msg should be set to "Hello, Bug!".

What is actually happening?

This only happens in the legacy build. In the modern build the variable is undefined.


I think this is a regression. I think this worked as expected in vue-cli 3.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions