@vue/cli-plugin-babel/preset: Unable to use Babel plugin transform-remove-console?

[ux-engineer]

Version

4.2.2

Reproduction link

github.com/ux-engineer/bug-repro-vue-cli-4-babel-preset-with-custom-plugin

Environment info

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 12.5.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0 (mainly using Chrome and Firefox but those not showing up here?)
  npmPackages:
    @fortawesome/vue-fontawesome: ^0.1.9 => 0.1.9
    @types/vue-moment: ^4.0.0 => 4.0.0
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.2.2
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.1.2
    @vue/cli-plugin-babel: ^4.2.2 => 4.2.2
    @vue/cli-plugin-eslint: ^4.1.2 => 4.1.2
    @vue/cli-plugin-pwa: ^4.2.2 => 4.2.2
    @vue/cli-plugin-router: ^4.1.2 => 4.1.2
    @vue/cli-plugin-typescript: ^4.2.2 => 4.2.2
    @vue/cli-plugin-unit-jest: ^4.1.2 => 4.1.2
    @vue/cli-plugin-vuex: ^4.1.2 => 4.1.2
    @vue/cli-service: ^4.1.2 => 4.1.2
    @vue/cli-shared-utils:  4.1.2 (4.2.2)
    @vue/component-compiler-utils:  3.1.0
    @vue/composition-api: ^0.3.4 => 0.3.4
    @vue/eslint-config-airbnb: ^5.0.2 => 5.0.2
    @vue/eslint-config-typescript: ^5.0.1 => 5.0.1
    @vue/preload-webpack-plugin:  1.1.1
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    bootstrap-vue: ^2.4.0 => 2.4.0
    eslint-plugin-vue: ^6.1.2 => 6.1.2
    jest-serializer-vue:  2.0.2
    portal-vue:  2.1.7
    typescript: ~3.7.5 => 3.7.5
    vue: ^2.6.11 => 2.6.11
    vue-cli-plugin-i18n: ^0.6.0 => 0.6.0
    vue-cli-plugin-webpack-bundle-analyzer: ^2.0.0 => 2.0.0
    vue-cli-webpack:  1.0.0
    vue-eslint-parser:  7.0.0
    vue-form-wizard: ^0.8.4 => 0.8.4
    vue-functional-data-merge:  3.1.0
    vue-hot-reload-api:  2.3.4
    vue-i18n: ^8.15.3 => 8.15.3
    vue-i18n-extract:  0.4.14
    vue-i18n-ts:  0.1.0
    vue-jest:  3.0.5
    vue-json-csv: ^1.2.10 => 1.2.10
    vue-loader:  15.8.3
    vue-meta: ^2.3.2 => 2.3.2
    vue-moment: ^4.1.0 => 4.1.0
    vue-router: ^3.1.5 => 3.1.5
    vue-scrollto: ^2.17.1 => 2.17.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vue2-dropzone: ^3.6.0 => 3.6.0
    vuex: ^3.1.2 => 3.1.2
    vuex-module-decorators: ^0.16.1 => 0.16.1
    vuex-oidc: ^3.4.1 => 3.4.1
    vuex-persist: ^2.2.0 => 2.2.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Installed the plugin as a dev dependency by: npm i -D babel-plugin-transform-remove-console

Then modified babel.config.js:

module.exports = (api) => {
  var env = api.cache(() => process.env.NODE_ENV);
  var plugins = [];
  // Change to 'production' when configs are working
  if (env === 'development') {
    plugins.push(['transform-remove-console', { exclude: ['error', 'warn'] }]);
  }
  return {
    presets: ['@vue/cli-plugin-babel/preset'],
    // plugins,
    // Doesn't work even when always on?
    plugins: ['transform-remove-console'],
  };
};

Add some console.log() and console.warn() lines in your componen etc runtime code.

What is expected?

Running npm run serve -- --reset-cache and build command with different environments should drop console loggings.

What is actually happening?

I've also tried building the app many times with different environments, but the console loggings are still showing up in the browser's console.

Actually, now that I created this bug reproduction repo, the plugin is working there!

However I cannot figure out what is causing it not to work in my real application. I've also tried nuking npm cache by npm cache clean --force...

---

Another way would be to configure this with a Webpack plugin instead. However, Babel has this plugin in-built.

[ux-engineer]

I found out that my recent NPM packages upgrades had been interrupted and had not been fully successful. There was some Vue CLI plugins that had different versions.

After nuking node_modules folder and upgrading all the packages this Babel plugin started working!

[smoothdvd]

I meet this problem when build image in Docker. But I can build project successfully in local machine.