Using material ui and other third party libraries

[yackinn]

Describe the bug How can we add thir party libraries such as material ui to our custom components without blowing up the bundle size and exceeding 6 seconds load times on admin panel load?

Installed libraries and their versions

"@adminjs/design-system": "^2.2.1", "@adminjs/express": "^4.1.0", "@adminjs/mikroorm": "^1.1.0", "@adminjs/nestjs": "^4.0.0",

Expected behavior The laod time shouldn't exceed one second as it's usually the case with custom components that don't use material ui.

Config

pages: {
          'add_participants {
            label: 'Add participant'
            component: AdminJS.bundle(process.cwd() + '/apps/backend/src/pages/custom.tsx'),
            handler: async (req, res, context) => {
              return {};
            },
          },
        },               

Custom component files imports

import React from 'react';
import Input from '@adminjs/design-system/src/atoms/input';
import Box from '@adminjs/design-system/src/atoms/box/box';
import Header from '@adminjs/design-system/src/atoms/typography/header';
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
import axios from 'axios';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

We tried to use es-build to bundle to component ourselves. How do you add the components to adminjs though?

What's the correct way to work around this or solve it?

The components bundle takes 7s to load.

[dziraf]

When you start up the server, it should say something like:

✔ Finish bundling: 22 files

How many components is it in your case?

[yackinn]

It doesn't do that. We just see the default nestjs logs. Do we have to enable some sort of debug logs?

Edit: the custom bundler is disabled. We rely on component: AdminJS.bundle(process.cwd() + '/apps/backend/src/pages/custom.tsx'),

[Nest] 30217  - 08.04.2022, 11:21:25     LOG [NestFactory] Starting Nest application...
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [InstanceLoader] MikroOrmModule dependencies initialized +34ms
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [InstanceLoader] CaslModule dependencies initialized +1ms
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [InstanceLoader] PDFModule dependencies initialized +0ms
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [InstanceLoader] JwtModule dependencies initialized +1ms
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [InstanceLoader] ServeStaticModule dependencies initialized +0ms
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [info] MikroORM version: 5.1.1
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] ORM entity discovery started, using ReflectMetadataProvider
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity Booking
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity Coupon
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity Course
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity Event
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity Location
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity Medium
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity Participant
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity Branch
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity Rating
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity Snippet
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity User
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - processing entity OmputBaseEntity
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [discovery] - entity discovery finished, found 15 entities, took 43 ms
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [MikroOrm] [info] MikroORM successfully connected to database omput on postgresql://postgres:*****@localhost:5432
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [InstanceLoader] MikroOrmCoreModule dependencies initialized +45ms
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [InstanceLoader] AppModule dependencies initialized +0ms
te +0ms

...

[Nest] 30217  - 08.04.2022, 11:21:25     LOG [RouterExplorer] Mapped {/api/rating/:id, DELETE} route +0ms
[Nest] 30217  - 08.04.2022, 11:21:25     LOG [NestApplication] Nest application successfully started +23ms
[Nest] 30217  - 08.04.2022, 11:21:25     LOG 🚀 Application is running on: http://localhost:3333/api

[dziraf]

It should appear if you add:

if (process.env.NODE_ENV !== 'production') adminJs.watch()

somewhere after you instantiate AdminJS

[yackinn]

How do we get access to the adminjs instance when using nestjs?

I added the watch inside the node module package. It doesn't show the output. According to the debugger it's executed.

// node_modules/@adminjs/nestjs/src/admin.module.ts
...
public onModuleInit() {
    if ('shouldBeInitialized' in this.adminModuleOptions && !this.adminModuleOptions.shouldBeInitialized) {
      return;
    }

    const admin = new AdminJS(this.adminModuleOptions.adminJsOptions);
    admin.watch();

    const { httpAdapter } = this.httpAdapterHost;
    this.loader.register(admin, httpAdapter, {
      ...this.adminModuleOptions,
      adminJsOptions: admin.options,
    });
  }

[loagencydev]

this happens for me, as an example

'@modules/auth/hooks/useAbility' is imported by src/modules/crm/pages/sampleCrmPage.tsx, but could not be resolved – treating it as an external dependency
⠙ Bundling files...'@modules/auth/hooks/useAbility' is imported by src/modules/crm/pages/sampleCrmPage.tsx, but could not be resolved – treating it as an external dependency
⠼ Bundling files...No name was provided for external module '@modules/auth/hooks/useAbility' in output.globals – guessing 'useAbility'
✔ Finish bundling: 41 files

note that @modules/* is defined in my tsconfig.json and are used internally.

[dziraf]

This might have potentially been fixed with the release of version 7 of adminjs and version 4 of @adminjs/design-system. Please let us know if it is so, and if it the problem still exists we'll try to figure out a solution. Please note that other design systems aren't a priority for us currently.