Absolute langDir path isn't validated/resolved correctly

[Ni55aN]

Environment

https://stackblitz.com/edit/github-wfnczp-7tzsju?file=nuxt.config.ts

Reproduction

a. Dev mode

npm run dev

✔ The page contains

Hello!

Welcome issue

b. Build

npm run build 
node .output/server/index.mjs

Open preview page with disabled JS

❌ The page contains

hello

welcome

It indicates that the translations were not loaded at all

c. Generate

npm run generate
npx serve .output/public/

❌ The page contains:

Hello!

Welcome {name}

Translations are loaded at generate, but interpolation doesn't work correctly

Describe the bug

First of all, at build stage langDir: '/locales' is accepted. Looks like it isn't recognized as an absolute path because somewhere join is used instead of resolve.

When I specify resolve('locales'), it throws an error Could not resolve "../home/username/i18n-interpolation-issue/locales/en.json" from ".nuxt/i18n.options.mjs"

Additional context

The most confusing things are"

• regular message is translated correctly on the client side (with enabled JS, after hydration) or after npm run generate, but not message with interpolation.
• everything works fine while development (npm run dev)

Logs

No response

[BobbieGoede]

langDir is resolved relative to srcDir, your project should work with langDir: 'locales'. I think the docs probably need to explain this.

For reference:

i18n/src/module.ts

Line 67 in 029c634

const langPath = isString(options.langDir) ? resolve(nuxt.options.srcDir, options.langDir) : null

[Ni55aN]

@BobbieGoede in this case langPath must be equal to langDir if langDir is an absolute path.

p.resolve('/path/to/project', '/locales') === '/locales'

But in dev mode and during generate it correctly extracts locales from /path/to/project/locales

[BobbieGoede]

@Ni55aN

p.resolve('/path/to/project', '/locales') === '/locales'

I think that's the issue, as the following is what happens when passing a relative path.

p.resolve('/path/to/project', 'locales') === '/path/to/project/locales'
p.resolve('/path/to/project', './locales') === '/path/to/project/locales'

I'm not sure why it does work in dev mode however.

[Ni55aN]

Probably the issue is that generateLoaderOptions accepts unresolved options.langDir

i18n/src/module.ts

Lines 145 to 148 in 029c634

	return generateLoaderOptions(
	options.lazy,
	options.langDir,
	localesRelativeBasePath,

which is "resolved" inside by resolveLocaleRelativePath

i18n/src/gen.ts

Lines 171 to 173 in 029c634

	function resolveLocaleRelativePath(relativeBase: string, langDir: string, file: string) {
	return normalize(`${relativeBase}/${langDir}/${file}`)
	}