ContentLayer does not follow the path aliases defined in tsconfig.json

[zhutmost]

Thanks for the developers' great work.

ContentLayer does NOT follow the path aliases defined in tsconfig.json. So I met such an error:

ConfigReadError ([repo_path]/contentlayer.config.ts): Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@/util' imported from [repo_path]/.contentlayer/.cache/v0.5.0/compiled-contentlayer-config-J3VF3BP3.mjs

when I am trying to import some packages in contentlayer.config.ts, like this:

import { createTagCount, createSearchIndex } from '@/util/PostContentLayer'

My path aliases are defined in tsconfig.json:

    ...
    "paths": {
      "@/*": ["./src/*"],
      ...
    },

Here are some related issues:

• tsconfig paths are not transformed if not bundling evanw/esbuild#394
• contentlayer.config.ts should handle tsconfig paths contentlayerdev/contentlayer#238

[zhutmost]

The workaround is to use the original package path instead of the corresponding alias. like this:

import { createTagCount, createSearchIndex } from './src/util/PostContentLayer'
                                                   ^^^^^

But this will make a warning in WebStorm.

[DopamineDriven]

It works perfectly fine in vscode 🤔

here's my tsconfig

{
  "extends": "@takeda-digital/tsconfig/next.json",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./*"],
      "~/*": ["./.contentlayer/*"]
    },
    "plugins": [
      {
        "name": "next"
      }
    ],
    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
  },
  "include": [
    ".",
    "types/index.d.ts",
    "index.d.ts",
    "next-env.d.ts",
    "eslint.config.mjs",
    "global.d.ts",
    "next.config.mjs",
    "postcss.config.cjs",
    "tailwind.config.ts",
    "contentlayer.config.ts",
    "**/*.tsx",
    ".contentlayer/generated",
    "**/*.ts",
    ".next/types/**/*.ts",
    "../../reset.d.ts"
  ],
  "exclude": ["node_modules", "public/**/*.js"]
}

The next.json file that the tsconfig of the app using contentlayer is extending:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "./base.json",
  "compilerOptions": {
    "lib": ["ESNext", "DOM", "DOM.Iterable", "ScriptHost"],
    "jsx": "preserve",
    "module": "ESNext",
    "isolatedModules": true,
    "alwaysStrict": true
  }
}

and the base.json file that the next.json tsconfig is extending

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "ES2022",
    "lib": ["ES2022", "ScriptHost"],
    "allowJs": true,
    "declaration": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "incremental": true,
    "disableSourceOfProjectReferenceRedirect": true,
    "strict": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true,
    "checkJs": true,
    "module": "Preserve",
    "moduleResolution": "Bundler",
    "noEmit": true
  },
  "exclude": ["node_modules", "build", "dist", ".next/cache"]
}

assigning the .contentlayer dir its own path alias might resolve it

{
  "paths": {
    "@/*": ["./*"],
    "~/*": ["./.contentlayer/*"]
   }
}

also ensure that the contentlayer.config.ts file is being explicitly whitelisted in the include array of your tsconfig

[timlrx]

@zhutmost yes, this issues still occurs as indicated by your example. Since contentlayer manages the build step with its own plugin now, it should be a bug that path alias are not treated as external. Instead they should be added to the filter like local files, treated as external and bundled. Let me test if that fixes the issue.

[timlrx]

@zhutmost released as v0.5.1, your example should work now.