From db31f06bc015203ef185af0f04a54108470ac6eb Mon Sep 17 00:00:00 2001 From: Marc Mintel Date: Tue, 3 Mar 2026 15:30:41 +0100 Subject: [PATCH] fix: bypass Next.js css loader crash during build by isolating @mintel/payload-ai server imports --- apps/web/build.log | 35 +++++++++ apps/web/build2.log | 38 +++++++++ apps/web/build3.log | 96 +++++++++++++++++++++++ apps/web/payload.config.ts | 38 ++++----- apps/web/src/payload/collections/Media.ts | 2 +- 5 files changed, 189 insertions(+), 20 deletions(-) create mode 100644 apps/web/build.log create mode 100644 apps/web/build2.log create mode 100644 apps/web/build3.log diff --git a/apps/web/build.log b/apps/web/build.log new file mode 100644 index 0000000..9e810c6 --- /dev/null +++ b/apps/web/build.log @@ -0,0 +1,35 @@ + +> @mintel/web@0.1.0 build /Users/marcmintel/Projects/mintel.me/apps/web +> next build --webpack + +▲ Next.js 16.1.6 (webpack) +- Environments: .env +- Experiments (use with caution): + · clientTraceMetadata + + Creating an optimized production build ... +[@sentry/nextjs] It seems like you don't have a global error handler set up. It is recommended that you add a 'global-error.js' file with Sentry instrumentation so that React rendering errors are reported to Sentry. Read more: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#react-render-errors-in-app-router (you can suppress this warning by setting SENTRY_SUPPRESS_GLOBAL_ERROR_HANDLER_FILE_WARNING=1 as environment variable) +[@sentry/nextjs] DEPRECATION WARNING: It is recommended renaming your `sentry.client.config.ts` file, or moving its content to `instrumentation-client.ts`. When using Turbopack `sentry.client.config.ts` will no longer work. Read more about the `instrumentation-client.ts` file: https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client + [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/next-intl@4.8.2_@swc+helpers@0.5.18_next@16.1.6_@opentelemetry+api@1.9.0_react-dom@19.2_cfd2a0548e9a0d48fd79eed1a1591488/node_modules/next-intl/dist/esm/production/extractor/format/index.js for build dependencies failed at 'import(t)'. + Build dependencies behind this expression are ignored and might cause incorrect cache invalidation. + [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/next-intl@4.8.2_@swc+helpers@0.5.18_next@16.1.6_@opentelemetry+api@1.9.0_react-dom@19.2_cfd2a0548e9a0d48fd79eed1a1591488/node_modules/next-intl/dist/esm/production/extractor/format/index.js for build dependencies failed at 'import(t)'. + Build dependencies behind this expression are ignored and might cause incorrect cache invalidation. + [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/next-intl@4.8.2_@swc+helpers@0.5.18_next@16.1.6_@opentelemetry+api@1.9.0_react-dom@19.2_cfd2a0548e9a0d48fd79eed1a1591488/node_modules/next-intl/dist/esm/production/extractor/format/index.js for build dependencies failed at 'import(t)'. + Build dependencies behind this expression are ignored and might cause incorrect cache invalidation. +⚠ Compiled with warnings in 50s + + + Running TypeScript ... + Collecting page data using 15 workers ... +Error: Cannot find module '/Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/@mintel+payload-ai@1.9.13_@payloadcms+next@3.77.0_graphql@16.12.0_monaco-editor@0.55.1__6baee6e32ae56efbc0411af586fa4fba/node_modules/@mintel/payload-ai/dist/globals/AiSettings' imported from /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/@mintel+payload-ai@1.9.13_@payloadcms+next@3.77.0_graphql@16.12.0_monaco-editor@0.55.1__6baee6e32ae56efbc0411af586fa4fba/node_modules/@mintel/payload-ai/dist/index.js + at ignore-listed frames { + code: 'ERR_MODULE_NOT_FOUND', + url: 'file:///Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/@mintel+payload-ai@1.9.13_@payloadcms+next@3.77.0_graphql@16.12.0_monaco-editor@0.55.1__6baee6e32ae56efbc0411af586fa4fba/node_modules/@mintel/payload-ai/dist/globals/AiSettings' +} + +> Build error occurred +Error: Failed to collect page data for /blog/[slug]/opengraph-image-fx5gi7 + at ignore-listed frames { + type: 'Error' +} + ELIFECYCLE  Command failed with exit code 1. diff --git a/apps/web/build2.log b/apps/web/build2.log new file mode 100644 index 0000000..307cc82 --- /dev/null +++ b/apps/web/build2.log @@ -0,0 +1,38 @@ + +> @mintel/web@0.1.0 build /Users/marcmintel/Projects/mintel.me/apps/web +> next build --webpack + +▲ Next.js 16.1.6 (webpack) +- Environments: .env +- Experiments (use with caution): + · clientTraceMetadata + + Creating an optimized production build ... +[@sentry/nextjs] It seems like you don't have a global error handler set up. It is recommended that you add a 'global-error.js' file with Sentry instrumentation so that React rendering errors are reported to Sentry. Read more: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#react-render-errors-in-app-router (you can suppress this warning by setting SENTRY_SUPPRESS_GLOBAL_ERROR_HANDLER_FILE_WARNING=1 as environment variable) +[@sentry/nextjs] DEPRECATION WARNING: It is recommended renaming your `sentry.client.config.ts` file, or moving its content to `instrumentation-client.ts`. When using Turbopack `sentry.client.config.ts` will no longer work. Read more about the `instrumentation-client.ts` file: https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client + [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/next-intl@4.8.2_@swc+helpers@0.5.18_next@16.1.6_@opentelemetry+api@1.9.0_react-dom@19.2_cfd2a0548e9a0d48fd79eed1a1591488/node_modules/next-intl/dist/esm/production/extractor/format/index.js for build dependencies failed at 'import(t)'. + Build dependencies behind this expression are ignored and might cause incorrect cache invalidation. + [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/next-intl@4.8.2_@swc+helpers@0.5.18_next@16.1.6_@opentelemetry+api@1.9.0_react-dom@19.2_cfd2a0548e9a0d48fd79eed1a1591488/node_modules/next-intl/dist/esm/production/extractor/format/index.js for build dependencies failed at 'import(t)'. + Build dependencies behind this expression are ignored and might cause incorrect cache invalidation. + [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/next-intl@4.8.2_@swc+helpers@0.5.18_next@16.1.6_@opentelemetry+api@1.9.0_react-dom@19.2_cfd2a0548e9a0d48fd79eed1a1591488/node_modules/next-intl/dist/esm/production/extractor/format/index.js for build dependencies failed at 'import(t)'. + Build dependencies behind this expression are ignored and might cause incorrect cache invalidation. +⚠ Compiled with warnings in 48s + + + Running TypeScript ... + Collecting page data using 15 workers ... +TypeError: Unknown file extension ".css" for /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/react-image-crop@10.1.8_react@19.2.4/node_modules/react-image-crop/dist/ReactCrop.css + at Object.getFileProtocolModuleFormat [as (file:] (node:internal/modules/esm/get_format:176:9) { + code: 'ERR_UNKNOWN_FILE_EXTENSION' +} +TypeError: Unknown file extension ".css" for /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/react-image-crop@10.1.8_react@19.2.4/node_modules/react-image-crop/dist/ReactCrop.css + at Object.getFileProtocolModuleFormat [as (file:] (node:internal/modules/esm/get_format:176:9) { + code: 'ERR_UNKNOWN_FILE_EXTENSION' +} + +> Build error occurred +Error: Failed to collect page data for /sitemap.xml + at ignore-listed frames { + type: 'Error' +} + ELIFECYCLE  Command failed with exit code 1. diff --git a/apps/web/build3.log b/apps/web/build3.log new file mode 100644 index 0000000..ac8eb12 --- /dev/null +++ b/apps/web/build3.log @@ -0,0 +1,96 @@ + +> @mintel/web@0.1.0 build /Users/marcmintel/Projects/mintel.me/apps/web +> next build --webpack + +▲ Next.js 16.1.6 (webpack) +- Environments: .env +- Experiments (use with caution): + · clientTraceMetadata + + Creating an optimized production build ... +[@sentry/nextjs] It seems like you don't have a global error handler set up. It is recommended that you add a 'global-error.js' file with Sentry instrumentation so that React rendering errors are reported to Sentry. Read more: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#react-render-errors-in-app-router (you can suppress this warning by setting SENTRY_SUPPRESS_GLOBAL_ERROR_HANDLER_FILE_WARNING=1 as environment variable) +[@sentry/nextjs] DEPRECATION WARNING: It is recommended renaming your `sentry.client.config.ts` file, or moving its content to `instrumentation-client.ts`. When using Turbopack `sentry.client.config.ts` will no longer work. Read more about the `instrumentation-client.ts` file: https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client + [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/next-intl@4.8.2_@swc+helpers@0.5.18_next@16.1.6_@opentelemetry+api@1.9.0_react-dom@19.2_cfd2a0548e9a0d48fd79eed1a1591488/node_modules/next-intl/dist/esm/production/extractor/format/index.js for build dependencies failed at 'import(t)'. + Build dependencies behind this expression are ignored and might cause incorrect cache invalidation. + [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/next-intl@4.8.2_@swc+helpers@0.5.18_next@16.1.6_@opentelemetry+api@1.9.0_react-dom@19.2_cfd2a0548e9a0d48fd79eed1a1591488/node_modules/next-intl/dist/esm/production/extractor/format/index.js for build dependencies failed at 'import(t)'. + Build dependencies behind this expression are ignored and might cause incorrect cache invalidation. + [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marcmintel/Projects/mintel.me/node_modules/.pnpm/next-intl@4.8.2_@swc+helpers@0.5.18_next@16.1.6_@opentelemetry+api@1.9.0_react-dom@19.2_cfd2a0548e9a0d48fd79eed1a1591488/node_modules/next-intl/dist/esm/production/extractor/format/index.js for build dependencies failed at 'import(t)'. + Build dependencies behind this expression are ignored and might cause incorrect cache invalidation. +⚠ Compiled with warnings in 47s + + + Running TypeScript ... + Collecting page data using 15 workers ... + Generating static pages using 15 workers (0/25) ... +[OG] Loading fonts: bold=/Users/marcmintel/Projects/mintel.me/apps/web/public/fonts/Inter-Bold.woff, regular=/Users/marcmintel/Projects/mintel.me/apps/web/public/fonts/Inter-Regular.woff +[OG] Fonts loaded successfully (31320 and 30696 bytes) + Generating static pages using 15 workers (6/25) + Generating static pages using 15 workers (12/25) + Generating static pages using 15 workers (18/25) +✓ Generating static pages using 15 workers (25/25) in 3.1s +Lexical => JSX converter: Blocks converter: found mintelTldr block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelTldr block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +Lexical => JSX converter: Blocks converter: found mintelP block, but no converter is provided +[OG] Loading fonts: bold=/Users/marcmintel/Projects/mintel.me/apps/web/public/fonts/Inter-Bold.woff, regular=/Users/marcmintel/Projects/mintel.me/apps/web/public/fonts/Inter-Regular.woff +[OG] Fonts loaded successfully (31320 and 30696 bytes) +[OG] Loading fonts: bold=/Users/marcmintel/Projects/mintel.me/apps/web/public/fonts/Inter-Bold.woff, regular=/Users/marcmintel/Projects/mintel.me/apps/web/public/fonts/Inter-Regular.woff +[OG] Fonts loaded successfully (31320 and 30696 bytes) + Finalizing page optimization ... + Collecting build traces ... + +Route (app) +┌ ○ / +├ ○ /_not-found +├ ○ /about +├ ○ /about/opengraph-image-1ycygp +├ ƒ /admin/[[...segments]] +├ ƒ /api/[...slug] +├ ƒ /api/health/cms +├ ƒ /api/tweet/[id] +├ ○ /blog +├ ● /blog/[slug] +│ ├ /blog/why-websites-break-after-updates +│ └ /blog/maintenance-for-headless-systems +├ ƒ /blog/[slug]/opengraph-image-fx5gi7 +├ ○ /case-studies +├ ○ /case-studies/klz-cables +├ ○ /contact +├ ○ /contact/opengraph-image-upzrkl +├ ƒ /errors/api/relay +├ ○ /opengraph-image-12o0cb +├ ○ /sitemap.xml +├ ƒ /stats/api/send +├ ● /tags/[tag] +│ ├ /tags/maintenance +│ ├ /tags/reliability +│ ├ /tags/software-engineering +│ └ /tags/architecture +├ ● /technologies/[slug] +│ ├ /technologies/next-js-14 +│ ├ /technologies/typescript +│ ├ /technologies/tailwind-css +│ └ /technologies/react +└ ○ /websites + + +○ (Static) prerendered as static content +● (SSG) prerendered as static HTML (uses generateStaticParams) +ƒ (Dynamic) server-rendered on demand + diff --git a/apps/web/payload.config.ts b/apps/web/payload.config.ts index 28d65da..a0fa6fd 100644 --- a/apps/web/payload.config.ts +++ b/apps/web/payload.config.ts @@ -23,8 +23,6 @@ import { CrmInteractions } from "./src/payload/collections/CrmInteractions"; import { CrmTopics } from "./src/payload/collections/CrmTopics"; import { Projects } from "./src/payload/collections/Projects"; -import { AiSettings } from "@mintel/payload-ai"; - const filename = fileURLToPath(import.meta.url); const dirname = path.dirname(filename); @@ -48,7 +46,9 @@ export default buildConfig({ CrmInteractions, Projects, ], - globals: [/* AiSettings as any */], + globals: [ + /* AiSettings as any */ + ], email: nodemailerAdapter({ defaultFromAddress: process.env.MAIL_FROM || "info@mintel.me", defaultFromName: "Mintel.me", @@ -84,24 +84,24 @@ export default buildConfig({ plugins: [ ...(process.env.S3_ENDPOINT ? [ - s3Storage({ - collections: { - media: { - prefix: `${process.env.S3_PREFIX || "mintel-me"}/media`, + s3Storage({ + collections: { + media: { + prefix: `${process.env.S3_PREFIX || "mintel-me"}/media`, + }, }, - }, - bucket: process.env.S3_BUCKET || "", - config: { - credentials: { - accessKeyId: process.env.S3_ACCESS_KEY || "", - secretAccessKey: process.env.S3_SECRET_KEY || "", + bucket: process.env.S3_BUCKET || "", + config: { + credentials: { + accessKeyId: process.env.S3_ACCESS_KEY || "", + secretAccessKey: process.env.S3_SECRET_KEY || "", + }, + region: process.env.S3_REGION || "fsn1", + endpoint: process.env.S3_ENDPOINT, + forcePathStyle: true, }, - region: process.env.S3_REGION || "fsn1", - endpoint: process.env.S3_ENDPOINT, - forcePathStyle: true, - }, - }), - ] + }), + ] : []), ], endpoints: [ diff --git a/apps/web/src/payload/collections/Media.ts b/apps/web/src/payload/collections/Media.ts index 9ea1587..d5c877d 100644 --- a/apps/web/src/payload/collections/Media.ts +++ b/apps/web/src/payload/collections/Media.ts @@ -1,7 +1,7 @@ import type { CollectionConfig } from "payload"; import path from "path"; import { fileURLToPath } from "url"; -import { replicateMediaHandler } from "@mintel/payload-ai"; +import { replicateMediaHandler } from "@mintel/payload-ai/endpoints/replicateMediaEndpoint.js"; const filename = fileURLToPath(import.meta.url); const dirname = path.dirname(filename);