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

HerrBertling commented 4 years ago

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 and nuxt/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:

Why is the loader trying to load files not placed in /components?
And through that question: Why is the setup trying to pipe a pdf file through webpack that sits in the static folder?
Why would the setup try to ingest the 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 a js|vue|ts file:

 WARN  in ./yarn.lock                                                        friendly-errors 13:29:59

Module parse failed: Unexpected character '#' (1:0)                          friendly-errors 13:29:59
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
| # yarn lockfile v1
|
                                                                             friendly-errors 13:29:59
 @ . sync ^\.\/.*$
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/dist/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                             friendly-errors 13:29:59

 WARN  in ./README.md                                                        friendly-errors 13:29:59

Module parse failed: Unexpected character '#' (1:0)                          friendly-errors 13:29:59
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> # project name
|
| > My ultimate Nuxt.js project
                                                                             friendly-errors 13:29:59
 @ . sync ^\.\/.*$
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/dist/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

 WARN  in ./static/filename.pdf                                     friendly-errors 13:29:59

Module parse failed: Unexpected token (1:0)                                  friendly-errors 13:29:59
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
                                                                             friendly-errors 13:29:59
 @ . sync ^\.\/.*$
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/dist/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

I didn't add any wild stuff in my nuxt.config.js:

export default {
  mode: 'universal',
  components: true,
  /*
   ** Headers of the page
   */
  head: {
    titleTemplate: '%s | THINGS,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || '',
      },
      { name: 'robots', content: 'noindex' },
    ],
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href:
          'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>☎️</text></svg>',
      },
      {
        rel: 'preconnect',
        href: 'https://fonts.gstatic.com',
        crossorigin: true,
      },
      {
        rel: 'preload',
        as: 'style',
        href:
          'https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400;700&display=swap',
      },
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400;700&display=swap',
        media: 'print',
        onload: "this.media='all'",
      },
    ],
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#fff' },
  /*
   ** Global CSS
   */
  css: ['~/assets/css/base.css'],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    // Doc: https://github.com/nuxt-community/stylelint-module
    '@nuxtjs/stylelint-module',
    // TODO: Remove when upgrading to nuxt 2.13+
    '@nuxt/components',
  ],
  /*
   ** Nuxt.js modules
   */
  modules: ['@nuxtjs/pwa', '@nuxt/content'],
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
  },
}

and the packages were updated to their latest version minutes ago which did not fix anything:

{
  "name": "project name",
  "version": "1.0.0",
  "description": "My ultimate Nuxt.js project",
  "author": "Markus Siering",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "lint-staged": {
    "*.{js,vue}": "yarn lint",
    "*.{css,vue}": "stylelint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxt/content": "^1.2.0",
    "@nuxtjs/pwa": "^3.0.0-0",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@nuxt/components": "^0.3.3",
    "@nuxtjs/eslint-config": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^7.1.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-prettier": "^3.1.2",
    "husky": "^4.0.0",
    "lint-staged": "^10.2.7",
    "prettier": "^2.0.5",
    "stylelint": "^13.5.0"
  }
}

Since this is pretty much an out of the box setup, does anyone have any idea why this is happening?

atinux commented 4 years ago

Hi @HerrBertling

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

HerrBertling commented 4 years ago

Sure!

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

HerrBertling commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 😞

atinux commented 4 years ago

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

kevinmarrec commented 4 years ago

@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 commented 4 years ago

@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 :)

kevinmarrec commented 4 years ago

@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 commented 4 years ago

You can also add me to the repo to check 😊

kevinmarrec commented 4 years ago

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 commented 4 years ago

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 😅

nuxt / components

`installComponents.js` tries to handle "unwanted" files. #37

Examples