Vercel build fails for manage-ui

[kizim]

When deploying manage-ui to Vercel, the build fails with a TypeScript error related to CSS custom properties on the SidebarProvider style prop in src/app/layout.tsx (@inkeep/agents-manage-ui).

Locally it builds fine, but on Vercel the type check is stricter and rejects the --sidebar-width / --header-height properties.

Error log:

@inkeep/agents-manage-ui:build: Failed to compile.

@inkeep/agents-manage-ui:build: ./src/app/layout.tsx:68:19
@inkeep/agents-manage-ui:build: Type error: Object literal may only specify known properties, and ''--sidebar-width'' does not exist in type 'Properties<string | number, string & {}>'.

@inkeep/agents-manage-ui:build:   66 |               <SidebarProvider
@inkeep/agents-manage-ui:build:   67 |                 style={{
@inkeep/agents-manage-ui:build: > 68 |                   '--sidebar-width': 'calc(var(--spacing) * 62)',
@inkeep/agents-manage-ui:build:      |                   ^
@inkeep/agents-manage-ui:build:   69 |                   '--header-height': 'calc(var(--spacing) * 12)',
@inkeep/agents-manage-ui:build:   70 |                 }}
@inkeep/agents-manage-ui:build:   71 |               >

[dimaMachina]

Hm, we don't have these type errors on Vercel, we use enhanced CSSProperties in this d.ts in https://github.com/inkeep/agents/blob/main/agents-manage-ui/src/env.d.ts

Could you help me reproduce your issue? So I could fix it

[Axyl1410]

I also ran into the same problem when build in vercel @dimaMachina

@inkeep/agents-manage-ui:build: ./src/app/layout.tsx:68:19
@inkeep/agents-manage-ui:build: Type error: Object literal may only specify known properties, and ''--sidebar-width'' does not exist in type 'Properties<string | number, string & {}>'.
@inkeep/agents-manage-ui:build: 
@inkeep/agents-manage-ui:build:   66 |               <SidebarProvider
@inkeep/agents-manage-ui:build:   67 |                 style={{
@inkeep/agents-manage-ui:build: > 68 |                   '--sidebar-width': 'calc(var(--spacing) * 62)',
@inkeep/agents-manage-ui:build:      |                   ^
@inkeep/agents-manage-ui:build:   69 |                   '--header-height': 'calc(var(--spacing) * 12)',
@inkeep/agents-manage-ui:build:   70 |                 }}
@inkeep/agents-manage-ui:build:   71 |               >
@inkeep/agents-manage-ui:build: Next.js build worker exited with code: 1 and signal: null
@inkeep/agents-manage-ui:build:  ELIFECYCLE  Command failed with exit code 1.
@inkeep/agents-manage-ui:build: command finished with error, but continuing...
@inkeep/agents-manage-ui#build: command (/vercel/path0/apps/manage-ui) /pnpm10/node_modules/.bin/pnpm run build exited (1)

[dimaMachina]

@Axyl1410 how you vercel project deployment configuration looks like?

Did you follow guide https://docs.inkeep.com/self-hosting/vercel#step-7-create-a-vercel-project-for-manage-ui ?

I was able to deploy on my personal account project

[Axyl1410]

@dimaMachina yes i following the guild but error when vercel check typescript, can you show me version in your package.json

[dimaMachina]

@Axyl1410 can you provide more details about your deployment? which guide do you use to deploy dashboard? is it this one https://docs.inkeep.com/self-hosting/vercel ?

Or you use npm package https://www.npmjs.com/package/@inkeep/agents-manage-ui

[Axyl1410]

@dimaMachina I deployed with Vercel and followed the same instructions as inkeep documentation; everything worked until I deployed the UI manager. I tried changing several versions in package.json but still encountered the same error during build.