Nuxt•3mo ago

Element Plus Nuxt plugin does not work in a layer

I opened an issue there (https://github.com/element-plus/element-plus-nuxt/issues/161), but I would like to ask it here too to make sure. The plugin works as expected when you use in a standalone Nuxt project, but once it is in a Nuxt layer (instead of installing/using in the root), we aren't able to overwrite the styles by using additionalData and neither use any other file there. I created a reproduction repo here: https://github.com/lkjimy/element-plus-nuxt-issue (It uses NPM workspaces. Run npm i, npm run dev in the root dir)

export default defineNuxtConfig({
  devtools: { enabled: true },

  modules: ['@element-plus/nuxt'],

  elementPlus: {
    importStyle: 'scss',
    themes: ['dark']
  },

  css: ['#layers/ui/assets/scss/main.scss'],

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler',

          // TRY ANY SCSS FILE FROM ASSETS/SCSS HERE:
          additionalData: `@use "#layers/ui/assets/scss/_element-plus.scss" as element;`,
          // ALWAYS RESULTS IN AN ERROR...
          // ERROR  Pre-transform error: [sass] Module loop: this module is already being loaded.
        }
      }
    }
  },
})

export default defineNuxtConfig({
  devtools: { enabled: true },

  modules: ['@element-plus/nuxt'],

  elementPlus: {
    importStyle: 'scss',
    themes: ['dark']
  },

  css: ['#layers/ui/assets/scss/main.scss'],

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler',

          // TRY ANY SCSS FILE FROM ASSETS/SCSS HERE:
          additionalData: `@use "#layers/ui/assets/scss/_element-plus.scss" as element;`,
          // ALWAYS RESULTS IN AN ERROR...
          // ERROR  Pre-transform error: [sass] Module loop: this module is already being loaded.
        }
      }
    }
  },
})

Any scss file added to the additionalData key will result in this error, even if it is empty

ERROR  Pre-transform error: [sass] Module loop: this module is already being loaded.

ERROR  Pre-transform error: [sass] Module loop: this module is already being loaded.

If someone from the Nuxt team could help me on this, I'd appreciate it.

GitHub

element-plus/element-plus-nuxt

Element Plus module for Nuxt. Contribute to element-plus/element-plus-nuxt development by creating an account on GitHub.

GitHub

GitHub - lkjimy/element-plus-nuxt-issue

Contribute to lkjimy/element-plus-nuxt-issue development by creating an account on GitHub.

3 Replies

kapa.ai•3mo ago

Hi @lkjimy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're encountering with using SCSS files from a Nuxt layer in the Vite additionalData option—resulting in a [sass] Module loop: this module is already being loaded. error—relates to how Nuxt resolves paths and aliases within layers, especially when using named layer aliases like #layers/ui. From the knowledge sources: - Relative Paths and Aliases in Layers: When importing using global aliases (such as ~/ and @/) in layer components and composables, these aliases resolve relative to the user's project, not the layer. For layer-specific imports in configuration (like your additionalData), you should use full resolved paths instead of aliases. This is a known caveat, and the recommended workaround is to resolve the path at runtime using Node.js utilities (see example):

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

  const currentDir = dirname(fileURLToPath(import.meta.url))

  export default defineNuxtConfig({
    vite: {
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: `@use "${join(currentDir, './assets/scss/_element-plus.scss')}" as element;`
          }
        }
      }
    }
  })

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

  const currentDir = dirname(fileURLToPath(import.meta.url))

  export default defineNuxtConfig({
    vite: {
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: `@use "${join(currentDir, './assets/scss/_element-plus.scss')}" as element;`
          }
        }
      }
    }
  })

This ensures the path is correctly resolved relative to the layer, not the root project, and avoids alias resolution issues that can cause module loops or import errors Relative Paths and Aliases. - Layer Aliases: Named layer aliases (like #layers/ui) are supported for importing code, but the documentation does not guarantee their compatibility within Vite's SCSS preprocessor options. Using them in additionalData may not work as expected and can lead to the errors you're seeing Named Layer Aliases. - CSS Order and Overrides: There have been recent fixes to ensure that child projects can override CSS from parent layers, but these do not address the path resolution or module loop issues in SCSS preprocessing Correct CSS Order for Layers. Summary:
The knowledge sources indicate that you should avoid using layer aliases (like #layers/ui) in Vite's SCSS additionalData option. Instead, resolve the absolute path to your SCSS file at runtime within your layer's nuxt.config.ts. This should prevent the module loop error and allow your styles to be included as intended. If this workaround does not resolve your issue, the knowledge sources do not provide further details on deep integration issues between Element Plus Nuxt and Nuxt layers, so you may need to follow up with the Nuxt or Element Plus teams for more targeted support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@126052960038944768> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

lkjimyOP•3mo ago

Got it, using the currentDir fixed the issue. I'll update my reproduction repo with the solution.

Gaming

Programming

Element Plus Nuxt plugin does not work in a layer

Did you find this page helpful?