search

nuxt / content

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.
https://content.nuxt.com
MIT License
3.11k stars 623 forks source link

Webpack throws a lot of warnings and I can't explain why. #73

Closed HerrBertling closed 4 years ago

HerrBertling commented 4 years ago

Hi!

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. I figured I'd post it here since my guess would be that this should at least be fixed within nuxt/content for all the .md files webpack complains about?

I get that webpack is missing these loaders, but what I do not understand:

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.

 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',
  /*
   ** 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.1",
    "@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?

HerrBertling commented 4 years ago

Sometimes it takes a whole day of not looking at the output and then seeing that the webpack calls originate in nuxt/components 🙈 I’ll close here and re-open there. Good night 💤

igorapostolov commented 2 years ago

@HerrBertling Did you solve this by now ? :o

HerrBertling commented 2 years ago

@igorapostolov yes, that was resolved here: https://github.com/nuxt/components/issues/37