CODEWITHSUNDEEP
nuxt.jsnuxt-content
DevonDahon
DevonDahon

Reputation: 8350

@nuxt/content : currently no loaders are configured to process this file

I have installed @nuxt/content, but when running npm run dev I get this error message although everything works fine:

 WARN  in ./content/foo.md                                                                                                                        friendly-errors 11:36:40

Module parse failed: Assigning to rvalue (1:2)                                                                                                        friendly-errors 11:36:40
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
> ---

Did I miss something in the installation process ?

I'm using node LTS v14.16.0 and npm 6.14.11.

package.json:

{
  "name": "documentation",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "@nuxt/content": "^1.14.0",
    "@nuxtjs/axios": "^5.13.1",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.2"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.2",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/vuetify": "^1.11.3",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.21.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.7.0",
    "node-sass": "^5.0.0",
    "prettier": "^2.2.1",
    "sass-loader": "^10.1.1"
  }
}

nuxt.config.js:

export default {
  server: {
    host: process.env.HOST,
    port: process.env.PORT,
  },

  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    titleTemplate: '%s - documentation',
    title: 'My Doc',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: ['@/assets/css/main.css'],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  /*
   ** Plugins to load before mounting the App
   ** Doc: https://nuxtjs.org/guide/plugins
   */
  plugins: ['~/plugins/global.js'],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxt/content',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  content: {},

  // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {},
}

foo.md

---
title: Foo
description: Foo
---

# Hello World

Upvotes: 1

Views: 1158

Answers (1)

Barbara Percy
Barbara Percy

Reputation: 11

I had this too and, after hours of Googling, I have just found this page:

https://www.fabiofranchino.com/blog/how-to-create-a-nuxt-based-blog-markdown-driven-from-scratch/

I've installed frontmatter-markdown-loader and included the required config in nuxt.config.js - and, lo!, no more console errors!

Irritating since it seemed to be working perfectly well, despite the console errors...

Upvotes: 1

Related Questions