Since updating from Nuxt 2.15.4 to 2.15.8, auto import components no longer work

[toddpadwick]

Nuxt version 2.15.8

Describe the bug

All my components are saved to the root of the components directory - so no potential issue with missing prefixes there. When I try and add a component into my pages, for example...

/components/CookieConsent.vue

/layouts/defaut.vue:
<template>
  <div class="app">
    <main class="main">
            <Nuxt />
        </main>
    <cookie-consent :decline-allowed="false" position="bottom-left"/>
  </div>
</template>

...i get the following error:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[pi0]

Hi @toddpadwick. I tried to reproduct issue based on details but seems working! Would you please try forking this sandbox to see if somehow can reproduce issue?

Otherwise, it is probably a dependency issue, you might want to recreate package-lock.json or yarn.lock

[alhirzel]

I'm seeing the same thing with a fresh install and fresh yarn.lock. Any thoughts? It installs @nuxt/component version 2.1.8.

Excerpt from `package.json':

  "dependencies": {
    "bootstrap-vue": "^2.21.2",
    "nuxt": "^2.15.8"
  }

yarn install v1.22.11
info No lockfile found.
[1/4] Resolving packages...
warning bootstrap-vue > popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
warning nuxt > @nuxt/babel-preset-app > core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
warning nuxt > @nuxt/webpack > webpack-hot-middleware > querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning nuxt > @nuxt/webpack > webpack > node-libs-browser > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning nuxt > @nuxt/webpack > postcss-preset-env > postcss-color-gray > postcss-values-parser > flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "bootstrap-vue > bootstrap@4.6.0" has unmet peer dependency "jquery@1.9.1 - 3".
warning "bootstrap-vue > portal-vue@2.1.7" has unmet peer dependency "vue@^2.5.18".
warning "nuxt > @nuxt/components@2.2.1" has unmet peer dependency "consola@*".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 15.97s.

[vacijj]

I've the same issue as described in the bug description with:

nuxt: v2.15.8 nuxt/components: v2.2.1

[licarys]

I have the same issue: nuxt: 2.15.8 nuxt/component: 2.1.8

[oussj]

same issue nuxt: 2.15.8 nuxt/component: 2.1.8

[toddpadwick]

Hi @pi0 I have uploaded my boilerplate project to a sandbox. I couldn't re-create the issue with your sandbox so I just uploaded my own. As you say, could be a conflict with another module that's not on yours. if you check the console, you can see the unknown custom element errors https://codesandbox.io/s/charming-mahavira-25thq?file=/pages/index.vue Hope that helps.

[danielroe]

@toddpadwick In your nuxt.config you've specifically added a prefix:

  components: [
    {
      path: '~/components',
      extensions: ['vue'],
      prefix: 'app',
      pathPrefix: false,
      ignore: ['~components/pages', '**/_**']
    }
  ],

So instead of accessing <v-button>, for example, you should access <app-v-button>. Working codesandbox.

[toddpadwick]

Hi @danielroe you are right, sorry thats a mistake but not actually one that I have locally. I just tried that in the sandbox as someone suggested I do so in this thread. Locally, I have components:true. The odd thing is in the sandbox, it works as you have linked. However, for me locally, I just can't replicate it: It just doesn't load the components – I don't understand. Could therefore, it be an environment issue? I am going to ask another dev to pull down my codebase and try on their machine to try.

[danielroe]

@toddpadwick Check your components.md file in .nuxt to see how Nuxt is resolving the names. (The full path should be printed out when you start Nuxt.)

And check npm why @nuxt/components. You could also try explicitly upgrading it or adding it to your package dependencies.

[toddpadwick]

Hi @danielroe There is no components.md file in .nuxt - see screenshot:

And when I try running npm why @nuxt/components I get the unknown command notice:

Todds-MacBook-Pro:usrem toddpadwick$ npm why @nuxt/components

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    /Users/toddpadwick/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@6.14.8 /Users/toddpadwick/.nvm/versions/node/v13.11.0/lib/node_modules/npm

[danielroe]

It is the readme.md file I'm referring to.

[toddpadwick]

I've got it working 🎉. .

1. I removed node and NPM
2. Re-installed latest stable release (was on v13, now on v16)
3. deleted the entire repo
4. Re-installed packages

5. Ran npm audit fix

   and now it works. No idea why

   Thanks for your help. Shame I can't help anyone else figure it out any more specifically though, as it seems like whatever it is, is happening to lots of people.

[danielroe]

Glad to hear it!

[devalexdom]

@toddpadwick @danielroe The problem is that is taking the subfolder as a prefix... Any idea how to fix it? I have now this issue with Nuxt 2.15.8

Thank you

[toddpadwick]

I think that's the default behaviour with components:true – for me that is my preference. I'm not sure how to turn it off though.