Hi 👋
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?
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent