`installComponents.js` tries to handle "unwanted" files. about components

[kevinmarrec]

Hello @HerrBertling , I found what cause the issue, and is is not related to @nuxt/components :)

Here's an image with a color scheme, RED, BLUE & PURPLE that will explaings things in a convenient way with my following explanations :

First (RED), it's the big hint of the issue. Indeed, you're requiring image this way :

require(`~/${variable}`)

which, according to https://webpack.js.org/guides/dependency-management/#require-with-expression, will make Webpack create a regex that match all subsequent files (^\.\/.*$) to be handled by some loader, which means all your files in your source folder which is also your root folder (as Nuxt default source folder is root one).

Furthermore (BLUE), as Webpack has no information about the extension of what you're requiring, it will likely go through the same context where it has found the require, which means a .vue file, which are theirselves handled by a combination of :

• vue-loader
• @nuxt/components custom loader, if you're using @nuxt/components
• babel-loader

Finally (PURPLE), the last output of the error is just the webpack entries, which includes installComponents when using @nuxt/component (https://github.com/nuxt/components/blob/master/src/index.ts#L120)

Ultimately, I've created a CSB to reproduce the issue when using ~/${variable}, which includes a failing and working version of require : https://codesandbox.io/s/infallible-mcnulty-uyhhw.

I invite you to look at it so you can guess what to do in your project to fix all your require statements (hint: you'll unfortunately need to change your markdown metadatas as well 😁)

Hope it helped :)

[HerrBertling]

Oh wow, thank you so much @kevinmarrec! I’ll have a look 😊👍🙏🏼

And I’m sure I can find a way to automate the markdown changes 😅

[Atinux]

@kevinmarrec if you have time to look at this it would be great ❤️

[kevinmarrec]

@HerrBertling Sorry for the delay, I've been just diving into your issue today.

If you look closely, your issues all come from .vue files which contain require('~/somePath), and with @nuxt/components it tries to requiring it at runtime but as it's runtime and not webpack build, it doesn't know how to load these files (that's why it says You may need an appropriate loader to handle this file type)

I'm not sure how to go deeper to find a fix, I think Webpack expertise from @pi0 may help

[pi0]

You can also add me to the repo to check 😊

[Atinux]

Hi @HerrBertling

Could you also show your directory structure please? (Only directories should be enough)

[HerrBertling]

Sure!

It's just™ the basic setup + a content folder since I'm using nuxt/content 😊

[HerrBertling]

@Atinux my repo is private right now but I can give you access if you want to have a look, there's no super secret stuff in there 😆

[HerrBertling]

I've been working with this for a few days and the content grew quite a bit since then. This lead to webpack basically freaking out by now because it throws so many warnings about "unknown" file formats. Any news here? :-|

Oh, and I'm on the latest nuxt version, so I've removed the package from the buildModules :)

[HerrBertling]

Any update on this? I've updated all nuxt-related packages right now and thought that maybe #70 would in some way help here, but to no avail. This is really annoying 😞

[kevinmarrec]

@HerrBertling Is there a way you can do a minimal repository reproduction (the less files there are, easier is the debug :D) ? Or give me access to your project so I can take a look :)

[HerrBertling]

@HerrBertling Is there a way you can do a minimal repository reproduction (the less files there are, easier is the debug :D) ? Or give me access to your project so I can take a look :)

Sure! Adding you :)