How to disable console output when bundling for production with VueCLI?

[nicktupy]

Vue-CLI-3's configuration uses double quotes instead of single quotes when defining process.env.NODE_ENV.

Currently the websocket client only checks for: process.env.NODE_ENV !== 'production' causing debug console logs to be pushed even in production environments for Vue apps.

The if statements in src/connection/index.js that allow debug logs to occur should also check for process.env.NODE_ENV !== "production" or have a debug option to disable these logs.

[RomainLanz]

Hey @nicktupy! 👋

'production' or "production" are exactly the same, they are both strings.

[nicktupy]

When the Vue-CLI sets the NODE_ENV, it is set as '"production"' or '"development"' so the quotations are considered a part of the string.

if (process.env.NODE_ENV !== 'production') { //debug function }

Causes the debug to occur regardless of the NODE_ENV set by vue.

Changing if statements in src/Connection/index.js to the following solves the problem. if (process.env.NODE_ENV !== 'production' | process.env.NODE_ENV !== "production") { //debug function }

I suspect using != vs !== would also solve the issue.

[nicktupy]

Here is an example. The production output text you see in the log is from console.log(process.env.NODE_ENV)

Once I implemented the change I discussed in the above post, the websocket-client logs properly disappeared.

I'm not quite sure how this bug is happening, my fix shouldn't be necessary and shouldn't change anything. When logging process.env.NODE_ENV to console, I get a normal string that reads 'production' or 'development' depending on how I serve the app.

The exact same if-statement of if (process.env.NODE_ENV !== 'production') { //do stuff } works as expected anywhere else in a vue app; however, it is not properly detecting the production string unless it also checks for double quotes when being read from the websocket-client node module.

[reg2005]

Vue-CLI-3 is not build vendor libraries use it or it

[RomainLanz]

Thanks for your comment @reg2005.

@nicktupy, it should work if you add this package to the transpileDependencies in your config.

[nicktupy]

Adding it to the transpileDependencies array appears to break the module for me.

[RomainLanz]

Could you please create a repository with the minimum amount of code to reproduce the issue so I can have a look?

[nicktupy]

Here is a freshly generated vue project with the adonis-websocket-client installed via npm i @adonisjs/websocket-client

When launched via the Vue-CLI using the "Serve" task with the "Production" parameter selected or the "Build" task, you should see the websocket debug messages being written to the console.

Uninstalling @adonisjs/websocket-client and installing it via my modified fork of it will demonstrate the fix. npm install https://github.com/nicktupy/adonis-websocket-client

[RomainLanz]

Your repository doesn't exist @nicktupy.

[nicktupy]

Sorry, I accidentally created it as a private repo. It should be public now.

[Mcdostone]

I have the same issue, impossible to disable console output even if with a definePlugin configured. I'm not using vueCLI but webpack CLI (webpack ^4.28.4, webpack-cli ^3.2.1)

The command I use: webpack --mode production -p

const webpack = require('webpack')
const path = require('path')

module.exports = (_, options) => {
  return {
    target: 'web',
    entry: {
      'js/log': './resources/assets/scripts/log.js',
    output: {
      path: path.resolve('./public/')
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(options.mode),
      }),
    watch: options.mode !== 'production'
  }
}

// resources/assets/scripts/log.js
import 'babel-polyfill'
import Ws from '@adonisjs/websocket-client'
function subscribeToChannel (ws) {
  const log = ws.subscribe('log')
  // do some stuff
}

document.addEventListener('DOMContentLoaded', () => {
  const ws = Ws('', { reconnectionAttempts: 3, reconnection: false }).connect()
  ws.on('open', () => subscribeToChannel(ws))
  ws.on('error', err => console.error('error', err))
  window.onbeforeunload = () => {
    if (ws) {
      ws.close()
    }
  }
})

[nicktupy]

Try using my fork of the web socket client repo. It should work as a temporary fix.

On Mon, Apr 29, 2019, 11:29 PM Yann Prono [email protected] wrote:

I have the same issue, impossible to disable console output even if with a definePlugin configured. I use webpack ^4.28.4:

const webpack = require('webpack')const path = require('path') module.exports = (_, options) => { return { target: 'web', entry: { 'js/log': './resources/assets/scripts/log.js', output: { path: path.resolve('./public/') }, module: { rules: [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, ] }, plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(options.mode), }), watch: options.mode !== 'production' } }

// resources/assets/scripts/log.jsimport 'babel-polyfill'import Ws from '@adonisjs/websocket-client'function subscribeToChannel (ws) { const log = ws.subscribe('log') // do some stuff } document.addEventListener('DOMContentLoaded', () => { const ws = Ws('', { reconnectionAttempts: 3, reconnection: false }).connect() ws.on('open', () => subscribeToChannel(ws)) ws.on('error', err => console.error('error', err)) window.onbeforeunload = () => { if (ws) { ws.close() } } })

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/adonisjs/adonis-websocket-client/issues/60#issuecomment-487818287, or mute the thread https://github.com/notifications/unsubscribe-auth/AHVN3MHMGUOOJWXLCEITL43PS7DKFANCNFSM4HEZCULA .

[Skullcan]

Having same issue with React.

[vanessa]

I'm having the same problem with React as well. Using @nicktupy's solution solved the problem for me.

[FatihKaanAkkus]

I have the same issue with the [email protected] using @adonisjs/[email protected]. All the configuration is coming from the examples on the documentation 4.1.0. For the given information and the package itself it should work with the NODE_ENV set as "production".

Also in the "dist/Ws.browser.js" implementation NODE_ENV check is missing. What is the reason behind it? It sure works with react environment, but I don't have enough knowledge for others to understand. Thank you.

var Debug = createCommonjsModule(function (module) {

  /*
   * adonis-websocket-client
   *
   * (c) Harminder Virk <[email protected]>
   *
   * For the full copyright and license information, please view the LICENSE
   * file that was distributed with this source code.
  */

  {
    var _Debug = browser;
    _Debug.enable('adonis:*');
    module.exports = _Debug('adonis:websocket');
  }
});

Changing above to add a condition to check if process.env.NODE_ENV !== 'production' fixes my problem.

PS Permalink link to source for non-browser setup: https://github.com/adonisjs/adonis-websocket-client/blob/be4d31f214bca449fbad800eeaa80daf86e87937/src/Debug/index.js#L12