Type issue when using localization

[thibault-chausson]

Describe the Bug

I use the feature that allows multiple languages on a field, like this:

// collections/Articles.ts

import type { CollectionConfig } from 'payload'

export const Articles: CollectionConfig = {
  slug: 'articles',
  fields: [
    {
      name: 'title',
      label: 'Title',
      type: 'text',
      required: true,
      localized: true,
    },
    {
      name: 'content',
      label: 'Content',
      type: 'richText',
      required: true,
      localized: true,
    }
  ],
}

Then I configure Payload as follows:

// payload.config.ts

// storage-adapter-import-placeholder
import { postgresAdapter } from '@payloadcms/db-postgres'
import { payloadCloudPlugin } from '@payloadcms/payload-cloud'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import path from 'node:path'
import { buildConfig } from 'payload'
import { fileURLToPath } from 'node:url'
import sharp from 'sharp'

import { Users } from './collections/Users'
import { Media } from './collections/Media'
import { Articles } from './collections/Articles'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: path.resolve(dirname),
    },
  },
  collections: [Users, Media, Articles],
  editor: lexicalEditor(),
  secret: process.env.PAYLOAD_SECRET || '',
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  localization: {
    locales: [
      {
        label: "English",
        code: "en",
      },
      {
        label: "French",
        code: "fr",
      }
    ],
    defaultLocale: "en",
  },
  db: postgresAdapter({
    pool: {
      connectionString: process.env.DATABASE_URI || '',
    },
    schemaName: "payload",
  }),
  sharp,
  plugins: [
    payloadCloudPlugin(),
    // storage-adapter-placeholder
  ],
})

When everything is set up correctly, I want to retrieve an article like this, but I get a type error (or the type isn’t defined) for articles.docs[0].title.en:

import React from 'react';
import config from "@payload-config";
import { getPayload } from "payload";

export default async function Component() {
  const payload = await getPayload({ config });
  const articles = await payload.find({
    collection: "articles",
    locale: "all"
    //req, // passing req is recommended
  });
  console.log(articles);
  console.log(articles.docs[0].title);
  console.log(articles.docs[0].title.en);
  return (
    <div>
      <h1>Articles</h1>
      <p>Check on terminal console</p>
    </div>
  );
};

I get this error:

But in the terminal, with a console.log, we can see the JSON structure perfectly.

Link to the code that reproduces this issue

https://github.com/thibault-chausson/bug-payload

Reproduction Steps

To reproduce this bug, use PostgreSQL, initialize the .env file with your database URL.
Run the application with: pnpm dev
Add one article in French and one in English.
Then go to localhost:3000 and look at the result in the terminal. You’ll see the JSON:

{
    en: "something",
    fr: "un truc"
}

Which area(s) are affected? (Select all that apply)

area: docs

Environment Info

Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.19
  pnpm: 9.0.4
Relevant Packages:
  payload: 3.9.0
  next: 15.1.0
  @payloadcms/db-postgres: 3.9.0
  @payloadcms/email-nodemailer: 3.9.0
  @payloadcms/graphql: 3.9.0
  @payloadcms/next/utilities: 3.9.0
  @payloadcms/payload-cloud: 3.9.0
  @payloadcms/richtext-lexical: 3.9.0
  @payloadcms/translations: 3.9.0
  @payloadcms/ui/shared: 3.9.0
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.2.0: Fri Dec  6 19:01:59 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8

[DanRibbens]

@r1tsuu I wonder if this was a regression. Did you make any related changes recently?

[r1tsuu]

@DanRibbens I don't think so. We never supported types for locale: 'all', I'd say it's a feature request

[r1tsuu]

@thibault-chausson the reason why you can't access title.en is because title is defined as string, not {en: string, fr: string } which ideally should be inferred from locale: 'all'.

We could make an optional type generation for locale: 'all' in the future I think, which we can reuse for payload.db. But we need to think how to do this efficiently so the payload-types.ts file should stay as small as possible.

[thibault-chausson]

Thank you for your feedback!

It would be very handy for generating sitemaps, for instance, because I have different article slugs in French and English, and I want to properly set up alternates tags for article localization.

Also, if we could do this with Strapi using local: ["en", "fr"], that would be perfect!

[r1tsuu]

It would be very handy for generating sitemaps, for instance, because I have different article slugs in French and English, and I want to properly set up alternates tags for article localization.

Exactly, agree.
I can give you a quick solution to this using a virtual field:

{
  slug: 'posts-test',
  hooks: {
    // in beforeRead all the locales are available.
    beforeRead: [
      ({ doc }) => {
        doc.localizedSlugs = doc.slug
      },
    ],
  },
  fields: [
    {
      name: 'slug',
      type: 'text',
      localized: true,
    },
    {
      name: 'localizedSlugs',
      type: 'group',
      virtual: true,
      admin: {
        hidden: true,
      },
      fields: [
        {
          name: 'en',
          type: 'text',
        },
        {
          name: 'es',
          type: 'text',
        },
      ],
    },
  ],
},

Generated type:

/**
 * This interface was referenced by `Config`'s JSON-Schema
 * via the `definition` "posts-test".
 */
export interface PostsTest {
  id: string;
  slug?: string | null;
  localizedSlugs?: {
    en?: string | null;
    es?: string | null;
  };
  updatedAt: string;
  createdAt: string;
}