babel-preset-app: Mocha + ES 6 modules do not work on npm build npm run build -- --mode test

[undergroundwires]

Version

5.0.8

Reproduction link

github.com

Environment info

  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: Not Found
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @cypress/vue:  0.0.0-development 
    @cypress/vue2:  0.0.0-development 
    @fortawesome/vue-fontawesome: ^2.0.9 => 2.0.10 
    @vue/babel-helper-vue-jsx-merge-props:  1.4.0 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.4.0 
    @vue/babel-preset-app:  5.0.8 
    @vue/babel-preset-jsx:  1.4.0 
    @vue/babel-sugar-composition-api-inject-h:  1.4.0 
    @vue/babel-sugar-composition-api-render-instance:  1.4.0 
    @vue/babel-sugar-functional-vue:  1.4.0 
    @vue/babel-sugar-inject-h:  1.4.0 
    @vue/babel-sugar-v-model:  1.4.0 
    @vue/babel-sugar-v-on:  1.4.0 
    @vue/cli-overlay:  5.0.8 
    @vue/cli-plugin-babel: ~5.0.8 => 5.0.8 
    @vue/cli-plugin-e2e-cypress: ~5.0.8 => 5.0.8 
    @vue/cli-plugin-eslint: ~5.0.8 => 5.0.8 
    @vue/cli-plugin-router:  5.0.8 
    @vue/cli-plugin-typescript: ~5.0.8 => 5.0.8 
    @vue/cli-plugin-unit-mocha: ~5.0.8 => 5.0.8 
    @vue/cli-plugin-vuex:  5.0.8 
    @vue/cli-service: ~5.0.8 => 5.0.8 
    @vue/cli-shared-utils:  5.0.8 
    @vue/compiler-sfc:  2.7.14 
    @vue/component-compiler-utils:  3.3.0 
    @vue/eslint-config-airbnb:  7.0.0 
    @vue/eslint-config-airbnb-with-typescript: ^7.0.0 => 7.0.0 
    @vue/eslint-config-typescript: ^11.0.3 => 11.0.3 
    @vue/test-utils: ^1.3.6 => 1.3.6 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^9.6.0 => 9.16.1 
    eslint-plugin-vuejs-accessibility: ^1.2.0 => 1.2.0 
    typescript: ~4.6.2 => 4.6.4 
    vue: ^2.7.14 => 2.7.14 
    vue-cli-plugin-electron-builder: ^3.0.0-alpha.4 => 3.0.0-alpha.4 
    vue-eslint-parser:  9.3.1 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  17.0.0 (15.10.0)
    vue-resize:  1.0.1 
    vue-style-loader:  4.1.3 
    vue-template-compiler:  2.7.14 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 5.0.8

Steps to reproduce

1. Create a project with babel + mocha tests
2. Enable ES6 modules through setting "type": "module" in package.json
3. Rename babel.config.js to babel.config.cjs and vue.config.js to vue.config.cjs (do similar for others if applicable)
4. Add a system under test (e.g. App.vue) that uses top-level await.
5. Run npm run build -- --mode test

What is expected?

Successful build

What is actually happening?

Build fails

---

I have debugged this and it fails due to this code:

  // Though in the vue-cli repo, we only use the two environment variables
  // for tests, users may have relied on them for some features,
  // dropping them may break some projects.
  // So in the following blocks we don't directly test the `NODE_ENV`.
  // Rather, we turn it into the two commonly used feature flags.
  if (!process.env.VUE_CLI_TEST && process.env.NODE_ENV === 'test') {
    // Both Jest & Mocha set NODE_ENV to 'test'.
    // And both requires the `node` target.
    process.env.VUE_CLI_BABEL_TARGET_NODE = 'true'
    // Jest runs without bundling so it needs this.
    // With the node target, tree shaking is not a necessity,
    // so we set it for maximum compatibility.
    process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = 'true'
  }

Exactly this line is causing the error process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = 'true'.

Setting this variable forces envOptions.modules = 'commonjs' which breaks the project.

---

My current workaround to add following to vue.config file to force if statement to be false:

  if (process.env.NODE_ENV === 'test') {
    process.env.VUE_CLI_TEST = true;
  }

Hope it helps others with same setup.