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
}
Related
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 }]
]
}
},
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",
I am trying to use THIS library on the client side as a plugin When I npm run dev the client, I get this error
My vue2socketcluster.js file inside the plugins folder looks like this
import Vue2Socketcluster from 'vue2-socketcluster'
Vue.use(Vue2Socketcluster,{
hostname:"localhost",
secure:true,
propName:"socket" // Defaults to socket - so if you want vm.$soc you would change this to "soc"
})
and nuxt config had an entry for plugins
plugins: [
'~/plugins/vue2socketcluster'
],
Any direction will be super appreciated
Fixed it by setting server side rendering to false. Thank you
plugins: [
{ src: '~/plugins/sc', mode: 'client' }
],
I have an existing vue-cli 2 app that I'm attempting to upgrade to vue-cli-3. After adding my unique dependencies, I dropped src/ right into the newly created vue-cli-3 app and started up. woot!
How do I manage [PROD|DEV|TEST].env.js now that we use vue.config.js?
I got the following error because my first attempt to create a vue.config.js was to simply rename config/index.js to be /vue.config.js and keep the existing /config/[PROD|DEV|TEST].env.js but I got the following error:
ERROR Invalid options in vue.config.js: "build" is not allowed. "dev"
is not allowed error Command failed with exit code 1.
I don't understand how environments are now managed.
Thanks for your time!
May be you should use devServer instead. And for build I guess there is another name now.
For example:
module.exports = {
devServer: {
// your settings
}
}
For example:
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
Reference: vue-cli
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).