Fields of type 'list' break everything but 'json' and 'string' work

[sipho-w-mokoena]

I'm busy trying to implement Contentlayers on a site with a lot of mdx files as the content for a blog. When I use the type: 'list' property in a field everything breaks.

`This error shouldn't have happened. Please consider opening a GitHub issue with the stack trace below here:
https://github.com/contentlayerdev/contentlayer/issues

╥
╠══╦══╗
║ ║ ║
║ ║ ╠─An interrupt was produced by #16.
║ ║ ║
║ ║ ▼
║ ║
║ ╠─An unchecked error was produced.
║ ║
║ ║ TypeError: Cannot read properties of undefined (reading 'type')
║ ║ at fieldListItemsToCoreFieldListDefItems (file:///workspace/avif.io/node_modules/@contentlayer/source-files/src/schema/provideSchema.ts:251:28)
║ ║ at fieldDefEntryToCoreFieldDef (file:///workspace/avif.io/node_modules/@contentlayer/source-files/src/schema/provideSchema.ts:159:13)
║ ║ at file:///workspace/avif.io/node_modules/@contentlayer/source-files/src/schema/provideSchema.ts:26:9
║ ║ at Array.map ()
║ ║ at next (file:///workspace/avif.io/node_modules/@contentlayer/source-files/src/schema/provideSchema.ts:25:64)
║ ║ at Generator.next ()
║ ║ at ISuspend.factory (file:///workspace/avif.io/node_modules/@effect-ts/system/_src/Effect/gen.ts:135:28)
║ ║ at FiberContext.evaluateNow (file:///workspace/avif.io/node_modules/@effect-ts/system/_src/Fiber/context.ts:1173:51)
║ ║ at file:///workspace/avif.io/node_modules/@effect-ts/system/_src/Fiber/context.ts:576:33
║ ║ at file:///workspace/avif.io/node_modules/@effect-ts/system/_src/Support/Scheduler/index.ts:15:9
║ ║
║ ║ Fiber: #18 (started at: 2022-04-24T14:08:00.132Z) was supposed to continue to:
║ ║
║ ║ a future continuation at packages/@contentlayer/source-files/src/index.ts:104:19
║ ║
║ ║ Fiber: #18 (started at: 2022-04-24T14:08:00.132Z) Execution trace:
║ ║
║ ║ packages/@contentlayer/source-files/src/schema/provideSchema.ts:18:8
║ ║
║ ║ Fiber: #18 (started at: 2022-04-24T14:08:00.132Z) was spawned by:
║ ║
║ ║ Fiber: #16 (started at: 2022-04-24T14:08:00.132Z) was supposed to continue to:
║ ║
║ ║ a future continuation at packages/@contentlayer/core/src/generation/generate-dotpkg.ts:82:13
║ ║
║ ║ Fiber: #16 (started at: 2022-04-24T14:08:00.132Z) Execution trace:
║ ║
║ ║ packages/@contentlayer/core/src/generation/generate-dotpkg.ts:78:16
║ ║
║ ║ Fiber: #16 (started at: 2022-04-24T14:08:00.132Z) was spawned by:
║ ║
║ ║ Fiber: #14 (started at: 2022-04-24T14:08:00.129Z) was supposed to continue to:
║ ║
║ ║ Fiber: #14 (started at: 2022-04-24T14:08:00.129Z) Execution trace:
║ ║
║ ║ Fiber: #14 (started at: 2022-04-24T14:08:00.129Z) was spawned by:
║ ║
║ ║ Fiber: #10 (started at: 2022-04-24T14:08:00.128Z) was supposed to continue to:
║ ║
║ ║ Fiber: #10 (started at: 2022-04-24T14:08:00.128Z) Execution trace:
║ ║
║ ║ Fiber: #10 (started at: 2022-04-24T14:08:00.128Z) was spawned by:
║ ║
║ ║ Fiber: #3 (started at: 2022-04-24T14:07:59.958Z) was supposed to continue to:
║ ║
║ ║ Fiber: #3 (started at: 2022-04-24T14:07:59.958Z) Execution trace:
║ ║
║ ║ packages/next-contentlayer/src/plugin.ts:17:94
║ ║ packages/@contentlayer/utils/src/effect/Stream.ts:32:83
║ ║ packages/@contentlayer/core/src/getConfig/index.ts:192:13
║ ║ packages/@contentlayer/core/src/getConfig/index.ts:181:28
║ ║ packages/@contentlayer/core/src/getConfig/index.ts:179:44
║ ║ packages/@contentlayer/core/src/getConfig/index.ts:166:28
║ ║ packages/@contentlayer/core/src/getConfig/index.ts:164:31
║ ║ packages/@contentlayer/core/src/getConfig/index.ts:151:28
║ ║ packages/@contentlayer/core/src/getConfig/index.ts:149:15
║ ║ packages/@contentlayer/core/src/getConfig/index.ts:146:15
║ ║ packages/@contentlayer/core/src/getConfig/index.ts:145:15
║ ║ packages/@contentlayer/core/src/cwd.ts:24:43
║ ║ packages/@contentlayer/core/src/getConfig/index.ts:134:27
║ ║ packages/@contentlayer/core/src/getConfig/index.ts:121:10
║ ║ packages/@contentlayer/core/src/getConfig/esbuild.ts:118:12
║ ║ packages/@contentlayer/core/src/getConfig/esbuild.ts:121:14
║ ║ packages/@contentlayer/core/src/getConfig/esbuild.ts:70:15
║ ║ packages/@contentlayer/core/src/getConfig/esbuild.ts:69:10
║ ║ packages/@contentlayer/core/src/getConfig/esbuild.ts:68:10
║ ║ packages/@contentlayer/core/src/getConfig/esbuild.ts:51:22
║ ║ packages/@contentlayer/core/src/getConfig/esbuild.ts:76:10
║ ║ packages/@contentlayer/core/src/getConfig/esbuild.ts:75:12
║ ║ packages/@contentlayer/core/src/getConfig/esbuild.ts:75:46
║ ║ packages/@contentlayer/core/src/getConfig/esbuild.ts:89:20
║ ║ packages/@contentlayer/core/src/getConfig/esbuild.ts:88:12
║ ║
║ ║ Fiber: #3 (started at: 2022-04-24T14:07:59.958Z) was spawned by:
║ ║
║ ║ Fiber: #0 (started at: 2022-04-24T14:07:59.943Z) was supposed to continue to:
║ ║
║ ║ Fiber: #0 (started at: 2022-04-24T14:07:59.943Z) Execution trace:
║ ║
║ ║ packages/@contentlayer/utils/src/tracing-effect/index.ts:45:45
║ ║ packages/@contentlayer/core/src/cwd.ts:22:49
║ ║ packages/@contentlayer/core/src/cwd.ts:9:18
║ ║ packages/@contentlayer/core/src/cwd.ts:8:23
║ ║ packages/@contentlayer/core/src/cwd.ts:7:29
║ ║ packages/@contentlayer/core/src/runMain.ts:23:32
║ ║ packages/@contentlayer/core/src/runMain.ts:14:12
║ ║
║ ║ Fiber: #0 (started at: 2022-04-24T14:07:59.943Z) was spawned by:
║ ▼
▼

OS: linux 5.16.20-051620-generic (arch: x64)
Process: /home/gitpod/.nvm/versions/node/v16.14.2/bin/node /workspace/avif.io/node_modules/.bin/next dev
Node version: v16.14.2
Contentlayer version: 0.2.4`

[sipho-w-mokoena]

Here's the code

import { defineDocumentType, makeSource } from 'contentlayer/source-files'

export const Article = defineDocumentType(() => ({
    name: 'Article',
    filePathPattern: 'articles/*.mdx',
    contentType: 'mdx',
    fields: {
        title: {
            type: 'string',
            description: 'The title of the article',
            required: true
        },
        description: {
            type: 'string',
            description: 'Description of the article',
            required: true
        },
        keyword: {
            type: 'string',
            description: 'The document keyword',
            required: true
        },
        category: {
            type: 'string',
            description: 'The blog category of the document',
            required: true
        }, 
        url: {
            type: 'string',
            description: 'URL to the article',
            required: true
        },
        datePublished: {
            type: 'string',
            description: 'The date the document was published',
            required: true
        },
        dateModified: {
            type: 'string',
            description: 'The date the document was modified',
            required: true
        },
        sources: {
            type: 'list',
            description: 'URL to the article',
            required: true
        },
        tags: {
            type: 'list',
            description: 'Word(s) or phrase(s) that describe article',
            required: true
        },
        questions: {
            type: 'list',
            description: 'Common question(s) that could be asked',
            required: true
        },
        relatedPosts: {
            type: 'list',
            description: 'Other blog posts that are similar this the article',
            required: true
        }
    },computedFields: {
    url: {
      type: 'string',
      resolve: (article) => `/articles/${article._raw.flattenedPath}`,
    },
  },
}))

export default makeSource({
    contentDirPath: 'data/blog',
    documentTypes: [Article],
})

[sipho-w-mokoena]

And the MDX file content

---

title: Convert to AVIF - A list of all software
description: An overview of all online and offline converters, including libraries and modules.
keyword: AVIF Converters
category: articles
url: blog/articles/avif-converters/
datePublished: "2021-10-30"
dateModified: "2020-10-30"
sources:

• aomedia.org/av1/specification/
• avif.io/
• github.com/lovell/avif-cli
• imagemagick.org/index.php
• github.com/GoogleChromeLabs/squoosh/tree/dev/cli
• www.npmjs.com/package/@squoosh/cli
• filestar.com/
• sharp.pixelplumbing.com/
• www.npmjs.com/package/imagemin
• web.dev/use-imagemin-to-compress-images/
• github.com/imgproxy/imgproxy
• imgproxy.net/
• github.com/strukturag/libheif
• github.com/link-u/cavif
• github.com/AOMediaCodec/libavif
• github.com/xiph/rav1e
• squoosh.app
• convertio.co
• aconvert.com
• ezgif.com
• cloudconvert.com
• online-convert.com
  tags:
• av1 codec
• av1 image format
• avif encoding
• avif file
• avif format
• avif image
• avif image format
• avif converter
• convert to avif
  questions:
• How do I convert to AVIF?
• how do I convert AVIF files
• How do I convert AVIF to JPG?
• How do I convert AVIF to PNG?
• How do I convert AVIF to WebP?
• How do I make an AVIF file?
• How do I convert JPG to AVIF?
• How do I convert WebP to AVIF?
• How do I convert PNG to AVIF?
• How do I convert bmp to AVIF?
  relatedPosts:
• optimize-images-for-web-performance
• avif-faq
• wordpress

---

A complete list of all AVIF converters

This list gives you a comprehensive overview of all services and tools available for converting images to AVIF.

Online converters

avif.io

We released avif.io in 2020 as a free, open-source platform focusing on the image format AVIF. In addition to its library of 150+ tutorials also offers a converter allowing unlimited files to be uploaded and converted to AVIF.

Image formats to be converted include png, jpg, jpeg, webp, gif, BMP, dib, ico, tiff, tif, pbm, pgm, ppm, pnm, dds, tga, icb, vda, vst, and ff. It works client-side, meaning no images are ever uploaded to the server thanks to Web workers and WASM utilizing Rav1e's decoding library.

Because it focuses on User Experience and a modern user interface, you can quickly learn the process and adjust settings such as quality and effort to meet your needs. The converter is provided free of charge and has a Github repository.

squoosh.app

Squoosh is a web app for image compression, allowing you to explore various image compressors' advanced features. Google actively develops it based on libaom and provides an open-source repository on Github. As with avif.io, it works entirely client-side.

The interface is based on a comparison slider, so you can immediately see the results and the differences between the original and the altered image. You can upload one image at a time. Furthermore, Squoosh offers many settings you can use to control the conversion process.

Cloud converters

convertio.co

Softo Ltd.'s Convertio software allows you to convert any image format to AVIF. Files are uploaded and stored for 24 hours on the company's servers. Convertio does not read, examine, or copy any files according to their Privacy Policy.

You can delete any files you upload at any time. In the absence of a premium account, two concurrent conversions are permitted. You must continue the conversion manually by clicking a button. Monthly plans start at 9.99$.

aconvert.com

You can convert PNG, JPG, SVG, and WebP files to AVIF using Aconvert.com. According to the Privacy Policy, images are uploaded to a server and not looked at or mined for data.

It is also possible to change the image quality and the image dimensions. There is no charge for the converter, and there is a potential downside as it allows for one conversion at a time.

ezgif.com

You can convert images from and to AVIF using ezgif.com. The image can be selected from your computer or pasted from the internet. However, one conversion is possible at a time.

Furthermore, you cannot modify the conversion process. EZGIF.com has the advantage of converting GIF to animated AVIF(S) sequence files, which is a unique feature.

cloudconvert.com

Cloudconvert, despite being prominent in search results, does not allow you to convert images to AVIF. It will enable converting AVIF images to another image codec, such as PNG, JPG, and WebP.

online-convert.com

This service does not convert images to AVIF, but it allows you to convert AVIF to BMP, PNG, and JPG.

Offline converters

avif-cli

Lovell Fuller wrote avif-cli as a NodeJS-based command-line utility to convert images to AVIF.

Imagemagick

ImageMagick is one of the most commonly used tools for creating, editing, composing, or converting digital images. It supports both reading and writing AVIF files.

Squoosh CLI

With Squoosh CLI, you can run all the codecs you know from the Squoosh web app on your command line using WebAssembly. Squoosh CLI parallelizes image processing using a worker pool. You can then apply the same codec to multiple images simultaneously.

FileStar

AVIF can be transformed, applied filters, removed metadata, and converted to other formats using FileStar software. You're limited to 10 conversions per month with the free plan, while the paid plan offers unlimited conversions for $9 / month.

Libraries and Modules

sharp

This Node.js module's typical use case is converting large images from standard formats into smaller, web-friendly JPEG, PNG, AVIF, and WebP images of various sizes.

Thanks to the use of libvips, resizing an image is typically 4x-5x faster than using the fastest ImageMagick and GraphicsMagick settings. Sharp supports conversions, transformations, and manipulations of image files, including AVIF.

Imaginemin

Imagemin is an excellent option for image compression because it supports various image formats and is easy to integrate into build scripts and tools. Imagemin is available as both a CLI and an npm module. You generally recommend using the npm module because it offers more configuration options.

Still, the CLI can also be a good choice if you want to try Imagemin without touching any code. There are many plugins in Imagemin. Plugins are npm packages compressing a particular image format. It is possible to convert and manipulate AVIF files with a plugin.

imgproxy

The imgproxy server resizes and converts remote images quickly and securely. Simplicity, speed, and security are the main principles of imgproxy. Also, imgproxy comes in handy when dealing with many image resizing, especially when images are coming from a remote source. Since January 2021, imgproxy supports AVIF.

Decoder and Encoder

libheif

The libheif program decodes and encodes the HEIF and AVIF (AV1 Image File Format) file formats according to ISO/IEC 23008-12:2017. It uses libde265 to decode HEIF images and x265 to encode them as codecs for AVIF, libaom, dav1d, or rav1e. Libheif can transform pictures, read and save image metadata, and perform conversions. In addition, the library provides an easy-to-integrate C API and broad language support.

cavif

Cavif uses libaom directly to encode AVIF files. According to its readme, its primary purpose is to make sure it's possible to tune libaom's encoding options to optimize quality/size concerning human perception.

libavif

libavif encodes and decodes .avif files. The AV1 Image File Format is implemented as a friendly, portable C implementation. Although it is a work-in-progress, it can decode and encode all YUV formats (with alpha) already supported by AOM. CMake is needed to build libavif.

rav1e (av1)

Rav1e is an AV1 video encoder. According to Rav1e, it is the fastest and safest AV1 encoder in the world. Though it is designed to cover all use cases, in its current form eventually, it is best suited to cases when the reference encoder (libaom) is too slow. The program focuses on AV1, but it still has a picture mode to write AVIF files.

[sipho-w-mokoena]

WARNING THIS IS VERY HACKY
Don't use the MD list syntax

- Bob
- Else

Use normal JS arrays
["Bob", "Else"]

Or just use type: json if JS in MD is disgusting for you

[agcty]

Having the same issue

[sidwebworks]

I talked about this issue in the Discord server here, https://discord.com/channels/872106850928164874/872106850928164878/970309653076541480

[sidwebworks]

You need to add the of property in the field

of: {
  type: 'string',
},

[schickling]

Sorry about the confusion in case you ran into a problem like described above. This isn't technically a problem with Contentlayer itself but rather occurs when "wrongly using it". (Thanks @sidwebworks for pointing out the solution to the described problem.)

In order to improve the DX for future users running into a similar situation, I'm planning to implement Runtime config / schema validation functionality (see #214).