Using custom components with webpack

[Devin Kelly-Collins]

I'm using AdminJS within a NestJS application and having trouble using custom components. In addition to the standard nest js setup, I'm using webpack to enable hmr as described here: https://docs.nestjs.com/recipes/hot-reload. When I try the following to replace the dashboard component I get the error Given file "./dashboard.component", doesn't exist.

AdminModule.createAdmin({
  rootPath: '/admin',
  resources: [],
  dashboard: {
    component: AdminJS.bundle('./dashboard.component')
  }
})

I setup an example repo to show this issue here: https://gitlab.com/dkellycollins/nest-admin-example. Is there a recommend way to bundle custom component with this setup?

[Rafał Dzięgielewski]

Currently custom components have to be built via AdminJS internal tool as there are additional steps that it does, for example:

• all custom components are served via components.bundle.js, other javascript is served in separate bundle files
• custom components are assigned to window.AdminJS.UserComponents

In AdminJS v7 we will remove bundling from AdminJS packages and it will be managed by your own application, but this will take at least several months until it's complete.

[Devin Kelly-Collins]

I see. In that case I was able to get the above example to work by including the full path to the file and using path.resolve.

AdminModule.createAdmin({
  rootPath: '/admin',
  resources: [],
  dashboard: {
    component: AdminJS.bundle(path.resolve('./src/admin/dashboard.component'))
  }
})

I also had to make sure the original source files are included with the compiled files in my final build.

Thank you for help. Looking forward to the improvements in v7.