uglifyjs drop_console / pure_funcs is not working in webpack - optimization

I have the following configuration, but it still does not remove console.log statements:
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
pure_funcs: ['console.log'],
drop_console: true,
comments: false
},
pure_funcs: ['console.log'],
drop_console: true,
comments: false
})
What am I doing wrong?

It's possible that the messages you are getting are debugging messages in the console, rather than console.log. I had a similar issue where I thought using drop_console would suffice. I had to add drop_debugger as well, so given your example, this should remove all console output.
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
drop_debugger: true
},
comments: false
})

It is not the reason of uglifyjs in my case. It is caused by babel-loader which will transform console.log to (e = console).log.
I do not know how to fix it now. Finally, I have to use a babel plugin named babel-plugin-transform-remove-console to remove console.
However I do want to use UglifyJsPlugin.
This is a hint for those who can find out a resolution.

I had the same problem with drop_console not working in my react script setup (on Windows 10, React-script version 0.8.5).
Trying to reproduce this problem I created a brand new app, added console.log somewhere in App.js and drop_console: true in webpack.config.prod.js. However in this simple setup drop_console works and console.log is removed.
As it still didn't work in my real app I installed strip-loader:
npm install --save-dev strip-loader
then edited webpack.config.prod.js in node_modules\react-scripts\config (without ejecting from react):
var WebpackStrip = require('strip-loader'); // around line 20
...
// inserted in module/loaders between babel and style loaders, around line 168
{
test: /\.js$/,
loader: WebpackStrip.loader('debug', 'console.log')
},
Sure enough, all console.log statements were removed (npm run build). I then removed all my changes from the config and console.log were still being removed. I uninstalled strip-loader and the build still successfully removes console.log statements.
I cannot explain this behaviour, but at least it works (although somewhat magically).

Related

Latest Nuxt v2.15.7 install with babel "loose" option warnings

I've created a brand new project with npx create-nuxt-app my-cool-project but I do have some errors when running yarn dev.
Though the "loose" option was set to "false" in your #babel/preset-env config, it will not be used for #babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for #babel/plugin-proposal-private-methods.
The "loose" option must be the same for #babel/plugin-proposal-class-properties, #babel/plugin-proposal-private-methods and #babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["#babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Do you have any idea about this one? It reminds me of this other issue: Nuxt js - Fresh install of nuxt 2.14.6 contains babel "loose option" warnings
This issue is indeed back as shown in this Github issue
https://github.com/nuxt/nuxt.js/issues/9224#issuecomment-893263501
This happens if your Nuxt version is between 2.15.5 and 2.15.7 (I think).
A temporary solution could be adding this to your nuxt.config.js file, as suggested here
build: {
babel: {
plugins: [
'#babel/plugin-proposal-class-properties',
'#babel/plugin-proposal-private-methods',
// or with JUST the line below
['#babel/plugin-proposal-private-property-in-object', { loose: true }]
],
},
}
A definitive fix will probably be shipped shortly, feel free to subscribe to the Github issue to be notified of the latest updates.
EDIT: This will be fixed once this PR is merged and there's a new release: https://github.com/nuxt/nuxt.js/pull/9631
As for me helps this modification on answer above:
yarn add --dev #babel/plugin-proposal-class-properties #babel/plugin-proposal-private-methods #babel/plugin-proposal-private-property-in-object
Then change nuxt.config.js:
build: {
babel:{
plugins: [
['#babel/plugin-proposal-class-properties', { loose: true }],
['#babel/plugin-proposal-private-methods', { loose: true }],
['#babel/plugin-proposal-private-property-in-object', { loose: true }]
]
}
},

Vetur/Eslint/VS Code - can't set space between parenthesis for .vue files

I can't figure out how to set the configuration in for the space between function parentheses. I've set it everywhere to true, but when I save a .vue file, the space is removed - after it is removed it is highlighted as error (Missing space between function parentheses). It happens in script section. In .js files spaces are added, but also highlighted as error, this time... Unexpected space between function parentheses?! There was some configuration of settings (which I'm not able to recreate now) when on save the space was added for a moment and then removed again in .vue files.
my settings.json
"vetur.format.defaultFormatter.js": "prettier", // tried both prettier and typescript
// "vetur.format.defaultFormatter.js": "vscode-typescript", // tried both prettier and typescript
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"spaceBeforeFunctionParen": true,
"eslintIntegration": true,
},
"vscode-typescript": {
"singleQuote": true,
"spaceBeforeFunctionParen": true,
"eslintIntegration": true,
}
},
.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'#vue/standard'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"space-before-function-paren": ["error", "always"], //setting this to 'never' removes the error highlight in vue files, not js files
},
parserOptions: {
parser: 'babel-eslint',
sourceType: "module"
}
}
I've read a zillion questions and set the space-between-function-parentheses in every possible setting that I found in the answers. Still the linting process finds a way to ignore all those settings and implement a different one. Not to mention that it highlights errors not consistent with the auto-formatting. Is there any other setting that I am still missing?
Try this:
npm install prettier#v1.19.1 --save-dev --save-exact
and then restart VS Code.
Prettier just recently updated to v2 and if your project doesn't have prettier installed locally it will use VS Code's version, which is most probably the latest version. In prettier v2 the space-before-function-paren has become a default and hence will be applied on all your projects that don't have a local version of prettier pre v2 installed. For me using any config combination didn't seem to work - it's like prettier just ignored all of them. Hope this helps.
Prior to Prettier v2, It seems to not support space-before-function-paren rule. So We should turn off the rule above to resolve conflict.
Try this
module.exports = {
rules: {
'space-before-function-paren': 'off'
}
}
in an ESLint configuration file(such as .eslintrc.js) located in root directory of project.
Then we should add following to settings.json in VS Code.
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
Last but not least, Disabling Vetur extension in VS Code might be a better choice.
I also had same exact issue with vetur and ESLint extns. Following in settings.json fixed it. By default it was prettier.
"vetur.format.defaultFormatter.js": "prettier-eslint",

How do you remove console.log from a build using the JS Quasar Framework?

I am trying the Quasar Framework (for those not familiar, it's based on Vue) and it's going well. However I've tried running a build (npm run build) and get repeated:
error Unexpected console statement no-console
... so the build fails because it sees console.log(...) and is not happy. My options:
don't use console.log in development. But it's handy.
comment out the eslint rule that presumably enforces that, so letting console.log into production. But that's not ideal for performance/security.
have the build automatically remove any console.log. That's what I'm after.
But how?
I took a look at the build https://quasar.dev/quasar-cli/cli-documentation/build-commands and it mentions using webpack internally and UglifyJS too. Given that, I found this answer for removing console.log in a general Vue/webpack project: https://github.com/vuejs-templates/webpack-simple/issues/21
... but if that's how, where does that go within Quasar since there is no webpack config file? I imagine in the quasar.conf.js file (since I see an 'extendWebpack' line in there - sounds promising). Or is there a better way to do it? How do other people remove console.log in production when using Quasar? Or handle logging without it?
Thanks!
https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
quasar.conf.js:
module.exports = function (ctx) {
return {
...
build: {
...
uglifyOptions: {
compress: { drop_console: true }
}
},
}
}
The above will result in configuring terser plugin with the following:
terserOptions: {
compress: {
...
drop_console: true
},
(https://github.com/terser/terser#compress-options)
(you can see the generated config with quasar inspect -c build -p optimization.minimizer)
You still also need to remove the eslint rule to avoid build errors, see https://github.com/quasarframework/quasar/issues/5529
Note:
If you want instead to configure webpack directly use:
quasar.conf.js:
module.exports = function (ctx) {
return {
...
build: {
...
chainWebpack (chain) {
chain.optimization.minimizer('js').tap(args => {
args[0].terserOptions.compress.drop_console = true
return args
})
}
},
}
}
It will do the same as above.
See https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
and https://github.com/neutrinojs/webpack-chain#config-optimization-minimizers-modify-arguments
https://github.com/quasarframework/quasar/blob/dev/app/lib/webpack/create-chain.js#L315
1 Edit package.json in Vue's project what had created it before.
2 Then find "rules": {}.
3 Change to this "rules":{"no-console":0}.
4 if you Vue server in on, off it and run it again. Then the issue will be done.
As an alternative I can suggest using something like loglevel instead of console.log. It's quite handy and allows you to control the output.

The implementation option must be passed to the Sass task

Running grunt - I get this error message:
Running "sass:all" (sass) task
Fatal error: The implementation option must be passed to the Sass task
I've tried re-installing grunt, node, npm, dependencies - but I always come back to this error I can't get past.
Should I post my Gruntfile.js? Frankly, this was set up by a third-party and we don't use it often - I'm thinking maybe we should start from the ground up because it is from about 4 years ago originally... but wondering if anyone has seen this error before and knows of a fix/workaround.
With the update to grunt-sass 3, you have to choose whether you want to use node-sass or dart-sass to compile
For node-sass you need to install the module with:
$ npm install --save-dev node-sass
In you gruntfile, you than need to add node-sass as requirement and add the define constant as implementation option:
const sass = require('node-sass');
require('load-grunt-tasks')(grunt);
grunt.initConfig({
sass: {
options: {
implementation: sass,
sourceMap: true
},
dist: {
files: {
'main.css': 'main.scss'
}
}
}
});
See also official page for more details: https://www.npmjs.com/package/grunt-sass
use this
**const sass = require("node-sass");**
**grunt.initConfig({
sass: {
options: {
implementation: sass,
sourceMap: true,
},
dist: {
files: {
"css/styles.css": "css/styles.css",
},
},
},
});
This will help you solve the problem
UPDATE: Only works for grunt-sass 2.x
I had this problem when upgrading from grunt-sass 1.x to 2.x. This solved it for me:
Add implementation: 'sass' to your sass.options object in Gruntfile.js like so:
options: {
implementation: 'sass',
outputStyle: 'expanded',
sourceMap: true,
quiet: true // stop depreciation errors
},

how to turn off console.log and warnings from webpack

I am working on a play scala project that uses webpack and react. I did copy my webpack.config.js used for development and renamed it to webpack.prod.config.js. Using this new file, I want to be able to turn off the console.log and warnings. I used:
plugins: [
new ExtractTextPlugin("styles.css"),
new webpack.NormalModuleReplacementPlugin(/debug/, process.cwd() + './emptyDebug.js')
],
performance: {
hints: false
}
but I can still see those messages. Any solutions?
Thx
You could set the stats option to 'none':
stats: 'none'
Or you could use webpack-dev-middleware and set noInfo to true. If you're using webpack-dev-server you can set noInfo to true in the config:
devServer: {
noInfo: true
}