How to drop console statements in production

[SB]

.eslintrc.js

// allow console.log during development only
‘no-console’: process.env.NODE_ENV === ‘production’ ? ‘error’ : ‘off’,

Running quasar build will result in something like this

ERROR in ./src/components/user/UserTabRoles.vue
Module Error (from ./node_modules/eslint-loader/index.js):

C:\Users\xxx\code\quasar\infosys\src\components\user\UserTabRoles.vue
210:25 error Unexpected console statement no-console
236:25 error Unexpected console statement no-console

2 problems (2 errors, 0 warnings)

[newbro]

Also running into this issue. I read that someone configure terser (https://github.com/terser/terser#compress-options) to use the drop_console option, however I would prefer not to add additional library if this can be done as is.

[jeffatpf]

I’ve used the loglevel module with the corresponding Quasar boot file (loglevel.js):

// https://github.com/pimterry/loglevel
import loglevel from ‘loglevel’;

const isDevelopment = process.env.NODE_ENV === ‘dev’;
loglevel.setLevel(isDevelopment ? ‘debug’ : ‘error’, false);

window.console = loglevel;

[Allan-EN-GB]

Uglify (which comes baked in with Quasar) handles this: https://stackoverflow.com/questions/41040266/remove-console-logs-with-webpack-uglify

[Mickey58]

@Allan-EN-GB
Sorry, I have problems getting removal of console.logs in production working: Based on the answer to this StackOverflow post, I added to my quasar.conf the following:

build: {
  env: ctx.dev
  ? {
     // son dev we'll have
     // some settings for dev here...
     } 
   : {   
     // and on  build (production)
        uglifyOptions: {
          compress: { drop_console: true }
         },
      // some other prod settings go here...
      }

After doing a successful production build and deployment (on Heroku), I still see all console.logs statements from my Quasar app in the browser console.

What could be wrong with my approach?

[Mickey58]

Gentle reminder: Anyone who knows how to get rid of console.logs in production?

[tof06]

@Mickey58 I’m wondering… what is this env property in your build config ?
I would make it like this : (didn’t try)

build: {
  uglifyOptions: {
    compress: { drop_console: !ctx.dev }
  }
  // ... Other build options
}

[Mickey58]

Thanks, I tried your suggestion, but still get console log output.

My quasar.conf follows the official template from the Quasar docs on https://quasar.dev/quasar-cli/cli-documentation/handling-process-env#Adding-to-process.env

Afaik, process.env is the same as ctx.dev, which is true for a dev environment and false for a prod environment. So it should set drop_console to true in a prod environment.

Still not sure why it doesn’t work.

[tof06]

@Mickey58 said in How to drop console statements in production:

My quasar.conf follows the official template from the Quasar docs on https://quasar.dev/quasar-cli/cli-documentation/handling-process-env#Adding-to-process.env

This is for adding something in process.ENV object, not to change your build options.

@Mickey58 said in How to drop console statements in production:

Thanks, I tried your suggestion, but still get console log output.

That’s strange. I tried on my app, and console.log are removed on production build.
Can you share your whole build section of quasar.conf.js ?

[Mickey58]

@tof06 - thanks for that hint, it looks like I misunderstood that template. I added the uglifyOptions now in front of that env: in the build section, and with a fresh build on Heroku, the console.logs are gone, so that problem is solved.

Unfortunately I get another problem (CORS error on some of the requests from the Quasar frontend to the backend) with that build. I still have to diagnose whether it is a side effect of the drop_console or a separate problem.

[skypart]

It may work!
https://medium.com/@boyskypart/how-to-build-and-delete-all-console-in-quasar-framework-97ae324451b2