js-yaml-loader

1.2.2 verified Sat Apr 25 auth: no javascript maintenance

A Webpack loader that transpiles YAML files into JavaScript objects using js-yaml. Version 1.2.2 (latest) is stable with no active development since 2019. Unlike yaml-loader which outputs JSON, this loader supports YAML types disallowed in JSON (e.g., Infinity, RegExp, Function) via js-yaml's load. Options include safe load (default true) and iterator for multi-document YAML. Compatible with Webpack 4+.

Common errors

error Module parse failed: Unexpected token (1:1) You may need an appropriate loader to handle this file type. ↓

cause Webpack cannot parse YAML files because the loader rule is missing or misconfigured.

fix

Add a rule for .yaml files using js-yaml-loader: { test: /\.yaml$/, use: 'js-yaml-loader' }

error Error: Cannot find module 'js-yaml' ↓

cause js-yaml is a peer dependency and must be installed separately.

fix

Run: npm install js-yaml

error TypeError: (0 , _jsYaml.safeLoad) is not a function ↓

cause The js-yaml package version is too old or incompatible; safeLoad was renamed in js-yaml v4.

fix

Ensure js-yaml version 3.x is installed (npm install js-yaml@3)

Warnings

gotcha safeLoad is used by default, which disables unsafe YAML types (RegExp, Function, undefined). Set safe: false to allow them. ↓

fix Add option { safe: false } to loader configuration or inline query: js-yaml-loader?safe=false

gotcha This loader outputs JavaScript objects, not JSON. If you expect a JSON string, use yaml-loader instead. ↓

fix Use yaml-loader if JSON output is needed.

gotcha The package is in maintenance mode; no updates since 2019. Consider alternatives for Webpack 5+ compatibility. ↓

fix Test with Webpack 5 or migrate to yaml-loader or custom loader.

Install

npm install js-yaml-loader

yarn add js-yaml-loader

pnpm add js-yaml-loader

Imports

default (loader)
wrong
```
require('js-yaml-loader!./file.yml')
```
correct
```
import doc from 'js-yaml-loader!./file.yml'
```
Inline loader syntax with import is the expected usage.

config rule

wrong

module.exports = { module: { loaders: [{ test: /\.yaml$/, loader: 'js-yaml-loader' }] } }

correct

module.exports = { module: { rules: [{ test: /\.yaml$/, use: 'js-yaml-loader' }] } }

Use 'use' and 'rules' in Webpack 4+. 'loaders' is deprecated.

options

wrong

module.exports = { module: { rules: [{ test: /\.yaml$/, loader: 'js-yaml-loader?safe=false' }] } }

correct

module.exports = { module: { rules: [{ test: /\.yaml$/, use: { loader: 'js-yaml-loader', options: { safe: false } } }] } }

Pass options as object in Webpack 4+; query string syntax works but is less flexible.

Quickstart

Configures Webpack to import YAML files as JavaScript objects with safe loading by default.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(yaml|yml)$/,
        use: [
          {
            loader: 'js-yaml-loader',
            options: { safe: true } // default, prevents unsafe types
          }
        ]
      }
    ]
  }
};

// In your source file:
import config from './config.yaml';
console.log(config.database.host);