Since updating the Docker container to v.5.3.1-sh, some fields are displayed very strangely

[techsupportkoeln]

Since updating the Docker container to v.5.3.1-sh, some fields are displayed very strangely:

event_types_page_title requires_confirmation 12_hour_short 24_hour_short

Why is this?

[jonnydepp4]

Happening to me too! Build it from scratch as well @techsupportkoeln did you find a fix?

[techsupportkoeln]

i have no fix :/

[OrenRotaru]

I've been trying to setup a self hosted instance with docker compose for awhile now and see this issue immediately with everything fresh. Been at this for a bit too long. Something to do with my config?

Its most definitely to do with the i18n and it not being able to fetch the translations.

@calcom/web:start: Failed to load translations for en/common, falling back to English: TypeError: fetch failed
@calcom/web:start:     at async u (.next/server/app/api/auth/forgot-password/route.js:1:10372)
@calcom/web:start:     at async b (.next/server/chunks/66219.js:1:59508) {
@calcom/web:start:   [cause]: [Error [ConnectTimeoutError]: Connect Timeout Error] {
@calcom/web:start:     code: 'UND_ERR_CONNECT_TIMEOUT'
@calcom/web:start:   }
@calcom/web:start: }
@calcom/web:start: Could not fetch fallback translations: TypeError: fetch failed
@calcom/web:start:     at async u (.next/server/app/api/auth/forgot-password/route.js:1:10372)
@calcom/web:start:     at async b (.next/server/chunks/66219.js:1:59508) {
@calcom/web:start:   [cause]: [Error [ConnectTimeoutError]: Connect Timeout Error] {
@calcom/web:start:     code: 'UND_ERR_CONNECT_TIMEOUT'
@calcom/web:start:   }
@calcom/web:start: }
@calcom/web:start: Failed to load translations for en/common, falling back to English: TypeError: fetch failed
@calcom/web:start:     at async u (.next/server/app/api/auth/forgot-password/route.js:1:10372)
@calcom/web:start:     at async b (.next/server/chunks/66219.js:1:59508) {
@calcom/web:start:   [cause]: [Error [ConnectTimeoutError]: Connect Timeout Error] {
@calcom/web:start:     code: 'UND_ERR_CONNECT_TIMEOUT'
@calcom/web:start:   }
@calcom/web:start: }
@calcom/web:start: Failed to load translations for en/common, falling back to English: TypeError: fetch failed
@calcom/web:start:     at async u (.next/server/app/api/auth/forgot-password/route.js:1:10372)
@calcom/web:start:     at async b (.next/server/chunks/66219.js:1:59508) {
@calcom/web:start:   [cause]: [Error [ConnectTimeoutError]: Connect Timeout Error] {
@calcom/web:start:     code: 'UND_ERR_CONNECT_TIMEOUT'
@calcom/web:start:   }
...

[voska]

Here's the problematic code:

try {
    const res = await fetch(`${WEBAPP_URL}/static/locales/en/common.json`, {
      cache: process.env.NODE_ENV === "production" ? "force-cache" : "no-store",
    });

It's calling NEXT_PUBLIC_WEBAPP_URL server side first thing at startup then caching the result. So, if you use a reverse proxy like I do (Traefik), then your external facing url (cal.example.com) won't be accessible on startup as Traefik doesn't yet see the container as healthy.

I got it working in a very ugly way by removing container_name in docker-compose.yaml and adding a replica:

calcom:
        # container_name: calcom
        deploy:
            replicas: 2

Then with both running, restart reach one separately: docker restart calcom-calcom-1 docker restart calcom-calcom-2

Each one uses the other to load the static file https://cal.example.com/static/locales/en/common.json via your reverse proxy which now has a healthy container to route to.

[s3gunzel]

Here's the problematic code:

try {
    const res = await fetch(`${WEBAPP_URL}/static/locales/en/common.json`, {
      cache: process.env.NODE_ENV === "production" ? "force-cache" : "no-store",
    });

My resolution was much simpler; turns out the Cal.com file is in fact publicly accessible: https://cal.com/static/locales/en/common.json

Modifying the appropriate line as linked in voska's comment above would appear to fix it and not require adjustment to the Docker-Compose file to make it happen. As a short-term solution this would be more than adequate.

[gbissland]

New install ( via Coolify) also experiencing this issue. Spent quite a bit of time debugging until I saw this :/

[amitshuklabag]

I added extra_hosts to my Docker Compose file, and it resolved the issue.

[eddywashere]

For coolify specifically, I was able to get this working by updating the compose file to add a volume to the calcom service:

# add this within calcom service
    volumes:
      - ./start.sh:/calcom/scripts/start.sh

Then go to Persistent Storages and convert the new volume to a file so you can inject the following:

#!/bin/sh
set -x

# Replace the statically built BUILT_NEXT_PUBLIC_WEBAPP_URL with run-time NEXT_PUBLIC_WEBAPP_URL
# NOTE: if these values are the same, this will be skipped.
scripts/replace-placeholder.sh "$BUILT_NEXT_PUBLIC_WEBAPP_URL" "$NEXT_PUBLIC_WEBAPP_URL"

# temp fix
sed -i 's|\${n\.YW}/static|https://cal.com/static|g' /calcom/apps/web/.next/server/chunks/93433.js

scripts/wait-for-it.sh ${DATABASE_HOST} -- echo "database is up"
npx prisma migrate deploy --schema /calcom/packages/prisma/schema.prisma
npx ts-node --transpile-only /calcom/packages/prisma/seed-app-store.ts
yarn start

Note: replace 93433.js with the chunk throwing an error in your console - this was latest tag of the container from fresh install today but might be different for you.

Noticed another thread with the same issue so I'll tag that here. https://github.com/calcom/cal.com/issues/21921#issuecomment-2999140728

[CountOlaf87]

I'm having the same issue with self hosting behind traefik reverse proxy, although I'm getting:

@calcom/web:start:     at l (.next/server/chunks/66219.js:1:20042)

@calcom/web:start:     at async c (.next/server/chunks/66219.js:1:20333)

@calcom/web:start:     at async h (.next/server/chunks/66219.js:1:45684)

@calcom/web:start:     at async _ (.next/server/chunks/66219.js:1:45777)

@calcom/web:start:     at async f (.next/server/chunks/66219.js:1:46079)

@calcom/web:start:     at async Module.b (.next/server/app/(use-page-wrapper)/auth/login/page.js:1:17356)

@calcom/web:start: Could not fetch fallback translations: Error: Failed to fetch fallback translations: 404

@calcom/web:start:     at i (.next/server/chunks/66219.js:1:19670)

@calcom/web:start:     at async l (.next/server/chunks/66219.js:1:20236)

@calcom/web:start:     at async b (.next/server/chunks/66219.js:1:55616)

@calcom/web:start: Could not fetch fallback translations: Error: Failed to fetch fallback translations: 404

@calcom/web:start:     at i (.next/server/chunks/66219.js:1:19670)

@calcom/web:start:     at async l (.next/server/chunks/66219.js:1:20236)

@calcom/web:start:     at async c (.next/server/chunks/66219.js:1:20333)

@calcom/web:start:     at async h (.next/server/chunks/66219.js:1:45684)

@calcom/web:start:     at async _ (.next/server/chunks/66219.js:1:45777)

@calcom/web:start:     at async f (.next/server/chunks/66219.js:1:46079)

@calcom/web:start:     at async Module.b (.next/server/app/(use-page-wrapper)/auth/login/page.js:1:17356)

@calcom/web:start: react-i18next:: You will need to pass in an i18next instance by using initReactI18next```

[HannesOberreiter]

I added extra_hosts to my Docker Compose file, and it resolved the issue.

Could you elaborate how you do this or is your NEXT_PUBLIC_WEBAPP_URL setup with a port? As the extra_host doesn't allow ports to be specified and therefore it would result in a 443 port back loop if you setup the webapp url as SSL.

---

My resolution was much simpler; turns out the Cal.com file is in fact publicly accessible: https://cal.com/static/locales/en/common.json

Thank you, this is by far the simplest solution for me. If you have traefik running (or any other routing service before it) you can redirect this path to the cal.com server. Therefore you don't need to change any resources inside the container.

Here is my dynamic.yml for traefik config (I use the proxy approach).

Redirect

http:
  middlewares:
    calcom-locales-redirect:
      redirectRegex:
        regex: 'https://app.domain/static/locales/([^/]+)/(.+)$'
        replacement: 'https://cal.com/static/locales/$1/$2'
        permanent: true

  routers:
    calcom:
      rule: Host(`app.domain.com`)
      middlewares:
        - calcom-locales-redirect
      service: calcom

Proxy Forward

http:
  routers:
    calcom-locales:
      rule: 'Host(`app.domain.com`) && PathPrefix(`/static/locales/`)'
      priority: 200
      service: calcom-external
    
    calcom:
      rule: Host(`app.domain.com`)
      service: calcom

  services:
    calcom:
      loadBalancer:
        servers:
          - url: 'http://calcom:3000'
    
    calcom-external:
      loadBalancer:
        servers:
          - url: 'https://cal.com'
        passHostHeader: false