How to use @alias in a local vuepress-next plugin?

[favoyang]

I have a local vuepress-next plugin that uses @alias import both directly and indirectly, but I can not make it work.

Project directory structure:

docs/
  .vuepress/       # for vuepress
    config.ts
    plugins/
      my-plugin.ts # local vuepress plugin
src/
  node/            # for node part
    node-lib.ts
  shared/          # for code shared with both node and vue's client parts
    shared-lib.ts
tsconfig.json

Aliases @node (point to src/node) and @shared (point to src/shared are defined both in vuepress config.ts and tsconfig.ts.

tsconfig.ts

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ES6",
    "module": "ESNext",
    "moduleResolution": "node",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "paths": {
      "@/*": ["./docs/.vuepress/*"],
      "@node/*": ["./src/node/*"],
      "@shared/*": ["./src/shared/*"]
  }
...

config.ts

import myPlugin from './plugins/my-plugin';

const config: any = {
  plugins: [
    myPlugin({}),
  ],
  alias: {
    '@': path.resolve(__dirname),
    '@node': path.resolve(__dirname, '../../src/node'),
    '@shared': path.resolve(__dirname, '../../src/shared'),
  }
...

in my-plugin.ts, it imports code from @node and @shared. And @node/node-lib also imports from @shared internally.

import nodeLib from "@node/node-lib";
import sharedLib from "@shared/shared-lib";

The problem is that myPlugin is being imported before @alias gets defined in config.ts. And vuepress doesn't respect the path alias in tsconfig.ts.

It seems one workaround is to delay the import to @alias, using a dynamic import. But it failed, I guess vite doesn't support @alias in dynamic import.

const module = await import('@node/node-lib');
=>
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@node/node-lib' imported from ***/docs/.vuepress/config.ts.****.mjs

Another workaround is to use a relative import in my-plugin.ts. But it also failed because node/node-lib use @alias internally.

import nodeLib from "../../../src/node/node-lib";
import sharedLib from "../../../src/node/shared/shared-lib";
=>
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@node/another-lib' imported from ***/docs/.vuepress/config.ts.****.mjs

Your help is appreciated.

[Mister-Hope]

Vite/Webpack ONLY parse alias for bunded files, which are files used in browser.

Your plugin entry is handled by node directly, so the alias never works.

If you want to use alias, use a bundler to bundle your files and use that output as your plugin entry.

[favoyang]

Thanks for the quick reply.

For now, I removed all @alias import in src/ and use relative import from my-plugin.ts.

My following question could be newbie, there seems to be some process in that vuepress (vite) compiles the config.ts along with my local my-plugin.ts, then generate js to be executed by Node. Is that possible to respect tsconfig.json during that process, where I have defined compilerOptions.paths for aliasing?

[Mister-Hope]

We use esbuild to bundle your config file entry, and there could be many chances where you are developing a project with a root tsconfig and add docs in it, the case tsconfig.json under root is nothing related to docs config.ts. so I think we might ignore it by purpose. Add a precompile stage could solve your problem.

[favoyang]

I followed your advice by adding a precompile stage using esbuild and changing config.ts to import from the outDir (dist/vuepress-plugin-myplugin). Esbuild respects the tsconfig.json, and the paths alias work as expected during the precompile stage.

Though adding one more stage means the dev mode now becomes a bit complex.

package.json

  "scripts": {
    "precompile": "esbuild src/node/vuepress-plugin-myplugin.ts --bundle --platform=node --format=esm --outdir=dist",
    "precompile:dev": "npm run precompile -- --watch",
    "docs:dev": "concurrently -k -n precompile:dev,docs:dev \"npm run precompile:dev\" \"vuepress dev docs\"",
    "docs:build": "npm run precompile && vuepress build docs",
...

We use esbuild to bundle your config file entry

I guess it would be a lot easier if there's a chance to hook/config the esbuild process inside vuepress before bundling the config file entry (e.g. by specifying a tsconfig.json for it). After all, what I have done is just let a custom esbuild process respect the tsconfig.json.