There is no working example for the layers

[kleinpetr]

Environment

• Operating System: Linux
• Node Version: v16.20.0
• Nuxt Version: 3.6.3
• Nitro Version: 2.5.2
• Package Manager: pnpm@8.6.8
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/github/kleinpetr/nuxt-i18n-layers

Describe the bug

Hi I was waiting since my last issue #2092 but after a while I've tried to upgrade deps, i18n and Nuxt itself. but it seems that is still not working seamlessly.. What I would like to achieve

• I have a layer which has its own logic, components and locales of course, this layer should be independent on his parent, so I would like to use i18n in the layer because the layer needs it. The project doesn't have to know if the layer uses i18n or not at the end (this is my opinion If I would keep Single Responsibility Purpose), and of course if I would like to overwrite something from the layer in the parent I should be able to do it, just by rewriting the i18n.config.ts

• So, is there any simple, straightforward, exmaple when the layer uses i18n?

Additional context

No response

Logs

No response

[kazupon]

Hmm, It seems that nuxt layers in nuxt i18n module still have bugs in monorepo projects. /cc @BobbieGoede

[BobbieGoede]

@kleinpetr
Hi! Sorry your previous issue #2092 did not get resolved, I did try to look into it but I didn't manage to get far with fixing it. Hopefully we can get this resolved completely this time 😄.

This issue seems to only be caused if a layer uses a config file i18n.config.ts, I'm getting the impression that it being outside the project layer breaks its resolution. The playground of this repo proves this works fine when using a layer in a nested directory.

I'm not familiar enough (yet) with how the proxy/transform code works exactly, but the error it's throwing seems to point in that direction if I understand correctly. [vite-node] [ERR_INVALID_ARG_VALUE] @nuxtjs/i18n/layer/i18n.config.ts&c=66a81f95&from=./.nuxt/i18n.options.mjs. @kazupon what do you think?

[kazupon]

@BobbieGoede
I think i18n.config.ts cannot be handled with proxy/transform. so from the log @nuxtjs/i18n/layer/i18n.config.ts, I seem that paths are not being resolved correctly in monorepo.

[kazupon]

related (same) issue #2073

[BobbieGoede]

@kazupon
I've changed the reproduction to demonstrate what the issue appears to be here. You can run this reproduction with pnpm run dev and pnpm run dev:furthest and see that depending on the amount of levels up the layer directory is we get a different result.

Looking at the generated i18n.options.mjs file, I think it looks like the paths are resolved/generated correctly.

// nested layer generates this import
import("\u0000@nuxtjs/i18n/__config__?target=../layer-nested/i18n.config.ts&hash=6596de27");

// a layer one directory up ('../layer/') generates this 
import("\u0000@nuxtjs/i18n/__config__?target=../../layer/i18n.config.ts&hash=29e2a922");

// a layer two directories up ('../../layer-furthest/') generates this
import("\u0000@nuxtjs/i18n/__config__?target=../../../layer-furthest/i18n.config.ts&hash=50848308");

But the layers directories up relative to the project throw errors

// a layer one directory up ('../layer/') error 
[vite-node] [ERR_INVALID_ARG_VALUE] @nuxtjs/i18n/layer/i18n.config.ts&hash=29e2a922&from=./.nuxt/i18n.options.mjs

// a layer two directories up ('../../layer-furthest/') error
[vite-node] [ERR_INVALID_ARG_VALUE] @nuxtjs/layer-furthest/i18n.config.ts&hash=50848308&from=./.nuxt/i18n.options.mjs

It seems that every directory level up more of the original path is replaced/removed, I'm assuming the expected path would start with @nuxtjs/i18n/__config__?target=?

generated	handled as
@nuxtjs/i18n/__config__?target=../layer-nested/i18n.config.ts	@nuxtjs/i18n/__config__?target=../layer-nested/i18n.config.ts (is what I assume)
@nuxtjs/i18n/__config__?target=../../layer/i18n.config.ts	@nuxtjs/i18n/layer/i18n.config.ts
@nuxtjs/i18n/__config__?target=../../../layer-furthest/i18n.config.ts	@nuxtjs/layer-furthest/i18n.config.ts

Maybe I'm missing something but based on this I think the issue is caused by the way the generated imports are handled and I'm not sure how to fix this 😅.

Edit:
I just noticed that the i18n.options.mjs file shows the different/faulty paths when viewed in the sources panel in chrome devtools, is this a different file than the one in the .nuxt folder?

[Quineone]

have the same issue

[BobbieGoede]

It seems to be related to the way vite changes the imports

[kazupon]

Thank you for your effort!

I've just checked your reproduction.
I have put in a debug log to investigate, but it seems that relative paths are rewritten if they are more than 2 levels.

Your nuxt-devtools captures are of great help!
It seems to have been rewritten by vite:import-analysis.

we need help from the vite team!

[BobbieGoede]

It looks like vite-node uses posix.normalize from node:path to normalize these import paths (usage here), but posix.normalize does not treat query parameters any different than a regular path.

To demonstrate I ran path.posix.normalize in a terminal, as you can see the normalized path breaks as the query parameter introduces more ../.

> path.posix.normalize('@nuxt/i18n/__config__?target=./config.ts')
'@nuxt/i18n/__config__?target=./config.ts'
> path.posix.normalize('@nuxt/i18n/__config__?target=../config.ts')
'@nuxt/i18n/__config__?target=../config.ts'
> path.posix.normalize('@nuxt/i18n/__config__?target=../../config.ts')
'@nuxt/i18n/config.ts'
> path.posix.normalize('@nuxt/i18n/__config__?target=../../../config.ts')
'@nuxt/config.ts'

I found a PR for a rollup plugin @rollup/plugin-node-resolve which seems to tackle a similar issue here, with the current implementation here. From what I can tell the takeaway here is that the query parameters are being split from the path, and concatenated again after resolving the base path without parameters.

I will open an issue on the vite repository and see if I can implement a fix for this!

[BobbieGoede]

It looks like #2265 fixes this issue, you can install the edge channel to use it until it is included in a release! I have installed the edge version to confirm that it works in your reproduction: https://stackblitz.com/edit/github-cthyca?file=package.json

You can install the edge channel like so pnpm i -w @nuxtjs/i18n@npm:@nuxtjs/i18n-edge