No auto import of components after 'nuxt generate'

[m7rlin]

``Describe the bug When use 'components: true' and then import a component on my page it is working just fine on 'dev' but after running 'generate' command and starting 'start' the web server I don't see any of my components that should be auto imported.

To Reproduce Steps to reproduce the behavior:

1. Clone repository 'https://github.com/m7rlin/nuxt-auto-import-components'
2. Run 'npm run generate'
3. Then run 'npm run start'
4. Open the server on 'http://localhost:3000' and see that the '@/components/webblocks/Cards.vue' component is not there

Expected behavior Auto imported components should be visible on production.

Screenshots On production now:

How it should look like:

Additional context When I import the components the normal way, they are visible on production.

EDIT: If I do this on package.json (npm)

...
"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js",
    "preinstall": "npx npm-force-resolutions"
  },
...
},
  "resolutions": {
    "@nuxt/components": "2.1.8"
  }
...

It seems working just fine. EDIT: I found that downgrading "nuxt components" to v2.1.8 fix the problem.

"@nuxt/components": "2.1.8"

[kurashina-design]

SSR mode, that is, yarn build & yarn start, also leads to no auto import. I tried to npx create-nuxt-app today.

Manual import worked.

[richardeschloss]

I have the same issue with nuxt build. No auto-import of components. For me, my workaround was to revert to v2.1.8 as a previous user mentionned (or, equivalently, to nuxt 2.15.6)

[pi0]

The regression is fixed in components@2.2.1. Just remove yarn.lock/package.lock.json and reinstall dependencies.

[command-tab]

@pi0 Perhaps related to https://github.com/nuxt/components/issues/204, I'm still encountering this issue with nuxt 2.15.8 and nuxt/components 2.2.1 installed (verified in both my yarn.lock file and on disk in node_modules/@nuxt/components/package.json).

However, there's a twist: If I list several scoped components in my nuxt.config.js file and instantiate them side-by-side in a .vue file, all of them appear when running nuxt in development, but only some of them appear when doing nuxt build and nuxt start. When I inspect those that don't appear with the Chrome devtools, I see their component names, not the HTML elements they're supposed to render. Is there some critical detail or package.json field that needs to be in place for scoped components to load when doing a nuxt build? They're all pretty simple CommonJS modules with component names 🤔

[pi0]

Hi @command-tab. Can you probably check .nuxt/components/index.js after nuxt build command? There should be expected exports as loader fallback. Also if you can make a reproduction that is similar to you setup I could check it out :)

[command-tab]

When I look in .nuxt/components/index.js (for a nuxt build), I do see the expected exports, but only some of those listed actual render (no errors when they don't — they just leave their custom HTML tags in place). Weird! I'll see if I can put together a minimal, clone-able repro repo.

[command-tab]

@pi0 I've put together a super minimal reproduction app here: https://github.com/command-tab/nuxt-components-bug

The simple index page uses @nuxt/components to load two scoped components (see references in nuxt.config.js). Both components render in dev, but when you do a production build and start, only the first one renders. I've spent a good deal of time digging into this and can't figure out why the second component (@command-tab/place-kitten) doesn't render in production.

The repo is named nuxt-components-bug, but it's likely a component level configuration issue on my end. But I'm not sure what I'm doing wrong. Thank you so much for taking a look ❤️

[richardeschloss]

If I understand correctly, it sounds like the more general issue is including components that are in node_modules and not in the normal project workspace? (Is it possible the components library needs the prefix "node_modules" since it's using globby to build it's directory list?)

I.e.,

{ path: '~/node_modules/command-tab/place-kitten', pathPrefix: false } // How far does this change get you?

[command-tab]

Loading components from node_modules does work for some components (cf. my demo app), but not others.

Wondering if this was an issue with components packaged by webpack, I followed this guide (minus the TypeScript options) to create a simple component packaged with Rollup instead and published it as a scoped module. When installed and configured in nuxt.config.js, it too loads in dev, but not in a production build. However, as mentioned above, I can find some scoped modules that do render in both targets, though. I've yet figure out why some do and some don't.

[richardeschloss]

Hmm, would it work in both targets if you specified that module's src/components directory? (since that contains the ESM .vue component)

{ path: '~/node_modules/command-tab/place-kitten/src/components', pathPrefix: false } // How far does this change get you? 

Alternatively, have you considered listening for the components:dirs hook in that module and registering the components in that? (if the module's code is in your control).

Can you please provide an example repo / module that successfully renders in both targets?

[command-tab]

Mentioning node_modules does seem to work.

Here's a breakdown of the permutations I've tested in nuxt.config.js (as you'd expect, this is with the component not being imported in the consuming page nor mentioned in the components: {} section, so as to deliberately rely on nuxt/components):

// 1. using the dist version without pathPrefix
// ✅ dev; ❌ prod
{ path: '@command-tab/place-kitten', pathPrefix: false }

// 2. using the dist version
// ✅ dev; ❌ prod
{ path: '@command-tab/place-kitten' }

// 3. using the dist version with node_modules in the path
// ✅ dev; ✅ prod
{ path: '~/node_modules/@command-tab/place-kitten', pathPrefix: false }

// 4. using the src version with node_modules in the path
// ✅ dev; ✅ prod
{ path: '~/node_modules/@command-tab/place-kitten/src/components', pathPrefix: false }

I was expecting number 1 to render, though, since it works for other @scoped components. For example, those first two methods render in prod just fine for a different component like @hzzt/v-lazy-image:

// 1. using the dist version without pathPrefix
// ✅ dev; ✅ prod
{ path: '@hzzt/v-lazy-image', pathPrefix: false }

// 2. using the dist version
// ✅ dev; ✅ prod
{ path: '@hzzt/v-lazy-image' }

@hzzt/v-lazy-image is already in my demo app and renders in both targets without needing to include node_modules in the path. Right beside that, the demo app also includes my silly @command-tab/place-kitten example component that only renders in dev (unless I mention node_modules as described in the code block above). If you run the demo app in dev, both render, but if you run it in prod, only v-lazy-image renders.

Thank you all for taking a look 🙏🏻

[richardeschloss]

This is just a guess, but it seems like the v-lazy-image takes advantage of npm (or pnpm?) workspaces, so that importing from '@hzzt/v-lazy-image' would resolve to the ESM vue component index.js instead of a commonjs file.