Quasar app does not remove console.log() for production builds

Question

I am unable to get my Quasar app to remove the console.log() for production builds.

I have read answers on StackOverflow, Quasar forums and GitHub. All of these claim to fix the issue but I am still getting console.log's and warnings.

I have tried a few different combinations of

quasar.conf.js

module.exports = function (api) {
    build: {
      uglifyOptions: {
        compress: { drop_console: true },
      },
      devtool: 'source-map',
      sourceMap: true,      
      chainWebpack(chain) {
        chain.optimization.minimizer('js').tap((args) => {
          args[0].terserOptions.compress.drop_console = true
          args[0].terserOptions.compress.drop_debugger = true
          return args
        })
      }
    }
}

module.exports = function (api) {
    build: {
      uglifyOptions: {
        compress: { drop_console: true },
      }
    }
}

module.exports = function (api) {
    build: {
      chainWebpack(chain) {
        chain.optimization.minimizer('js').tap((args) => {
          args[0].terserOptions.compress.drop_console = true
          args[0].terserOptions.compress.drop_debugger = true
          return args
        })
      }
    }
}

All of which produce the below output.

quasar inspect -c build -p optimization.minimizer

output

[
  TerserPlugin {
    options: {
      test: /\.[cm]?js(\?.*)?$/i {
        [lastIndex]: 0
      },
      minimizer: {
        options: {
          compress: {
            drop_console: true,
            drop_debugger: true
          }
        }
      }
    }
]

eslintrc.js

module.exports = {
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow paren-less arrow functions
    'arrow-parens': 'off',
    'one-var': 'off',
    'optional-chaning': 0,
    'import/first': 'off',
    'import/named': 'error',
    'import/namespace': 'error',
    'import/default': 'error',
    'import/export': 'error',
    'import/extensions': 'off',
    'import/no-unresolved': 'off',
    'import/no-extraneous-dependencies': 'off',
    'prefer-promise-reject-errors': 'off',
    'vue/multi-word-component-names': 0,
    // allow debugger during development only
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
}

score 0 · Answer 1 · answered Aug 25 '23 at 20:31

In case anybody comes across the same issue I was able to figure it out.

I was using node-polyfill and I am not 100% what it did but it stopped Terser from removing console.

Original (Broken version)

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = function (api) {
    build: {

      chainWebpack(chain) {
        chain.optimization.minimizer('js').tap((args) => {
          args[0].terserOptions.compress.drop_console = true
          args[0].terserOptions.compress.drop_debugger = true
          return args
        })

       chain.plugin('node-polyfill').use(new NodePolyfillPlugin())
      }
    }
}

Working version

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = function (api) {
    build: {
      chainWebpack(chain) {
        chain.optimization.minimizer('js').tap((args) => {
          args[0].terserOptions.compress.drop_console = true
          args[0].terserOptions.compress.drop_debugger = true
          return args
        })
       chain.plugin('node-polyfill').use(
         new NodePolyfillPlugin({
           excludeAliases: ['console'],
         }),
        )
      }
    }
}

Quasar app does not remove console.log() for production builds

1 Answers1