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

[harshagr64]

Getting the below error in trying to add upload file feature in my project. Error: Component "UploadShowComponent" has not been bundled, ensure it was added to your ComponentLoader instance (the one included in AdminJS options).

[dziraf]

Please share how you set up AdminJS and the upload feature

[harshagr64]

@dziraf, Thanks for responding.

Below is my model for file upload: `import mongoose from "mongoose";

const ColonySchema = new mongoose.Schema({ name: { type: String, required: true, }, location: { type: String, required: true, }, pincode: { type: mongoose.Schema.Types.ObjectId, ref: "MasterPincode", }, images: [String], isactive: { type: Boolean, required: true, default: true, }, description: String, created_at: { type: Date, default: Date.now(), }, updated_at: { type: Date, default: Date.now(), }, });

export default mongoose.model("Colony", ColonySchema); `

Below is my file where I have initialized admin js to upload files: `import AdminJSExpress from "@adminjs/express"; // import uploadFeature from "@adminjs/upload"; import uploadFeature from "@adminjs/upload"; import express from "express"; import AdminJS from "adminjs"; import mongoose from "mongoose"; import as AdminJSMongoose from "@adminjs/mongoose"; import app from "./app.js"; import userModel from "./model/user.js"; import colonyModel from "./model/colony.js"; import propertyModel from "./model/property.js"; import MasterPincodeModel from "./model/pincode.js"; import BuildingSchema from "./model/building.js"; import multer from "multer"; import path from "path"; import as url from "url"; import { ComponentLoader } from "adminjs"; // import

const dirname = url.fileURLToPath(new URL(".", import.meta.url)); app.use('/uploads', express.static('uploads')); app.use(express.static(path.join(dirname, "../public")));

const componentLoader = new ComponentLoader()

AdminJS.registerAdapter({ Resource: AdminJSMongoose.Resource, Database: AdminJSMongoose.Database, });

const localProvider = { bucket: "public/uploads", baseUrl: "/uploads", };

const port = process.env.PORT; const db_url = process.env.DB_URL; const Users = userModel; const Colony = colonyModel;

const adminJs = new AdminJS({ resources: [ { resource: Users }, { resource: Colony, options: { properties: { images: { type: "file" // isVisible: { list: false, show: true, edit: true, filter: false }, }, }, }, features: [ uploadFeature({ componentLoader, provider: { local: localProvider }, // multiple: true, properties: { key: "s3Key", bucket: "bucket", mimeType: "mime", }, validation: { mimeTypes: ["image/png"], }, }), ], }, { resource: MasterPincodeModel }, { resource: BuildingSchema }, { resource: propertyModel, options: { properties: { flats: { description: "No of Flats Available in Building (if type is flat)", }, }, }, }, ], rootPath: "/admin", // Path to the AdminJS dashboard. });

const router = AdminJSExpress.buildRouter(adminJs); app.use(adminJs.options.rootPath, router);

const run = async () => { mongoose.connect(db_url, { useNewUrlParser: true }); app.listen(port, () => { console.log("hello world"); console.log(Server is running on Port Number ${port}..............); }); };

run(); `

As I am new to node js, so don't have much experience on how to properly use nodejs, so help me in resolving the issues.

[harshagr64]

@dziraf were you able to find out any error in the code as why it is not working?

[dziraf]

You are adding componentLoader to @adminjs/upload feature which is correct, but you forgot to add componentLoader to AdminJS too. Basically, the component is added to ComponentLoader but AdminJS doesn't see that component loader.

[harshagr64]

@dziraf so how can I add ComponentLoader to AdminJs, can you give me a sample code for that?

[dziraf]

When you create AdminJS assign the same componentLoader instance:

import componentLoader from './path/to/your/componentLoader'

const admin = new AdminJS({
  componentLoader,
  // other config,
})

[harshagr64]

@dziraf Thanks for the solution, now its working. Really appreciate your help.

[tuananhcn]

import { ComponentLoader } from 'adminjs'; const componentLoader = new ComponentLoader() const adminJs = new AdminJS({ componentLoader, defaultTheme: dark.id, availableThemes: [dark, light, noSidebar], databases: [sequelize], rootPath: '/admin', resources: [{ resource: Product, options: { name: 'Product', navigation: { }, properties: { // Assuming 'image_url' is the field in your User model where the file path will be stored // Adjust the property names based on your User model's schema image_url: { isVisible: { list: true, filter: false, show: true, edit: true }, // components: { // edit: 'UploadEditComponent', // Reference the name used in componentLoader.add // }, }, }, }, features: [uploadFeature({ componentLoader, provider: { local: { bucket: 'public/images', baseUrl: "/images", } }, properties: { key: 'image_url', // Property in Product model to store the URL file: 'uploadImage', // Virtual field in AdminJS for file upload; doesn't have to match the model }, // mimeType: 'mimeType', uploadPath: (record, filename) => images/${filename}, // Just the filename; 'public/images' is set as the bucket validation: { mimeTypes: ['image/jpeg', 'image/png', 'image/gif'] } })], }, { resource: User, options: { name: 'User', navigation: { icon: 'User', }, properties: { quyen: { type: 'select', availableValues: [ { value: 0, label: 'User' }, { value: 1, label: 'Administrator' } ], }, // ...other property options } } }, { resource: Order, options: { name: 'Order', navigation: { icon: 'ShoppingCart', } } }, { resource: Review, options: { name: 'Review', navigation: { icon: 'Star' } } },],

}); i got the same issue but the solution not working.

[tbsantosDev]

@tuananhcn I just added adminjs.watch() at the end of my adminjs config file and it worked.

[manohar322028]

I got the same issue when I added custom components. It works when there are no custom components but as soon as I add some custom components, this error shows.

[Satyarshi]

@tuananhcn I just added adminjs.watch() at the end of my adminjs config file and it worked.

thanks now its working

[funkynick]

@tuananhcn I just added adminjs.watch() at the end of my adminjs config file and it worked.

you made my day! added this watcher and it works thank you so much