Error: Component "RecordLink" and "RecordDifference" has not been bundled, ensure it was added to your ComponentLoader instance (the one included in AdminJS options).

[tbsantosDev]

hey guys, I'm stuck with this error when trying to implement loggerFeature in my project, does anyone have any idea how to resolve it?

Error 1 : Error: Component "RecordLink" has not been bundled, ensure it was added to your ComponentLoader instance (the one included in AdminJS options).

Error 2: Error: Component "RecordDifference" has not been bundled, ensure it was added to your ComponentLoader instance (the one included in AdminJS options).

[tbsantosDev]

adminjs

import AdminJs, { ComponentLoader } from 'adminjs'
import AdminJsExpress from '@adminjs/express'
import AdminJsSequelize from '@adminjs/sequelize'
import { sequelize } from '../database/index.js'
import { adminJsResources } from './resources/index.js'
import bcrypt from 'bcrypt'
import { User } from '../models/User.js'
//import { locale } from './locale.js'

const componentLoader = new ComponentLoader()

AdminJs.registerAdapter(AdminJsSequelize)

export const adminJs = new AdminJs({
componentLoader,
databases: [sequelize],
resources: adminJsResources(componentLoader),
rootPath: '/admin',
branding: {
companyName: 'My Company',
logo: '/logo.png',
theme: {
colors: {
primary100: '#006400',
primary80: '#008000',
primary60: '#008000',
primary40: '#228B22',
primary20: '#228B22',
}
}
}
})

CreateLoggerResource:

import { createLoggerResource } from "@adminjs/logger";
import { Log } from "../../models/Log.js";
import { ComponentLoader } from "adminjs";

const componentLoader = new ComponentLoader()

const logResourceOptions: any = {
componentLoader,
resource: Log,
featureOptions: {
propertiesMapping: {
recordTitle: "title", //field to store logged record's title
userIdAttribute: "id", //primary key currently logged user
},
},
};

export default createLoggerResource(logResourceOptions);

loggerFeature:

import importExportFeature from "@adminjs/import-export";
import loggerFeature from "@adminjs/logger";
import logResourceOptions from '../resources/log.js'

resource: logResourceOptions.resource,
options: logResourceOptions.options,
features: [
  importExportFeature({
    componentLoader,
  }),
  loggerFeature({
    componentLoader,
    propertiesMapping: {
      user: 'userId',
    },
    userIdAttribute: 'id',
  }),
],

},

[dziraf]

You must use the same Component Loader everywhere, if you create a separate instance in every file it won't work.

[tbsantosDev]

@dziraf, thank you very much for the answer, it really works.