Eclipse/VScode can't find *.ts imports starting with @ alias in vue.js frontend

[yennor]

Overview of the issue

I've created a completely new project using jhipster 8.4.0 with a vue.js frontend. When opening the project under Linux in the newest Eclipse version (clean install, J2EE flavour) or Visual Studio Code (VSCodium, but should be the same) both complain that they can't find *.ts file imports which start using the @ alias. Building the projects work without problems, it's just the IDEs complaining. The hints under: https://www.jhipster.tech/configuring-ide/ don't help. (They seem to be a bit outdated anyway).

Those imports don't work (.ts files):

import { useAlertService } from '@/shared/alert/alert.service';

Imports ending with .vue work:

import JhiFooter from '@/core/jhi-footer/jhi-footer.vue';

Imports using relative paths work.

I've got several other vue.js projects, without jhipster, where I don't have those problems. The JHipster React and Angular frontends don't have that problem (They don't seem to use the @-alias anyway).

I've tried to fix it for quite some time, but I really can't find out, where's the error in the configuration.

Motivation for or Use Case

I would love to be able to use code completion in the IDE.

Reproduce the error

• Create a new jhipster monolith project using the CLI. Use all the defaults answers, besides for the frontend. Choose vue.js there.
• Open/Import the project root in Eclipse or VSCode.
• Open for example ./src/main/webapp/app/app.component.ts in the IDE

Related issues

Couldn't find any.

Suggest a Fix

I thought it would be an error with the includes or the path in ./tsconfig.app.json . But I couldn't figure out what the problem would be.

JHipster Version(s)

8.4.0

JHipster configuration

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "applicationType": "monolith",
    "authenticationType": "oauth2",
    "baseName": "testvue",
    "buildTool": "maven",
    "cacheProvider": "ehcache",
    "clientFramework": "vue",
    "clientTestFrameworks": [],
    "clientTheme": "none",
    "creationTimestamp": 1715205682894,
    "databaseType": "sql",
    "devDatabaseType": "postgresql",
    "devServerPort": 9060,
    "enableHibernateCache": true,
    "enableSwaggerCodegen": false,
    "enableTranslation": true,
    "entities": [],
    "feignClient": null,
    "jhipsterVersion": "8.4.0",
    "languages": [
      "en"
    ],
    "messageBroker": false,
    "microfrontend": null,
    "microfrontends": [],
    "nativeLanguage": "en",
    "packageName": "com.mycompany.myapp",
    "prodDatabaseType": "postgresql",
    "reactive": false,
    "searchEngine": false,
    "serverPort": null,
    "serverSideOptions": [],
    "serviceDiscoveryType": false,
    "syncUserWithIdp": null,
    "testFrameworks": [],
    "websocket": false,
    "withAdminUi": true
  }
}

Environment and Tools

openjdk version "17.0.11" 2024-04-16 OpenJDK Runtime Environment (build 17.0.11+9-Debian-1) OpenJDK 64-Bit Server VM (build 17.0.11+9-Debian-1, mixed mode, sharing)

git version 2.43.0

node: v20.13.0 npm: 10.5.2

Docker version 20.10.25+dfsg1, build b82b9f3

Browsers and Operating System

Debian Linux Testing

• [x] Checking this box is mandatory (this is just to show you read everything)

[yennor]

ok, I looked at it again, calmly. As it seems I've already found the resolution the day before, but in VSCode the Ts language server needs to be restarted manually so it notices some changes (Eclipse needs to be restarted completely)..... lost hours for nothing! The problem is in tsconfig.app.json

When the baseUrl is provided, then the path resolution need to be relative to the base url. so it shouldn't be

    "paths": {
      "@/*": ["src/main/webapp/app/*"]
    }

but

    "paths": {
      "@/*": ["./*"]
    }

Like that the IDEs are happy (Ignoring all the other type errors), and everyting can be build without problems.

I'll try to create a pull request.