Unable to do alias path in the server folder

[AbdallahR99]

Please provide the environment you discovered this bug in.

Window 11 PNPM Angular 17

Which area/package is the issue in?

vite-plugin-nitro

Description

when I create an alias path for the server folder it gives me error:

[worker reload] Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@server/auth' imported from D:\Work\ddapp\dd\dist\.nitro\dev\index.mjs
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:887:9)
    at moduleResolve (node:internal/modules/esm/resolve:936:20)
    at defaultResolve (node:internal/modules/esm/resolve:1129:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)

then I checked the dist\.nitro\dev\index.mjs and I found the imports are like this:

import { oidcConfig } from '@server/auth/auth.config';
import { createOidcClient } from '@server/auth/odic.client';
import { initSession, qlikClientOptions, SESSIONS } from '@server/qlik/qlik.client';
import { QlikSession } from '@server/qlik/qlik.session';

the alias paths work fine with the browser files but it throws this error when I use with server files,

I configurated the allies paths as following: in the tsconfig.json I put:

...
"baseUrl": "./",
    "paths": {
      "@core/*": ["./src/app/core/*"],
      "@components/*": ["./src/app/components/*"],
      "@pages/*": ["./src/app/pages/*"],
      "@environments/*": ["./src/environments/*"],
      "@server/*": ["./src/server/*"],
    },
  ...

in the vite.config.ts I put:

...
resolve: {
    mainFields: ['module'],
    alias: {
      '@core': path.resolve(__dirname, 'src/app/core'), // adjust the path according to your project structure
      '@components': path.resolve(__dirname, 'src/app/components'),
      '@pages': path.resolve(__dirname, 'src/app/pages'),
      '@environments': path.resolve(__dirname, 'src/environments'),
      '@server': path.resolve(__dirname, 'src/server'),
    },
  },
...

Please provide the exception or error you saw

[worker reload] Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@server/auth' imported from D:\Work\ddapp\dd\dist\.nitro\dev\index.mjs
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:887:9)
    at moduleResolve (node:internal/modules/esm/resolve:936:20)
    at defaultResolve (node:internal/modules/esm/resolve:1129:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)

Other information

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [ ] No

[AbdallahR99]

when I added

 plugins: [
    analog({
      nitro: {
        alias: {
          '@core': 'src/app/core',
          '@components': 'src/app/components',
          '@pages': 'src/app/pages',
          '@environments': 'src/environments',
          '@server': 'src/server',
        },
      },
    }),
  ],

I got this error: [nitro 11:54:22 AM] ERROR Error: Could not load src/server/auth/odic.client (imported by src/server/routes/auth/login.ts): ENOENT: no such file or directory, open 'D:\Work\ddapp\dd\src\server\auth\odic.client'

almost because of the missing .ts extension in the ts imports import { createOidcClient } from '@server/auth/odic.client';

[brandonroberts]

You can use a rollup plugin for this

https://www.npmjs.com/package/rollup-plugin-typescript-paths

installing this as a dev dependency, importing the typescriptPaths plugin, and configuring as:

analog({
  nitro: {
    rollupConfig: {
      plugins: [typescriptPaths({ tsConfigPath: 'tsconfig.base.json', preserveExtensions: true })]
    }
  }
})

[AbdallahR99]

@brandonroberts worked but I start find this warning "file:///D:/Work/ddapp/dd/node_modules/.pnpm/@analogjs+vite-plugin-nitro@1.0.2/node_modules/@analogjs/vite-plugin-nitro/src/lib/runtime/api-middleware.mjs" is imported by "virtual:#internal/nitro/virtual/server-handlers", but could not be resolved – treating it as an external dependency.

[brandonroberts]

@AbdallahR99 try with the latest release. We resolved some issues with Windows specifically

[ct5845]

Unforuntately getting the same error

Using version 1.3.0.

In fact just supplying "rollupConfig" causes this, (and removing it works again);

        nitro: {
          rollupConfig: {
          },

Then any call to a .server route fails.

[brandonroberts]

Ran into this also. Got a fix coming soon

[camiloux]

@brandonroberts, your fix worked! I've integrated it into my project, and now I'm able to import from @server/.... Here’s the configuration that’s working for me:

import {defineConfig} from 'vite';
import analog from '@analogjs/platform';
import { resolve } from 'path';
import {typescriptPaths} from "rollup-plugin-typescript-paths";

// https://vitejs.dev/config/
export default defineConfig(({mode}) => ({
  build: {
    target: ['es2020'],
  },
  resolve: {
    mainFields: ['module'],
    alias: {
      '@components': resolve(__dirname, 'src/app/components'),
      '@layout': resolve(__dirname, 'src/app/layout'),
      '@lib': resolve(__dirname, 'src/app/lib'),
      '@models': resolve(__dirname, 'src/models'),
      '@services': resolve(__dirname, 'src/app/services'),
      '@server': resolve(__dirname, 'src/server')
    }
  },
  plugins: [analog({
    vite: {
      inlineStylesExtension: 'scss',
    },
    nitro: {
      preset: 'node-server',
      rollupConfig: {
        plugins: [typescriptPaths({ tsConfigPath: 'tsconfig.json', preserveExtensions: true })]
      }
    },
  })],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['src/test-setup.ts'],
    include: ['**/*.spec.ts'],
    reporters: ['default'],
  },
  define: {
    'import.meta.vitest': mode !== 'production',
  },
}));

I also made sure to include the aliases directly in my tsconfig.json file rather than in tsconfig.base.json.