allow use @ as aliases prefix

[zhujiageng]

nx is a widely used monorepo tool, and all the internal libraries managed with it start with "@" as a prefix, and this prefix cannot be modified. my packages will never publishes to npm.

nx don't use aliases, it defines package names by setting compilerOptions.paths to tsconfig.json, and use viteTsConfigPaths plugin to resolve these names.

however, vike is not compatible with viteTsConfigPaths plugin, so the workaround is using aliases, otherwise vite will build faild.

If Vike is not compatible with "@" symbol, it will result in losing all the developers who rely on nx.

[brillout]

I see, let me have a look. (I agree Vike should support Nx. And it should, ideally, support it seamlessly.)

[brillout]

vike is not compatible with viteTsConfigPaths plugin

Can you create a reproduction for this?

[zhujiageng]

here is a reproduction

vite.config.ts

import viteTsConfigPaths from 'vite-tsconfig-paths';

plugins: [
  viteTsConfigPaths({
    root: '../../',
  }),
  react(),
  ssr({ prerender: true }),
]

then vike will generate an error like this:

error when starting dev server:
Error: [vite-plugin-ssr][Wrong Usage] vite-tsconfig-paths not supported, remove it and use vite.config.js#resolve.alias instead

[brillout]

I see, thanks.

I've an idea for how to allow arbitrary aliases and I also have a plan to support vite-tsconfig-paths.

There are a couple of high priorities I want to finish before implementing both fixes.

Let me know if it's urgent and I'll bump the priority.

[brillout]

Created a feature request for it: #1136.

[zhujiageng]

Thank you, this is not urgent because this version can still be used.

[DreamwareDevelopment]

Interesting. I'm using NX and I didn't run across this issue although I did struggle with having Vike reconcile multiple packages. Couple of things that you're doing differently. 1. My monorepo doesn't have @ in the paths, but it does in the organization prefix of package.json names. 2. I didn't point the vite root to the monorepo root. I ended up putting my frontend code in the same package as the fastify server. This was okay for my situation because all it does is render, business logic is taken care of by other microservices.

[brillout]

Thanks for chiming in. I'd be curious to hear @zhujiageng's reply.

@zhujiageng Btw. I've started experimenting support for @ aliases but it isn't working. I'm hopeful/confident I'll find a way to make it work, let's see.

[zhujiageng]

@DreamwareDevelopment It looks like you're not using the official Nx Vite+React generator. The configuration snippet viteTsConfigPaths({ root: '../../' }) is generated by the Nx generator. Additionally, my frontend and backend code are separate, and I've created separate packages for reusable frontend components and backend code. This is why I need to address the issue of the @ prefix. If all the code is placed in a single package, why would I use Nx?

[brillout]

IIRC you mentioned that Nx requires package names to start with @, can you elaborate on that? It seems to be a surprising/arbitrary requirement from Nx.

[zhujiageng]

The official nx documentation doesn't explicitly state it, but you can find out by looking at the source code.

[shishkin17]

Looks like the problem is gone when nx switched to nxViteTsPaths instead of viteTsConfigPaths?

[brillout]

Neat. Yes, that's likely since vite-tsconfig-paths was the culprit.

[airtonix]

@shishkin17 links?

[airtonix]

maybe here?

nrwl/nx#19349

[shishkin17]

@airtonix I just wanted to say that I didn't have that problems with '@' aliases in vike + nx. I assumed that was because nx moved to nxViteTsPaths.