jHipster 8.0.0 and 8.1.0 /admin/docs not working for Vue 3

[kevintanhongann]

Overview of the issue

Reproduce the error

Generate a Vue flavor jHipster project, use any JDL script you desire, generate the project and navigate to API (/admin/docs)

Related issues

N/A

Suggest a Fix

N/A

JHipster Version(s)

8.0.0

JHipster configuration

application {
  config {
    baseName example
    applicationType monolith
    packageName com.example
    authenticationType jwt
    devDatabaseType h2Memory
    prodDatabaseType postgresql
    clientFramework vue
    buildTool gradle
    cacheProvider ehcache
    enableHibernateCache true
  }
  entities *
}

Entity configuration(s) entityName.json files generated in the .jhipster directory

N/A

Browsers and Operating System

Ubuntu 23.04, Firefox

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

[kevintanhongann]

[kevintanhongann]

If there is a quick fix for this, do lemme know.

[anothergoodguy]

not sure if it's a similar issue, can you see if it's related to build options like stated at 23382

[mshima]

No reproducible. Next time please provide jhipster info so we can use from-issue command.

jhipster jdl app.jdl
./gradlew

and

jhipster  --defaults --client-framework vue --dev-database-type h2Memory --build gradle
./gradlew

Go to Administration/API.

[mshima]

Not reproducible.
Closing.

[kevintanhongann]

I was generating the app from a JDL script and it still doesn't work.

jhipster info

.yo-rc.json file

{
  "generator-jhipster": {
    "applicationIndex": 0,
    "applicationType": "monolith",
    "authenticationType": "jwt",
    "baseName": "selfStorage",
    "buildTool": "gradle",
    "cacheProvider": "ehcache",
    "clientFramework": "vue",
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "devServerPort": 9060,
    "enableTranslation": true,
    "entities": [
      "Facility",
      "Unit",
      "Tenant",
      "Lease",
      "Payment"
    ],
    "jhipsterVersion": "8.1.0",
    "languages": [
      "en",
      "ja",
      "th",
      "id",
      "zh-cn"
    ],
    "lastLiquibaseTimestamp": 1705681485000,
    "nativeLanguage": "en",
    "prodDatabaseType": "postgresql",
    "testFrameworks": [
      "cypress",
      "gatling"
    ]
  }
}

Environment and Tools

openjdk version "20.0.1" 2023-04-18
OpenJDK Runtime Environment Temurin-20.0.1+9 (build 20.0.1+9)
OpenJDK 64-Bit Server VM Temurin-20.0.1+9 (build 20.0.1+9, mixed mode, sharing)

git version 2.34.1

node: v18.16.0
npm: 9.8.1

Docker version 24.0.7, build afdd53b

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

Let me know if I missed anything.

To add, I was using the npm start command and Vue was starting at port 5173. I suppose that is the intended port for the vue 3 frontend?

[kevintanhongann]

From my investigation, it must be because Vue 3 didn't package/copy the swagger-ui properly based on the comparison that I was doing between the old jhipster 7(webpack.common.js) and the new jhipster 8 (vite.config.ts).

[kevintanhongann]

@mshima can you please verify that again?

[kevintanhongann]

@mraible @deepu105 please reopen this again. It's really broken.

[mshima]

I’ve tested again using main branch.
It worked as expected using vire-server or vite.

[soenkekrusche]

@kevintanhongann did you manage to solve the issue? I am having the exact same problem

[soenkekrusche]

I tried to play around with that again, and found a workaround/fix.
Might be a windows issue?

For the missing axios.min.js a normalizePath() did help.

For the missing swagger deps, I resolved the wildcarded path inside the viteStaticCopy src array (see picture)

@mshima I am not sure why this is happening, any idea?

[soenkekrusche]

This is my working config on windows now @kevintanhongann

const getFileFromRepo = (file: string) => {
    const res = existsSync(fileURLToPath(new URL(`../node_modules/${file}`, import.meta.url)))
        ? fileURLToPath(new URL(`../node_modules/${file}`, import.meta.url))
        : fileURLToPath(new URL(`./node_modules/${file}`, import.meta.url));
    return normalizePath(res);
};

viteStaticCopy({
            structured: false,
            targets: [
                {
                    src: [
                        // does NOT work
                        `${swaggerUiPath}/*.{js,css,html,png}`,
                        // DOES work
                        `${swaggerUiPath}/swagger-ui.js`,
                        `${swaggerUiPath}/swagger-ui-bundle.js`,
                        `${swaggerUiPath}/swagger-ui-es-bundle.js`,
                        `${swaggerUiPath}/swagger-ui-es-bundle-core.js`,
                        `${swaggerUiPath}/swagger-ui-standalone-preset.js`,
                        `${swaggerUiPath}/swagger-initializer.js`,
                        `${swaggerUiPath}/absolute-path.js`,
                        `${swaggerUiPath}/index.js`,
                        `${swaggerUiPath}/index.css`,
                        `${swaggerUiPath}/swagger-ui.css`,
                        `${swaggerUiPath}/oauth2-redirect.html`,
                        `${swaggerUiPath}/favicon-16x16.png`,
                        `${swaggerUiPath}/favicon-32x32.png`,

                        `!${swaggerUiPath}/**/index.html`,
                        getFileFromRepo('axios/dist/axios.min.js'),
                        normalizePath(fileURLToPath(new URL('./src/main/webapp/swagger-ui/index.html', import.meta.url)))
                    ],
                    dest: 'swagger-ui'
                }
            ]
        })

looks like f91d5f5 might be the cause?

[mshima]

@soenkekrusche that commit fixed a clean run of vite-server.
So it fixed this issue for non windows system.
You can see more info in this issue vladshcherbin/rollup-plugin-copy#68.

Check if this PR fixes the issue.