Autoimport components dir

[mihail727]

Environment

---

• Operating System: Linux
• Node Version: v17.6.0
• Nuxt Version: 3.0.0-27458584.91fd16a
• Package Manager: yarn@1.22.18
• Builder: vite
• User Config: privateRuntimeConfig, app, components, nitro, srcDir, build, buildModules, modern, tailwindcss, meta
• Runtime Modules: -
• Build Modules: @nuxtjs/tailwindcss@5.0.2

---

Reproduction

--

Describe the bug

when i trying to start my project with new version of nuxt 3 i have error:

• [Vue warn]: Failed to resolve component: NavLink If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. Invalid value used as weak map key

my nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt3';

export default defineNuxtConfig({
	privateRuntimeConfig: {
		secretJWT: process.env.SECRET_JWT,
	},
	app: {
		buildAssetsDir: 'assets/',
	},
	components: {
		global: true,
		dirs: ['~/components'],
	},
	nitro: {
		output: {
			dir: 'build',
		},
		externals: {
			inline: ['uuid'],
		},
	},
	srcDir: 'src',
	build: {
		splitChunks: {
			pages: true,
			layouts: true,
		},
	},
	buildModules: ['@nuxtjs/tailwindcss'],
	modern: true,
	tailwindcss: {
		configPath: '~~/tailwind.config.js',
		viewer: false,
	},
	meta: {
		title: 'Santrek Admin',
		link: [
			{
				rel: 'icon',
				href: '/favicon.svg',
				type: 'image/svg+xml',
			},
		],
	},
});

Additional context

Logs

-

[johannschopplich]

Same problem here. When extending another Nuxt instance (different srcDir path), none of the components can be auto imported.

Thrown error:

[Vue warn]: Failed to resolve component: PanelEnvironment
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

ERROR [worker] Invalid value used as weak map key

[little3201]

same problem on "nuxt3": "^3.0.0-27459267.f69126e",

[danielroe]

This may have been resolved by unjs/c12#8. You can pull in the fix by running npm up c12 or npx nuxi upgrade.

Let me know if it resolves it for you, or provide a reproduction. 🙏

@johannschopplich As you are extending another config, note the breaking change in https://github.com/nuxt/framework/discussions/2883.

[duckies]

I'm encountering a similar issue where component resolution is failing when using a non-default srcDir. Reproduction.

You can temporarily fix this by appending srcDir to your component directories, e.g.

export default defineNuxtConfig({
  srcDir: 'src/',
  components: ['~/src/components']
});

[Denoder]

@mihail727 do this instead for components:

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    hooks: {
        'components:dirs' (dirs) {
            dirs.push({
                path: '~/components'
            })
        }
    },
    components: {
        global: true
    },
})

---

@duckies yea I can also see this issue, in the stackblitz repo, use @/components as that one is working as ~/components isn't for the array

[rjcpereira]

Have your tried to use the dirs array of components property in nuxt config?

export default defineNuxtConfig({
    components = { 
        dirs: [ '~/src/components' ]
    }
}};

[johannschopplich]

@teranode That works in my setup. Thanks!

[mihail727]

I'm encountering a similar issue where component resolution is failing when using a non-default srcDir. Reproduction.

You can temporarily fix this by appending srcDir to your component directories, e.g.

export default defineNuxtConfig({
  srcDir: 'src/',
  components: ['~/src/components']
});

that works for me thanks

[mihail727]

@danielroe oh shit..... in another larger project, this solution did not work for Lazy(
error:

[shawn-mty]

For other people just coming here.

The directories need to be part of the component names in the template.

Eg:

<template>
  <ProfileDeleteButton/>
</template>

Would be a DeleteButton.vue file in a profile directory.

To disable this feature you can do:

export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
+     pathPrefix: false,
    },
  ],
});