[Bug]: Adminjs not working under express 5.0.1

[TakahashiNguyen]

Contact Details

[email protected]

What happened?

I was trying to access AdminJS's login page but it stuck at loading phase and keep request /admin/frontend/assets/components.bundle.js

Bug prevalence

when upgrade to express v4 to v5

AdminJS dependencies version

"@adminjs/express": "^6.1.1", "@adminjs/typeorm": "^5.0.1", "adminjs": "^7.8.15", "express": "^5.0.1",

What browsers do you see the problem on?

No response

Relevant log output

Relevant code that's giving you issues

[tomups]

Same problem, most likely due to Express 5 changes in route matching.

I have reported here as this is where the Express stuff is implementation https://github.com/SoftwareBrothers/adminjs-expressjs/issues/118

[leonakao]

Last month NestJs release the new version 11 that uses Express v5. This problem also affects new projects with Nest.

[bitpickle]

Last month NestJs release the new version 11 that uses Express v5. This problem also affects new projects with Nest.

Mine is broken after this update, still looking for a workaround :(

[ochui]

In Express 4, res.sendFile served hidden (dot) files by default. However, in Express 5 the behaviour changed—hidden files and files in hidden directories (like the default .adminjs folder) are not served unless explicitly allowed. This causes issues when AdminJS attempts to serve its bundled assets (for example, .adminjs/bundle.js) via Express 5, resulting in a NotFoundError.

A straightforward workaround is to tell AdminJS to use a non-hidden directory for its asset output instead of the default .adminjs folder. You can do this by setting the environment variable ADMIN_JS_TMP_DIR to a directory that does not begin with a dot (for example, dist/adminjs). This avoids the dotfile restrictions of Express 5.

For example, add the following to your environment configuration:

export ADMIN_JS_TMP_DIR=dist/adminjs

Or in your .env file:

ADMIN_JS_TMP_DIR=dist/adminjs

[bitpickle]

In Express 4, res.sendFile served hidden (dot) files by default. However, in Express 5 the behaviour changed—hidden files and files in hidden directories (like the default .adminjs folder) are not served unless explicitly allowed. This causes issues when AdminJS attempts to serve its bundled assets (for example, .adminjs/bundle.js) via Express 5, resulting in a NotFoundError.

A straightforward workaround is to tell AdminJS to use a non-hidden directory for its asset output instead of the default .adminjs folder. You can do this by setting the environment variable ADMIN_JS_TMP_DIR to a directory that does not begin with a dot (for example, dist/adminjs). This avoids the dotfile restrictions of Express 5.

For example, add the following to your environment configuration:

export ADMIN_JS_TMP_DIR=dist/adminjs

Or in your .env file:

ADMIN_JS_TMP_DIR=dist/adminjs

Wow, thank you ❤️ It worked

[tomups]

In Express 4, res.sendFile served hidden (dot) files by default. However, in Express 5 the behaviour changed—hidden files and files in hidden directories (like the default .adminjs folder) are not served unless explicitly allowed. This causes issues when AdminJS attempts to serve its bundled assets (for example, .adminjs/bundle.js) via Express 5, resulting in a NotFoundError.

A straightforward workaround is to tell AdminJS to use a non-hidden directory for its asset output instead of the default .adminjs folder. You can do this by setting the environment variable ADMIN_JS_TMP_DIR to a directory that does not begin with a dot (for example, dist/adminjs). This avoids the dotfile restrictions of Express 5.

For example, add the following to your environment configuration:

export ADMIN_JS_TMP_DIR=dist/adminjs Or in your .env file:

ADMIN_JS_TMP_DIR=dist/adminjs

Didn't work for me :(

With NestJS, I still get 404 not found when going to /admin if using @nestjs/platform-express v11, that uses Express 5, even when setting this env var.

If using v10 (that uses Express 4) it works fine.

[alihy49]

Any workaround for Nest 11?

[Overk1lls]

Still relevant, had to rollback to Nest@10 to use it.

[nazarpashkevich]

Hey! I ran into that problem where express-formidable (adminJs uses it under the hood to parse form) hangs on form requests in NestJS 11, because the form.parse from express-formidable gets stuck.

Turns out the issue is that NestJS 11 uses Express 5. If you have global body parsers (which NestJS does by default) running before express-formidable, they will consume the request body stream, so formidable can’t parse it and just waits forever.

I think this didn't happen in NestJS 10 with Express 4 because Express 4 handled body streams more loosely and allowed multiple parsers more easily.

The fix is to disable the global body parser in NestJS by creating the app with { bodyParser: false }, and then apply JSON/urlencoded parsers only on routes that need them (like /api), but not on admin routes that use formidable.

For example in my app I have all routes admin/* for adminJS and api/* for all other routes and solution is

// disable nest bodyParser
  const app = await NestFactory.create<NestExpressApplication>(AppModule, {
    bodyParser: false,
  });

// enable body parser only for some routes
  app.use('/api', express.json());
  app.use('/api', express.urlencoded({ extended: true }));

Hope this helps anyone stuck with this issue!

I’m still testing if this doesn’t break anything on the NestJS side, and I’m not sure if it can be fixed on the AdminJS side...

it might just be better to stop using formidable altogether and switching to something else

[salaarkhan-dev]

I am having issues with NestJS 11

http://localhost:8000/admin/frontend/assets/global.bundle.js (500 Internal Server Error)

versions: "@adminjs/express": "5.1.0" "@adminjs/nestjs": "5.1.1" "@adminjs/prisma": "3.0.0" "adminjs": "6.8.7"

[ZeroCho]

@salaarkhan-dev See my comment here