AdminJS v7 - feedback, urgent issues, questions, discussions

[dziraf]

This is a thread to aggregate all questions/feedback/urgent bugs/discussions related to the recently released version 7.

Feel free to share your ideas or let us know about any issues you're facing related to migration or usage.

What's new in version 7
describes the largest changes in version 7.

Migration Guide will help you migrate your project to version 7.

Demo Application

Demo application also includes our new Themes feature. If you would like to see themes in action, use one of these credentials to sign in:

• dark@example.com / password - a dark theme
• no-sidebar@example.com / password - a theme which uses custom components to remove the sidebar and instead move resources to the top bar
• custom@example.com / password - an example of a custom theme which you can build yourself in your own project (source code)

If you notice that parts of our documentation are outdated or unclear, please share that in this thread as well.

[ddresch]

https://www.npmjs.com/package/@adminjs/mongoose the docs are wrong - still showing require statements.

import { Database as MongooseDatabase, Resource as MongooseResource } from '@adminjs/mongoose';

Using this, like in the new example app.

[mszula]

Great work guys!

I'm really in favor of moving to ESM-only but I feel like one thing hasn't been thought through. It's cooperation with NestJS which still uses CJS and has no plans to move to ESM.

nestjs/nest#7021

Do you have any solution for that?

[dziraf]

@mszula until Nest.js moves to ESM or starts dual packaging, you will either have to set up AdminJS express/fastify way or use dynamic imports:

src/app.module.ts

import { Module } from '@nestjs/common';

import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    import('@adminjs/nestjs').then(({ AdminModule }) =>
      AdminModule.createAdminAsync({
        useFactory: () => ({
          adminJsOptions: { rootPath: '/' },
        }),
      }),
    ),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

tsconfig.json

{
  "compilerOptions": {
    // ...
    "moduleResolution": "nodenext"
  }
}

Instead of import(...).then(...) in app.module.ts you can just set it up Express way in main.ts:

import { NestFactory, HttpAdapterHost } from '@nestjs/core';

import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const AdminJS = await import('adminjs');
  const AdminJSExpress = await import('@adminjs/express');

  const expressApp = app.get(HttpAdapterHost).httpAdapter;
  const admin = new AdminJS.default({});

  expressApp.use(
    admin.options.rootPath,
    AdminJSExpress.default.buildRouter(admin),
  );

  await app.listen(3000);
}
bootstrap();

Note that these changes still rely on you not actually updating to ESM, so you will have to await import(<any adminjs package>) to have it work or just import CJS versions.

As for whether it is possible to still set it up Nest-way - maybe, I don't know. It should be in the interest of NestJS maintainers to proceed with that migration because we cannot impede our own product's development based on their choice of not supporting ESM. Technically ESM projects should be able to import CJS packages, but it doesn't seem to be the case here.

[dziraf]

@ddresch Have you managed to fix your problem? From what I can see you just need to make changes to your tsconfig.json:

"moduleResolution": "nodenext",
"module": "nodenext",
"target": "esnext"

[ddresch]

Yes – I fixed all my issues now. Thanks for your feedback!

[Aladinndevolpment]

TypeError: Unknown file extension ".json"

[dziraf]

TypeError: Unknown file extension ".json"

import someJson from './path/to/some.json' assert { type: 'json' }

or use alternatives: https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules-node-js/

[Aladinndevolpment]

TypeError: Unknown file extension ".json"

Getting this error in adminjs 7 package with nestjs

[dziraf]

Can you show full error log? This could be Nest issue since json imports work fine with every other framework I tried.

[Aladinndevolpment]

TypeError: Unknown file extension ".json" for E:\application\admin-mode\node_modules\adminjs\lib\locale\de\translation.json

Node version: v16.14.0

[dziraf]

@Aladinndevolpment Looks like type assertions are supported from Node 17+

[mickyarun]

I am stuck with this issue after upgrading to 7 both themes and typeorm is not detecting though in node_modules it exist

[dziraf]

@mickyarun This is the same problem @ddresch had, I think you just have to add:

"moduleResolution": "nodenext",
"module": "nodenext",
"target": "esnext"

to your tsconfig.json

[aeroldb]

@dziraf
is this how I will register the adapter for TypeORM on nestJS?