Babel plugin transform-remove-console not working with Vue CLI 4 @vue/cli-plugin-babel/preset?

Question

With a VueJS project created by Vue CLI 4, you get Babel configured with this handy preset in babel.config.js:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
};

I'm trying to use babel-plugin-transform-remove-console to remove console.* from the built JS files.

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'],
  };
};

This should work by running npm run serve -- --reset-cache, and 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?

Is Vue CLI's preset somehow mixing it up for not being able to set plugins via this configuration file?

UPDATE: Created a bug report to Vue CLI repo, and while creating a minimal bug reproduction repository, I found out this plugin is working with a new project.

However, I have no idea what is causing this as I've synced this application with the newest CLI bootstrapped template, and also tried nuking NPM cache by `npm cache clean --force.

cache is one thing messed up node_modules is different thing. On windows I had once similar problem and I had to remove manually node_modules and contents of AppData/local/temp and than reinstall modules - maybe this will solve your problem too. — Zydnar

Waruyama Waruyama · Accepted Answer · 2021-02-01T18:34:13

I ran into the same problem. This did not work:

plugins: ['transform-remove-console']

But this worked:

plugins: [['transform-remove-console', { exclude: ['error', 'warn'] }]]

Hope this helps others who encounter the same issue.

Babel plugin transform-remove-console not working with Vue CLI 4 @vue/cli-plugin-babel/preset?

2 Answers