Nuxt Layers Cannot find module 'vuetify/package.json'

[aleksejssaburovs92]

Hello! Tried to use vuetify-nuxt-module in layer and include it in parent project, got error while running yarn dev:

Function that causes error
node_modules/.c12/gitlab_ecofinance_frontend_3egwiQ38Rj/node_modules/@vuetify/loader-shared/dist/index.mjs

function resolveVuetifyBase() {
  return path.dirname(require.resolve("vuetify/package.json", { paths: [process.cwd()] }));
}

Parent nuxt config:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  extends: [
    ['gitlab:ecofinance-frontend/nuxt-base-layer', { install: true, auth: process.env.GITLAB_TOKEN } ],
  ],
})

Layer nuxt config:

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    // '@nuxtjs/storybook',
    '@nuxtjs/tailwindcss',
    'vuetify-nuxt-module',
    '@nuxtjs/google-fonts',
    '@nuxtjs/i18n'
  ],
  googleFonts: {
    download: false,
    useStylesheet: true,
    preload: true,
    display: 'swap',
    families: {
      Inter: [400, 700],
    },
  },
  vuetify: {
    moduleOptions: {
      styles: {
        configFile: join(currentDir, './assets/styles/vuetify.scss')
      }
    },
    vuetifyOptions: join(currentDir, './vuetify.config.ts')
  },
  features: {
    inlineStyles: false,
  },
  nitro: {
    compressPublicAssets: true
  },
  sourcemap: false
})

Adding same vuetify-nuxt-module dependency in parent project fixes problem, but it rewrites all layer config.

[userquin]

Try adding vuetify as dependency

[aleksejssaburovs92]

Adding vuetify in parent project does fixes error, but now it ignores all configuration, like SASS variables

$color-pack: false,
$utilities: false,

[userquin]

what's your project structure? I don't see any layer in the configuration nor custom modules

[eduardotang]

i encountered similar problem, where the base layer locates in the same level of the project extending this layer (instead of layer folder inside the project)

so in the project package.json , does it have to include vuetify-nuxt-module as dependency (base-layer already has included)

nuxtprojects/base-layer/nuxt.config.ts

export default defineNuxtConfig({
     modules: ['vuetify-nuxt-module']
})

nuxtprojects/project/nuxt.config.ts

export default defineNuxtConfig({
     extends: ['../base-layer']
})

[ameer]

Hi everyone, I encountered this problem and found that removing the options from the resolve method resolved the issue. Everything is now working correctly.

Change this:

function resolveVuetifyBase() {
  return path.dirname(require.resolve("vuetify/package.json", { paths: [process.cwd()] }));
}

To this:

function resolveVuetifyBase() {
  return path.dirname(require.resolve("vuetify/package.json"));
}