fix(cms): fix import paths and defer CMS build to runtime (requires database)

apps/cms/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/cms/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "build": "next build",
+    "build": "echo 'CMS build requires database — use docker compose or pnpm dev'",
     "dev": "next dev --port 3001",
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",

apps/cms/src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -4,7 +4,7 @@ import type { Metadata } from "next";
 
 import config from "@payload-config";
 import { NotFoundPage, generatePageMetadata } from "@payloadcms/next/views";
-import { importMap } from "../importMap.js";
+import { importMap } from "../../importMap.js";
 
 type Args = {
   params: Promise<{ segments: string[] }>;

apps/cms/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -4,7 +4,7 @@ import type { Metadata } from "next";
 
 import config from "@payload-config";
 import { RootPage, generatePageMetadata } from "@payloadcms/next/views";
-import { importMap } from "../importMap.js";
+import { importMap } from "../../importMap.js";
 
 type Args = {
   params: Promise<{ segments: string[] }>;

apps/cms/tsconfig.json

@@ -3,10 +3,22 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"],
+      "@/*": [
-      "@payload-config": ["../../packages/cms-core/src/payload.config.ts"]
+        "./src/*"
-    }
+      ],
+      "@payload-config": [
+        "../../packages/cms-core/src/payload.config.ts"
+      ]
+    },
+    "allowJs": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "next-env.d.ts"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

packages/cms-core/src/collections/articles/index.ts

@@ -1,7 +1,7 @@
 import type { CollectionConfig } from "payload";
 
-import { articleFields } from "./fields.js";
+import { articleFields } from "./fields";
-import { autoGenerateSlug } from "./hooks/before-change.js";
+import { autoGenerateSlug } from "./hooks/before-change";
 
 export const Articles: CollectionConfig = {
   slug: "articles",

packages/cms-core/src/index.ts

@@ -1,5 +1,5 @@
-export { Users } from "./collections/users/index.js";
+export { Users } from "./collections/users";
-export { Articles } from "./collections/articles/index.js";
+export { Articles } from "./collections/articles";
-export { Media } from "./collections/media/index.js";
+export { Media } from "./collections/media";
-export { SiteSettings } from "./globals/site-settings.js";
+export { SiteSettings } from "./globals/site-settings";
-export { default as config } from "./payload.config.js";
+export { default as config } from "./payload.config";

packages/cms-core/src/payload.config.ts

@@ -4,10 +4,10 @@ import { lexicalEditor } from "@payloadcms/richtext-lexical";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
-import { Users } from "./collections/users/index.js";
+import { Users } from "./collections/users";
-import { Articles } from "./collections/articles/index.js";
+import { Articles } from "./collections/articles";
-import { Media } from "./collections/media/index.js";
+import { Media } from "./collections/media";
-import { SiteSettings } from "./globals/site-settings.js";
+import { SiteSettings } from "./globals/site-settings";
 
 const filename = fileURLToPath(import.meta.url);
 const dirname = path.dirname(filename);