Build throws multiple warnings

[emyasnikov]

After installation to use with vuetify@2.5.7 webkit throws hundreds of warnings caused by some SCSS rules inside Vuetify itself.

[kolesnikovav]

I've seen that Firefox browser throws css warnings related Vuetify rules. Google Chrome works pretty well. What browser/environment do You use?

[emyasnikov]

I'm sorry, I wasn't exact with the issue description. The warnings are thrown while build process itself in the command line using webkit. What I see, the problem is probably the older version of Vuetify which conflicts with the other packages I use:

"sass": "^1.35.2",
"sass-loader": "^12.1.0",
"vue": "^2.6.14",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.5.7"

The warnings look like this, but there are much more, possibly I overlooked some heavier stuff:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
63 │     'md': $grid-gutter / 3,
   │           ^^^^^^^^^^^^^^^^
   ╵
    node_modules/vuetify/src/styles/settings/_variables.scss 63:11  @import
    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import
    node_modules/vuetify/src/styles/styles.sass 2:9                 @import
    node_modules/vuetify/src/components/VBtn/_variables.scss 1:9    @import
    node_modules/vuetify/src/components/VBtn/VBtn.sass 2:9          root stylesheet

There are hundreds of them so build lasts for couple of minutes in comparison to couple of seconds without the vuetify-toolkit package, which is really cool thing and I would like to use it for tree select and co.

[emyasnikov]

Can I contribute somehow? I tried to bump version of Vuetify for this package, but got even more issues

[kolesnikovav]

I want to try downgrade vuetify dependency in this package. I think, it can solve this problem.

[kolesnikovav]

@emyasnikov Hi Can You checkout this branch locally in your project. https://github.com/kolesnikovav/vuetify-toolkit/tree/bugfix-dependency

I've move vuetify dependency to peer section to avoid using several versions of vuetify library

[emyasnikov]

Unfortunately, neither npm nor yarn can build the package. Running yarn or any other command like yarn build or yarn lib causes multiple dependency issues and ends with fatal error.

Warnings before build:

warning " > babel-core@7.0.0-bridge.0" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@vue/cli-plugin-unit-jest > vue-jest@3.0.7" has unmet peer dependency "vue@^2.x".
warning "@vue/eslint-config-standard > eslint-import-resolver-webpack@0.12.2" has unmet peer dependency "webpack@>=1.11.0".
warning " > @vue/test-utils@1.0.0-beta.32" has unmet peer dependency "vue@2.x".
warning " > sass-loader@7.3.1" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
warning " > ts-jest@25.5.1" has unmet peer dependency "jest@>=25 <26".
warning " > ts-jest@25.5.1" has incorrect peer dependency "typescript@>=3.4 <4.0".
warning "vue-cli-plugin-vuetify > null-loader@3.0.0" has unmet peer dependency "webpack@^4.3.0".
warning " > vuetify-loader@1.7.2" has unmet peer dependency "vuetify@^1.3.0 || ^2.0.0".
warning " > vuetify-loader@1.7.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "vuetify-loader > file-loader@6.2.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".

Error, maybe due to mac itself or node version:

1 error generated.
make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (*/vuetify-toolkit/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Darwin 20.6.0
gyp ERR! command "*/node" "*/vuetify-toolkit/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd */vuetify-toolkit/node_modules/node-sass
gyp ERR! node -v v16.5.0

Using npm run build or npm run lib after yarn I go further but end up with this error:

Vue packages version mismatch:

- vue@2.6.14 */vuetify-toolkit/node_modules/vue/dist/vue.runtime.common.js)
- vue-template-compiler@2.6.12 (*/vuetify-toolkit/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

Without yarn I cannot run npm install, it stops after dozens of deprecation warnings and same fatal error as before.

[kolesnikovav]

I need steps for reproduce your case.

[emyasnikov]

Those were the steps to build package out of bugfix-dependency branch ... I don't think I did more, than what is in the contributing file

[kolesnikovav]

@emyasnikov I'm so sorry, but I ask you about case of use. All build scripts works without any warnings. The problem you are facing is in massive warnings when you build your project with this library.
Can you give an example of your cmd-line build script so that I can reproduce the situation and deep dive into.

Thank You

[emyasnikov]

@kolesnikovav I created sample project here https://github.com/emyasnikov/vuetify-toolkit-test To separate breaking stuff I put all things into vuetify-toolkit branch, check it out. Then simply run npm installand npm run dev.

[kolesnikovav]

I saw the problem , I will solve it

[kolesnikovav]

Since version 0.4.1 this library has 2 variants. In one of them, that was used earlier, vuetify library is externalized. In some cases, like this, this way doesn't work. You can use full build as follow:

import { VTreeSelect } from 'vuetify-toolkit/lib/vuetify-toolkit.umd

[emyasnikov]

That's great! Thank you very much for your effort and your patience. It works perfectly

[kolesnikovav]

Тебе спасибо Евгений. Молодец.