Using wuchale with Zod error messages

[brandonpittman]

I have a function that returns error messages. Wuchale picks it up and I can translate it, but when running dev or building for production I get an error at the site (Zod schema) where I call the get_error function. I assume it fails because the locale isn't being setup as the schema's aren't functions themselves and get run before the environment is set up?

Catalog for 'js.js' not found.
  Either 'runWithLocale' was not called or the environment has a problem.

node:internal/event_target:1122
  process.nextTick(() => { throw err; });
                           ^
TypeError: Cannot read properties of undefined (reading 't')
    at get_error (file:///.../.svelte-kit/output/server/chunks/date.js:27:28)
    at file:///.../.svelte-kit/output/server/chunks/date.js:37:18
    at ModuleJob.run (node:internal/modules/esm/module_job:413:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:654:26)
    at async Promise.all (index 4)
    at async analyse (file:///.../node_modules/@sveltejs/kit/src/core/postbuild/analyse.js:91:16)
    at async MessagePort.<anonymous> (file:///.../node_modules/@sveltejs/kit/src/utils/fork.js:23:16)

Node.js v25.3.0

Is it possible to use Wuchale translations with Zod error messages?

[K1DV5]

Hi @brandonpittman, I am not sure if I understand how you were using the get_error function and how the error message is related to wuchale. Can you please give more information?

As for the locale setup, the key is when the strings are normally accessed. If they are top level variables for example, they are accessed right after the module is parsed before wuchale can have a chance to swap them. Even if they are inside functions, if the function is called from a top level declaration, it has the same effect. So the function should be called inside a request (backend) or when rendering (frontend). Of course this doesn't apply to the Svelte adapter because even top level values can be reactive there so they can be swapped.

[brandonpittman]

Hi, @K1DV5. Here are my two files impacted by this error.

// error.ts

export type ErrorKey =
	| 'not_found'
	| 'not_allowed'
	| 'invalid_date'
	| 'bad_url'
	| 'years_exceeds_age';

export const get_error = (key: ErrorKey): string => {
	const messages = {
		not_found: 'ページが見つかりません。',
		not_allowed: '認証エラー',
		invalid_date: '入力された日付が正しくありません。',
		bad_url: '不正なURL',
		years_exceeds_age: '年齢を超えた年数は入力できません。'
	};
	return messages[key];
};

// date.schema.ts
export const DateSchema = z.string().check(
	z.minLength(8, get_error('invalid_date')),
	z.overwrite((d) => d.replace(/(\d{4})(\d{2})(\d{2})/u, '$1-$2-$3')),
	z.refine((v) => Number(v.slice(-2)) <= 31, get_error('invalid_date')),
	z.refine((v) => !v.match(/(02|04|06|09|11)-31/), get_error('invalid_date')),
	z.refine((v) => !v.match(/02-30/), get_error('invalid_date')),
	z.refine(
		(v) => isLeapYear(Number(v.slice(0, 4))) || !v.match(/02-29/),
		get_error('invalid_date')
	),
	z.refine((v) => v > '1900-01-01', get_error('invalid_date')),
	z.refine((v) => {
		const fiveYearsAgo = new Date();
		fiveYearsAgo.setFullYear(fiveYearsAgo.getFullYear() - 5);
		return new Date(v) <= fiveYearsAgo;
	}, get_error('invalid_date'))
);

The strings are defined in a function and then used in a Zod schema. I tried passing them to the schema using {error: () => '...'} too to delay Zod's calling of them, but the same error threw during npm run {dev,build}. So I suppose the problem is Zod calls them at the top-level.

If I have a schema file with error messages that get called a lot, what's the best way to let Wuchale handle this kind of setup? Or, if you were going to localize your schema error strings, how would you set it up?

[brandonpittman]

Turns out I was on the right track.

Declaring the Zod error message with something like z.string({error: () => get_error('error')}) works. I just missed a file that used the get_error function. Once I converted the other file's usage to the function version, everything worked fine.

[K1DV5]

Hi @brandonpittman, apologies for the delay. Great that you found the solution, yeah having them in functions is the key.