How to upgrade sass-loader - vue.js

I use vue and when I run it, there is a warning. I tried npm update without luck. How to get rid off it?
vue-cli-service serve
WARN A new version of sass-loader is available. Please upgrade for best experience.

Serg already gave the answer in comment. It's worked for me. Adding the answer for others. Hope it will help others.
Just run this command
npm i sass-loader#latest

You can update your packages via using yarn upgrade-interactive --latest, in case of sass-loader, if you have upgrade it from 7 to 9, you may have some invalid options erros which you can fixed in below steps as I've explained before: https://stackoverflow.com/a/62844942/12666332
Problem
Based on https://github.com/vuejs/vue-cli/issues/4513, And If you have upgrade your sass-loader from v7 to 8 or 9, You may have faced with th validation-error for invalid options
vue.config.js(valid syntax for sass-loaderv7 in webpack)
css: {
loaderOptions: {
sass: {
data: `#import "#/assets/styles/variables/index.scss";`
}
}
}
errors
object:
ValidationError: Invalid options object. Sass Loader has been
initialized using an options object that does not match the API schema.
- options has an unknown property 'data'. These properties are valid:
sass-loader v8.0 Breaking Changes
You should know that v8. has below breaking changes :https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0
minimum required webpack version is 4.36.0
minimum required node.js version is 8.9.0
move all sass (includePaths, importer, functions) options to the
sassOptions option. The functions option can't be used as Function,
you should use sassOption as Function to achieve this.
the data option was renamed to the prependData option default value
of the sourceMap option depends on the devtool value (eval/false
values don't enable source map generation)
Solution v8
As the docs says, move all sass (includePaths, importer, functions) options to the sassOptions option. The functions option can't be used as Function, you should use sassOption as Function to achieve this.
the data option was renamed to the prependData option
sass-loader v9.0 Breaking Changes
You should know that v9. has below breaking changes :https://github.com/webpack-contrib/sass-loader/releases/tag/v9.0.0
BREAKING CHANGES minimum supported Nodejs version is 10.13
prefer sass (dart-sass) by default, it is strongly recommended to
migrate on sass (dart-sass)
the prependData option was removed in favor the additionalData
option, see docs
when the sourceMap is true, sassOptions.sourceMap,
sassOptions.sourceMapContents, sassOptions.sourceMapEmbed,
sassOptions.sourceMapRoot and sassOptions.omitSourceMapUrl will be
ignored.
Solution v9
In ver9 as you can see in the docs https://github.com/webpack-contrib/sass-loader#options (https://github.com/webpack-contrib/sass-loader#sassoptions , https://github.com/webpack-contrib/sass-loader#additionaldata), if we change data to additionalData if will fix the invalid options errors.
css: {
loaderOptions: {
sass: {
additionalData: `#import "#/assets/styles/variables/index.scss";`
}
}
}

Related

Tailwind CSS warning: No utility classes were detected in your source files

I make a vue project using this documentation: https://vuejs.org/guide/quick-start.html#creating-a-vue-application
And I wanted to added tailwind css to this project. So I used this guide (from point 2 Install Tailwind CSS): https://tailwindcss.com/docs/guides/vite#vue
But, I see no changes and get this warning:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
I followed the instuction as it is.
I tried following the content-configuration and I double checked it to see all files in place.
I was expecting tailwind.config.cjs file should be generated but instead tailwind.config.js is generated.
Updates:
On repeating all the steps using this link: https://tailwindcss.com/docs/guides/vite#vue
At step 4:
Add the Tailwind directives to your CSS, When I replace the content for style.css as asked in the step.. Exactly after this point, the error is shown.
Fixed.. Asking in the discord community this was the response:
Thank you for supplying a remotely-hosted repository. It seems to work
fine for me, it could be that you're suffering from a bug that this PR
solves: https://github.com/tailwindlabs/tailwindcss/pull/9650. You
could temporarily try insiders version and see if that fixes it for
you
npm install tailwindcss#insiders
I just gave solution to the same problem. You might have the same...
I had my tailwind.config.js like this:
module.exports = {
content: ["./src**/**/*.{html,js}"],
},
...and I changed the destination folder from "src" to "public", and it worked for me.
Like this:
module.exports = {
content: ["./public/**/*.{html,js}"],
},
Hope this will help you. Good luck and happy coding !

nested dependencies resolution for yarn not showing up in yarn.lockfile

I am using resolutions to resolve a vulnerability coming from a nested dependency (#dep/xyz). The nested dependency is using axios 0.21.1 whichhas a vulnerability. I am supposed to upgrade to any compatible version above it.
When I added it to resolutions like below I don't see the update in yarn.lock file for the nested dependency. Please advise.
Below is my package.json file
package.json
{
"name" : "xyz",
dependencies: {
"#dep/xyz" : "2.3.4",
"axios": "^0.21.2"
},
"resolutions": {
"**/**/axios": "^0.21.2"
}
}
yarn.lock which gets created after yarn install of above
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
axios#^0.21.1, axios#^0.21.2:
version "0.21.4"
resolved "https:..."
integrity sha1-123...=
dependencies:
follow-redirects "^1.14.0"
"#dep/xyz#2.3.4":
version "2.3.4"
resolved "https:..."
integrity sha1-123...=
dependencies:
"#x/d1" "0.2.2"
"#y/d2" "0.9.2"
axios "^0.21.1"
You likely need to upgrade yarn. resolutions does not work with dependencies that have / in their name for yarn versions below 2. See https://github.com/yarnpkg/yarn/issues/4874
For starters, you don't need to do any resolution pinning. #dep/xyz#2.3.4 is pulling in axios with semver specification of "^0.21.1". In this context it will accept any version that is both >=0.21.1 and <0.22.0. You need only to use yarn to update the version of axios being resolved. I would advise AGAINST resolution pinning when you don't need to, because that can cause long-term incompatibility. If in the future axios has version >=0.22.0 that you or your dependencies are trying to consume, your resolution setting will force those down to be something within the range >=0.21.2 && <0.22.0.
More directly to your question - I don't see anything that looks wrong. The lockfile is doing exactly what I would expect. Your resolution of "axios#^0.21.2" is being respected, as it's pulling in 0.21.4 which abides by that (even though like I said a resolution is not necessary to achieve that). You haven't done any kind of resolution pinning associated with #dep/xyz (nor should you) so nothing is changed there.

Is there a bug when extracting Vue with the "extract" method in laravel-mix webpack

I followed the laravel-mix documentation to reduce the size of my vue application by using the extract(['vue]) method, it works well, however when i try using async components it won't work properly.
i already added babel to enable the promise syntax
mix.js('resources/js/app.js', 'public/js').version().extract(['vue'])
{
"presets": ["#babel/preset-env"],
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
i'm hoping there is something i am missing here and its not a actual bug that i will have to wait for a patch, has anyone seen this issue before?
I just red this:
Warning: you can’t currently combine mix.extract() and async components. According to Laravel Mix this will be fixed when Webpack 5 gets released.
source: https://medium.com/maatwebsite/reducing-vue-application-file-size-with-laravel-mix-e483f746d836

How to use the create-react-app 3.1.0 eslint customisation?

Edit: This was a bug in 3.1.0 - upgrade to 3.1.1+ to get a working version of this feature.
create-react-app 3.1.0 is supposed to have support for customising the eslint warnings, as per: https://github.com/facebook/create-react-app/pull/7036
The documentation is here: https://facebook.github.io/create-react-app/docs/setting-up-your-editor#experimental-extending-the-eslint-config
I believe the rule setting I have in my package.json is correct because IDEA picks it up and no longer dislays the dot-location warning in the editor.
But npm start still complains with:
./src/Auth/AuthenticationProvider.tsx
Line 135: Expected dot to be on same line as property dot-location
My package.json is as per the documentation and I've added the EXTEND_ESLINT variable to the .env file.
My package.json config:
"eslintConfig": {
"extends": [
"react-app"
],
"rules": {
"dot-location": "off"
}
},
The environment variable is set in my .env file.
And the example failing source code looks like:
props.auth0Client.loginWithRedirect().
catch((e)=>{errorHandler(e)});
What am I doing wrong?
Am I misunderstanding how eslint config works, or maybe I'm wrong about what this new feature of create-react-app is actually supposed to do?
Please note: I don't want to add annotations to my code everywhere to disable the warning - the question is about customising the eslint config.
It appears you are not doing anything wrong and there is a bug in create-react-app 3.1.0. If you want to track progress, an issue has been filed in GitHub.

Publish a node module written in ES6 without providing the transpiled ES5 version b/c it is targeted for the latest browser

My team will publish a node module written in ES6, targeted for the latest browsers. All the ES6 features we use, like async/await, import/export are supported by our target browsers. So I believe providing the transpiled ES5 version does not make sense (Our targeted audiences assure us they will only use the latest Chrome).
But I found without the transpiled ES5 version when they use our module, they got SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' even though their gulpfile already set
return browserify({ ... })
.transform(babelify.configure({
presets: ["es2015"]
}))
...
If they just include our module source codes in their own codes they can import my module without any error. That makes me believe there should be some setting in my module so I can just provide ES6 version only.
BTW, I have read How to publish a module written in ES6 to NPM?
and SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' - Wait what?
They were not my question and the answers there didn't fix the SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' my clients got.
I spent a whole day solving it so I would like to share my experience.
First of all, it is browserify's parser that complained SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' so what I need to do is to let the client's browserify transform my module and the solution turned to be quite simple!
Why aren't files in node_modules being transformed?
A possible solution is to add:
{ "browserify": {
"transform": ["babelify"] } } to the root of all your modules package.json that you want to be transformed.
So adding "browserify": { "transform": [ "babelify" ] } to my module's package.json and the the problem is solved!
It is easy to verify that, e.g. in my module's .babelrc I particularly set "modules":false (b/c defaults to "commonjs")
{ "presets": [[
"env",
{
"modules":false,
"debug": true
}
]]}
Then I got SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' again!
PS,
I got more than one comments/answers said <script type="module". Of course I knew script has type="module" but that is the wrong answer!
Because we are talking using node module in browser environment, type="module" can't solve the problem of import module from node_modules