[Bug] Can‘t config target environment over ES2020

[Cierra-Runis]

Issue

I am using Shiki now, but I can't config target environment over ES2020

Files

// contentlayer.config.ts
import rehypeShiKi from '@shikijs/rehype/core';
import { defineDocumentType, makeSource } from 'contentlayer2/source-files';
import rehypeKaTeX from 'rehype-katex';
import remarkGFM from 'remark-gfm';
import remarkMath from 'remark-math';
import { createHighlighter } from 'shiki';

export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.mdx`,
  contentType: 'mdx',
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
  },
  computedFields: {
    url: {
      type: 'string',
      resolve: (post: { _raw: { flattenedPath: string } }) =>
        `/post/${post._raw.flattenedPath}`,
    },
  },
}));

const highlighter = await createHighlighter({
  langs: ['html', 'css', 'js'],
  themes: ['github-dark', 'github-light'],
});

export default makeSource({
  contentDirPath: 'src/post',
  documentTypes: [Post],
  mdx: {
    rehypePlugins: [rehypeKaTeX, [rehypeShiKi, highlighter]],
    remarkPlugins: [remarkMath, [remarkGFM, {}]],
  },
});

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": ".",
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ],
      "@/components/*": [
        "./src/components/*"
      ],
      "contentlayer/generated": [
        "./.contentlayer/generated"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".contentlayer/generated"
  ],
  "exclude": [
    "node_modules"
  ]
}

Error

// yarn dev
UnknownEsbuildError: Error: Build failed with 1 error:
contentlayer.config.ts:25:20: ERROR: Top-level await is not available in the configured target environment ("es2020")
KnownEsbuildError: [
  {
    "id": "",
    "location": {
      "column": 20,
      "file": "contentlayer.config.ts",
      "length": 5,
      "line": 25,
      "lineText": "const highlighter = await createHighlighter({",
      "namespace": "",
      "suggestion": ""
    },
    "notes": [],
    "pluginName": "",
    "text": "Top-level await is not available in the configured target environment (\"es2020\")"
  }
]

[timlrx]

Currently, the plugin sets esbuild to target es2020:

contentlayer2/packages/@contentlayer/core/src/getConfig/index.ts

Line 74 in 395f7ce

target: 'es2020',

My guess is that if you set tsconfig to use ESNext, it uses the top level await syntax which causes compatibility issues

[Cierra-Runis]

Would you upgrade to ES2022 for supporting this feature?