Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nuxt 3.12.2 ignores vuestic.config.ts #4403

Open
m0ksem opened this issue Oct 18, 2024 · 1 comment
Open

Nuxt 3.12.2 ignores vuestic.config.ts #4403

m0ksem opened this issue Oct 18, 2024 · 1 comment
Labels
BUG Something isn't working nuxt packages/nuxt

Comments

@m0ksem
Copy link
Collaborator

m0ksem commented Oct 18, 2024

v3.12.1 works fine

Repro: https://stackblitz.com/edit/github-poqjmh?file=package.json,nuxt.config.ts,app.vue

when component used via auto-import it ignores vuestic.config.ts

Although, if component is imported from 'vuestic-ui' via import config is applied correctly.

Looks like nuxt imports from esm-node build when registering global components, instead of es since 3.13.2

may be related to:
https://github.com/nuxt/nuxt/pull/28843/files#diff-06cc43bd13b65d1b07374d99f41947196c616c32398339ed40d0a3faa678ad2dR174

Now when nuxt ensures filePath, resolvePath from mlly uses node condition with higher priority.

We could replace component registration with absolute path manually.

  import { resolveSync } from 'mlly'

  const vuesticModulePath = resolveSync('vuestic-ui', {
    conditions: ['import'],
    url: import.meta.url
  })

  importNames.forEach((name) => {
    /**
     * Add component from vuestic-ui package.
     * Nuxt will tree-shake components that not included in options.
     * Nuxt also will add component to auto-import.
     */
    addComponent({
      name,
      export: name,
      filePath: vuesticModulePath
    })
  })
@m0ksem m0ksem added BUG Something isn't working nuxt packages/nuxt labels Oct 18, 2024
@m0ksem
Copy link
Collaborator Author

m0ksem commented Oct 18, 2024

After resolvePath force added, nuxt loads components from different places:

  • When component is global, because path was resolved with mlly, it is path to node_modules:
import {VaButton as __nuxt_component_0} from "/_nuxt/node_modules/.pnpm/[email protected][email protected]/node_modules/vuestic-ui/dist/es/main.js?v=0e702035";
  • When loaded via import, path is set to vite cache.
import {VaButton as ImportedButton, useGlobalConfig as useImportedGlobalConfig, } from "/_nuxt/node_modules/.cache/vite/client/deps/vuestic-ui.js?v=6d032d21";

Initially, I though problem in incorrect condition exports in vuestic package.json (fixed in #4404), but eventually I noticed that import * from 'vuestic-ui' resolves import from vite cache.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
BUG Something isn't working nuxt packages/nuxt
Projects
Status: Backlog
Development

No branches or pull requests

1 participant