I encountered an issue when running my Vue 3 project, which uses Vuetify and SCSS. The project is started using the npm run serve command, and I am getting multiple warnings about “Invalid dependencies” for Vuetify SCSS files.

Environment:

Node.js: 18.18.0
Vue: 3.4.21
Vuetify: 3.7.2
Vue CLI: 5.0.8
sass: ^1.72.0
sass-loader: ^14.1.1

Error:

 warning  in ./node_modules/.cache/vuetify/lib/directives/ripple/VRipple.sass

Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "D:/Constr/test/dio/frontend/node_modules/.cache/vuetify/lib/directives/ripple/VRipple.sass"

These messages concern different .sass files inside node_modules/.cache/vuetify. The error occurs with files related to Vuetify components, such as VTextField, VTextarea, VVirtualScroll, etc.

Here is my current vue.config.js, which works everywhere except on my PC:

const { VuetifyPlugin } = require('webpack-plugin-vuetify');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new VuetifyPlugin({
        autoImport: true,
        styles: { configFile: 'src/assets/styles/settings.scss' },
      }),
    ],
  },
  devServer: {
    port: 8080,
    proxy: process.env.VUE_APP_BASE_API,
  },
  productionSourceMap: false,
  transpileDependencies: ['vuetify'],
};

I tried:

1. Clearing the Vuetify cache.
2. Reinstalling dependencies.
3. Testing different configurations in vue.config.js.
4. Updating Vuetify to version 3.7.2.
5. Removing the line styles: { configFile: ‘src/assets/styles/settings.scss’ }. The errors disappear, but part of the styles breaks.

For example, I changed the configuration based on suggestions from the web, like this one, but it didn’t help either:

const { VuetifyPlugin } = require('webpack-plugin-vuetify');
const path = require('path');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    plugins: [
      new VuetifyPlugin({
        autoImport: true,
        styles: { configFile: path.resolve(__dirname, 'src/assets/styles/settings.scss') },
      }),
    ],
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/styles/settings.scss";`,
        sassOptions: {
          includePaths: [path.resolve(__dirname, 'src/assets/styles')],
        },
      },
    },
  },
  chainWebpack: (config) => {
    config.module
      .rule('scss')
      .oneOf('normal')
      .use('sass-loader')
      .tap((options) => {
        options.sassOptions = {
          includePaths: [path.resolve(__dirname, 'src/assets/styles')],
        };
        return options;
      });
  },
  devServer: {
    port: 8080,
    proxy: process.env.VUE_APP_BASE_API,
  },
  productionSourceMap: false,
  transpileDependencies: ['vuetify'],
};