[Bug]: AdminJS frontend assets fail to load when using pnpm due to sym-linked node_modules

[alihussain5]

Contact Details

ali@meetcaspian.com

What happened?

Hello!

We've discovered a bug as we were trying to deploy AdminJS on Nest 11. When loading localhost:3000/admin, we noticed all frontend assets (hosted at /admin/frontend/assets/...) were failing to load and we were met with a blank screen. This was happening whether we were trying to deploy via @adminjs/nestjs or @adminjs/express.

After digging into the adminjs package, we realized it was due to how the frontend assets were setup in utils/router/router.ts. Specifically this line:

adminjs/src/backend/utils/router/router.ts

Line 10 in 9c2ee7f

const ASSETS_ROOT = `${__dirname}/../lib/../../../frontend/assets/`

We are using pnpm with workspaces within our monorepo, and pnpm's symlinks is causing this ASSETS_ROOT variable to point completely incorrectly!

We were able to patch this in our repo by doing the following changes:

const ASSETS_ROOT = 'node_modules/adminjs/lib/frontend/assets/';

const resolveDesignSystemBundle = () => {
  return `node_modules/@adminjs/design-system/bundle.${NODE_ENV}.js`;
}

And this workaround now works for us! We're even able to use this in an ESM-only environment in Nest. Obviously this just works for us, so we'd want a more robust path dir solution in a PR but putting this up in case anyone is looking for a workaround.

Bug prevalence

Every deploy

AdminJS dependencies version

"@adminjs/design-system": "^4.1.1",
"@adminjs/express": "^6.1.1",
"@adminjs/nestjs": "^7.0.0",
"adminjs": "^7.8.17",

What browsers do you see the problem on?

All of them

Relevant log output

Relevant code that's giving you issues

const ASSETS_ROOT = `${__dirname}/../lib/../../../frontend/assets/`

const resolveDesignSystemBundle = (): string => {
  const require = createRequire(import.meta.url)

  return path.join(
    path.parse(require.resolve('@adminjs/design-system')).dir,
    `../bundle.${NODE_ENV}.js`,
  )
}