Closed HerrBertling closed 4 years ago
Hi @HerrBertling
Could you also show your directory structure please? (Only directories should be enough)
Sure!
It's justβ’ the basic setup + a content
folder since I'm using nuxt/content
π
@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 π
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
:)
Any update on this? I've updated all nuxt
-related packages right now and thought that maybe https://github.com/nuxt/components/pull/70/ would in some way help here, but to no avail. This is really annoying π
@kevinmarrec if you have time to look at this it would be great β€οΈ
@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 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 :)
@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
You can also add me to the repo to check π
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 :)
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 π
Hi :wave:
What I'm describing here is not really a bug since things work as they shouldβ’. But still, my webpack output is a tad confusing, so I figured I'd ask if something is wrong.
I've setup a fresh NuxtJS project with
nuxt/content
andnuxt/components
which works great so far. But webpack is throwing a lot of warnings for all kinds of file types since it is apparently trying to load them but can't handle them. Apparently, these warnings originate in./node_modules/@nuxt/components/lib/installComponents.js
as you can see in the warnings down below.I get that webpack is missing these loaders, but what I do not understand:
/components
?pdf
file through webpack that sits in thestatic
folder?yarn.lock
file? πExamples
I have a lot of markdown files, so this is just an excerpt from the log. The warnings are about
*.md
,yarn.lock
,*.pdf
files, project-wide β basically anything that is not within/components
and not ajs|vue|ts
file:I didn't add any wild stuff in my
nuxt.config.js
:and the packages were updated to their latest version minutes ago which did not fix anything:
Since this is pretty much an out of the box setup, does anyone have any idea why this is happening?