To see this working, head to your live site.

Exclude files form webpack in nuxt

I've added some file to my nuxt project. The files are stored in the ./content directory. Now we got some warnings like the following one:

WARN  in ./content/config.yml

Module parse failed: Unexpected token (9:9)
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

To prevent the error I've tries to exclude the file in the nuxt.config.js. I've added the following lines but the warning aren't gone.

build: {
  /*
  ** You can extend webpack config here
  */
  extend (config, ctx) {
    config.module.rules.push({
      test: /\.yml$/,
      exclude: [
        path.resolve(__dirname, '/content/config.yml')
      ]
    }
  )
  }
}

Are there other options to prevent the warnings?

1 comment

Answers (1)

AnswerDeveloper

Dec 26, 2022

To prevent the warning messages, you can try adding a loader to the module.rules configuration in your nuxt.config.js file. The loader specifies the JavaScript module that will be used to transform the .yml file into a JavaScript module that can be used by your application.

For example, you can use the yaml-loader to load and parse .yml files:


build: {
  extend (config, ctx) {
    config.module.rules.push({
      test: /\.yml$/,
      exclude: [
        path.resolve(__dirname, '/content/config.yml')
      ],
      use: [
        {
          loader: 'yaml-loader'
        }
      ]
    }
  )
  }
}

You will also need to make sure that the yaml-loader is installed in your project:


npm install --save-dev yaml-loader

Then, you can import the .yml file in your code and use it like any other JavaScript module:


import config from './content/config.yml'console.log(config)

Note that you will need to configure the yaml-loader to handle any other file types that you want to load in your Nuxt.js application, such as .yaml files. You can do this by adding additional rules to the module.rules configuration in your nuxt.config.js file.