Artfaith Posts - Answer Overflow

Artfaith

•Created by Artfaith on 4/28/2024 in #❓・help

Silence SASS deprecation warnings

While hopefully... trying to migrate from Nuxt v2.14 to v2.17, I am also changing node-sass to sass, When I ran NODE_ENV='--openssl-legacy-provider' npx nuxt2 build --modern=client, I am getting expected SASS deprecation warnings like:

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, 12) or calc($grid-gutter / 12)

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

   ╷
63 │     'xs': $grid-gutter / 12,
   │           ^^^^^^^^^^^^^^^^^
   ╵
    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/VGrid/VGrid.sass 1:9        root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($grid-gutter, 12) or calc($grid-gutter / 12)

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

   ╷
63 │     'xs': $grid-gutter / 12,
   │           ^^^^^^^^^^^^^^^^^
   ╵
    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/VGrid/VGrid.sass 1:9        root stylesheet

I have added quiteDeps to Nuxt configuration build options:

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  build: {
    bridge: {
      typescript: false,
      nitro: false,
    },
    // ...
    loaders: {
      sass: {
        sassOptions: {
          quietDeps: true
        }
      },
      scss: {
        sassOptions: {
          quietDeps: true
        }
      }
    },
    // ...

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  build: {
    bridge: {
      typescript: false,
      nitro: false,
    },
    // ...
    loaders: {
      sass: {
        sassOptions: {
          quietDeps: true
        }
      },
      scss: {
        sassOptions: {
          quietDeps: true
        }
      }
    },
    // ...

Nevertheless, it still outputs the warnings. What is the correct way to silence those at least temporarily while... hopefully... migrating to new Nuxt, Vue, TypeScript, and then... Vuetify? I would appreciate a clarification/suggestion whether it's even possible without upgrading to Vuetify 3 or downgrading SASS, where current versions:

$ yarn list --pattern 'sass';
yarn list v1.22.19
├─ @nuxtjs/vuetify@2.0.0-beta.2
│  └─ sass-loader@8.0.2
├─ @types/node-sass@4.11.7
├─ postcss-sass@0.4.4
├─ sass-loader@10.5.2
├─ sass@1.75.0
└─ stylelint-config-rational-order@0.1.2
   └─ postcss-sass@0.3.5
Done in 0.66s.

$ yarn list --pattern 'sass';
yarn list v1.22.19
├─ @nuxtjs/vuetify@2.0.0-beta.2
│  └─ sass-loader@8.0.2
├─ @types/node-sass@4.11.7
├─ postcss-sass@0.4.4
├─ sass-loader@10.5.2
├─ sass@1.75.0
└─ stylelint-config-rational-order@0.1.2
   └─ postcss-sass@0.3.5
Done in 0.66s.

6 replies

NNuxt

•Created by Artfaith on 4/26/2024 in #❓・help

Error: ForkTsCheckerWebpackPlugin... configuration... does not match the API schema...

Greetings! ✨ I have been trying to upgrade Nuxt v2.14.6 to the latest v2.17.3 for days now.., and it feels like I am almost there! This is the current package.json file: https://dpaste.org/0tVrm. These are the changes:

-    "dev": "nuxt-ts",
-    "build": "nuxt-ts build --modern=client",
-    "start": "nuxt-ts start --modern=client",
-    "analyze": "nuxt-ts build --modern=client --analyze",
+    "dev": "nuxt",
+    "debug-dev": "NODE_ENV='development' node --inspect='0.0.0.0' -- './node_modules/.bin/nuxt'",
+    "build": "nuxt build --modern=client",
+    "start": "nuxt start --modern=client",
+    "analyze": "nuxt build --modern=client --analyze",
// ...
-    "build:nginx": "ts-node ./commands/build-nginx.js",
-    "build:production": "ts-node ./commands/build-prod.js"
+    "build:nginx": "ts-node ./.project/scripts/build/build-nginx.js",
+    "build:production": "ts-node ./.project/scripts/build/build-prod.js"
// ...
-    "@nuxt/typescript-runtime": "^1.0.0",
// ...
-    "nuxt": "^2.13.3",
+    "nuxt": "^2.17.3",
// ...
-    "@nuxt/typescript-build": "1.0.3",
+    "@nuxt/types": "^2.17.3",
+    "@nuxt/typescript-build": "^3.0.2",
// ...
-    "@nuxtjs/eslint-config-typescript": "^2.0.0",
+    "@nuxtjs/eslint-config-typescript": "^12.1.0",
// ...
-    "@nuxtjs/vuetify": "^2.0.0-beta.2",
+    "@nuxtjs/vuetify": "^1.12.3",
// ...
-    "@types/node": "^14.0.23",
+    "@types/node": "^18",
// ...
-    "eslint": "^7.4.0",
+    "eslint": "^9.1.1",
// ...
-    "eslint-plugin-nuxt": "^1.0.0",
+    "eslint-plugin-nuxt": "^4.0.0",
// ...
-    "node-sass": "^4.14.1",
// ...
-    "sass-loader": "^9.0.2",
+    "sass": "^1.75.0",
+    "sass-loader": "^10",
// ...
-    "vue": "^2.6.11",
+    "typescript": "^5.4.5",
+    "vue": "^2.7.16",

-    "dev": "nuxt-ts",
-    "build": "nuxt-ts build --modern=client",
-    "start": "nuxt-ts start --modern=client",
-    "analyze": "nuxt-ts build --modern=client --analyze",
+    "dev": "nuxt",
+    "debug-dev": "NODE_ENV='development' node --inspect='0.0.0.0' -- './node_modules/.bin/nuxt'",
+    "build": "nuxt build --modern=client",
+    "start": "nuxt start --modern=client",
+    "analyze": "nuxt build --modern=client --analyze",
// ...
-    "build:nginx": "ts-node ./commands/build-nginx.js",
-    "build:production": "ts-node ./commands/build-prod.js"
+    "build:nginx": "ts-node ./.project/scripts/build/build-nginx.js",
+    "build:production": "ts-node ./.project/scripts/build/build-prod.js"
// ...
-    "@nuxt/typescript-runtime": "^1.0.0",
// ...
-    "nuxt": "^2.13.3",
+    "nuxt": "^2.17.3",
// ...
-    "@nuxt/typescript-build": "1.0.3",
+    "@nuxt/types": "^2.17.3",
+    "@nuxt/typescript-build": "^3.0.2",
// ...
-    "@nuxtjs/eslint-config-typescript": "^2.0.0",
+    "@nuxtjs/eslint-config-typescript": "^12.1.0",
// ...
-    "@nuxtjs/vuetify": "^2.0.0-beta.2",
+    "@nuxtjs/vuetify": "^1.12.3",
// ...
-    "@types/node": "^14.0.23",
+    "@types/node": "^18",
// ...
-    "eslint": "^7.4.0",
+    "eslint": "^9.1.1",
// ...
-    "eslint-plugin-nuxt": "^1.0.0",
+    "eslint-plugin-nuxt": "^4.0.0",
// ...
-    "node-sass": "^4.14.1",
// ...
-    "sass-loader": "^9.0.2",
+    "sass": "^1.75.0",
+    "sass-loader": "^10",
// ...
-    "vue": "^2.6.11",
+    "typescript": "^5.4.5",
+    "vue": "^2.7.16",

6 replies

Gaming

Programming