Next.js: A way to import YAML as a JavaScript object

[callumlocke]

Expected Behavior

It would be nice if this kind of thing was possible:

// pages/index.js
import data from `../data.yml`

export default () => (
  <div>
    {data.foo.map(item => <Thing {...item} />)}
  </div>
)

Current Behavior

It's not possible.

Context

For small–medium amounts of data or config, it's often convenient to store it in a YAML/CSON/whatever file in the repo, pull it into your code via an import, and cycle through it to render some elements. This can be a good approach for prototypes/MVPs that might later be upgraded to use a proper database (if the project takes off). Storing data as JSON or JS works OK, but it's more fiddly to manage. At my company, I often work with non-developers who need to get directly involved with the data/config in small projects, and a format like YAML is a lot more approachable for them.

Currently it seems to be impossible, or at least very difficult, to get this working with Next.js. I think supporting a format such as YAML or CSON out of the box would be a useful feature.

[adekbadek]

It's now possible with the release of version 5 because of the universal webpack config:

1. install js-yaml-loader - npm i js-yaml-loader

2. update next.config.js:

module.exports = {
  webpack: function (config) {
    config.module.rules.push(
      {
        test: /\.ya?ml$/,
        use: 'js-yaml-loader',
      },
    )
    return config
  }
}

@timneutkens I think the issue can be closed