I am trying to suppress/fix a deprecated warning from my grunt-sass (based on node-sass) compile that I traced to Susy 2 using functions listed to deprecate in Sass 4.0. At this point, it's not feasible to upgrade to Susy 3 as there's no upgrade guide and will break a large website.
Node-sass offers a --quiet option that I've passed in my Gruntfile.js though I am still getting the warning. This is my SASS section in my Gruntfile.js.
sass: {
options: {
quiet: true,
sourceMap: false,
outputStyle: 'compressed'
},
dist: {
options: {
quiet: true
},
files: {
'static/css/style.min.css' : 'static/css/sass/style.scss',
'static/css/orderform.css' : 'static/css/sass/orderform.scss'
}
}
}
Is there a way to suppress deprecated warnings? Just ignoring the warnings will slow down my development, outputting all the warnings increases my compile time from ~1s to ~4s.
Here is the log output
Version 2.2.14 was specifically released to solve this problem. I tried to reproduce this locally in 2.2.14, but I'm not able to. I do get the warning when I write an improper call() - but I'm not able to get the same warning from Susy. Are you sure the version of Susy being used is the version in npm?
Related
I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info
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 }]
]
}
},
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
},
I use Polymer 2.0 and my build setting is:
"builds": [
{
"name": "bundled",
"bundle": true,
"js": { "compile": true},
"css": { "minify": true },
"html": { "minify": true }
}]
I get "Can’t find variable: babelHelpers" error after build.
The Polymer CLI version that I use is 1.1.0.
EDIT: I was using polymer-cli locally. After installing latest polymer-cli globally, now I get “Constructor requires ‘new’ operator” on safari and “Failed to construct ‘HTMLElement’: Please use the ‘new’ operator, this DOM object constructor cannot be called as a function.” on chrome.
EDIT2: used webcomponents-loader.js instead of webcomponents-lite.js and my problem solved.
I was getting same error. Problem was that index.html is technically my entrypoint in my polymer.json config, but my actual served up entrypoint is another file that comes from my server (_Layout.cshtml since I'm using .NET on my backend). What I needed to do was take the code in my compiled index.html file and move it over to my CSHTML file once I set "compile": true. Problem solved.
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).