adminjs
adminjs copied to clipboard
SoftwareBrothers
AdminJS v7 - feedback, urgent issues, questions, discussions
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 also includes our new Themes feature. If you would like to see themes in action, use one of these credentials to sign in:
-
[email protected] / password- a dark theme -
[email protected] / password- a theme which uses custom components to remove the sidebar and instead move resources to the top bar -
[email protected] / 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.
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.
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.
https://github.com/nestjs/nest/issues/7021
Do you have any solution for that?
@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.
@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"
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/
TypeError: Unknown file extension ".json"
Getting this error in adminjs 7 package with nestjs
Can you show full error log? This could be Nest issue since json imports work fine with every other framework I tried.
TypeError: Unknown file extension ".json" for E:\application\admin-mode\node_modules\adminjs\lib\locale\de\translation.json
Node version: v16.14.0
I am stuck with this issue after upgrading to 7 both themes and typeorm is not detecting though in node_modules it exist
@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
[BUG] iam new to Adminjs idk if this is worth reporting iam using mongoose when i edit field with population this happend on dark theme its not visible
light theme
dark theme
[BUG] iam new to Adminjs idk if this is worth reporting iam using mongoose when i edit field with population this happend on dark theme its not visible
light theme
dark theme
Yes, this is a bug. Thank you for reporting, I passed it up.
@dziraf is this how I will register the adapter for TypeORM on nestJS?
The registerAdapter fragment should be somewhere else, even outside of bootstrap function.
After migration to v7, I always get an error "You have to implement action component for your Action" for custom resource action without component. Something was changed with that, or that's just a bug 😄 ?
test: {
actionType: 'resource',
component: false,
handler: () => {
return {
notice: {
message: 'Success,
type: 'success',
},
};
},
},
Edit: I created PR for that 😊
I am creating a bundle in CI/CD pipeline after upgrading to 7, I am getting the following error for the image , any help?
@mickyarun you need to add the componentLoader instance to the options object of the upload feature instance. Like stated in the error.
@ddresch I have added it already, this is happening only if node_env = production
import {componentLoader} from "../../../admin/components.js";
uploadFeature({ componentLoader, provider: {aws: {region: AWS_REGION, bucket: MERCHANT_OFFER_S3_BUCKET_NAME}}, validation: {mimeTypes: ["image/png", "image/jpg", "image/jpeg", "image/svg+xml", "image/webp"]}, uploadPath: (record, filename) =>integrations/${record.id()}/${filename}, properties: { file: "integrationFile", key: "integrationImage", filePath: "integrationFilePath", bucket: MERCHANT_OFFER_S3_BUCKET_NAME } })
My component file
`import {ComponentLoader} from "adminjs";
import path from "path";
import * as url from "url";
const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
export const componentLoader = new ComponentLoader();
export const add = (url: string, componentName: string): string => componentLoader.add(componentName, path.join(__dirname, url));
export const CashbackQRCode = add("components/cashbackqrcode", "CashbackQRCode");`
This is my bundle script
`import {componentLoader} from "../admin/components.js";
import {bundle} from "@adminjs/bundler";
const files = await bundle({
componentLoader,
destinationDir: "./.adminjs/"
});`
Hi! Experiencing the very same issue as @mickyarun has just reported.
// imports
// ...
import encryptPassword from '@adminjs/passwords'
const componentLoader = new ComponentLoader()
const resources = Prisma.dmmf.datamodel.models.map((model) => {
if (model.name === 'User') {
return {
resource: { client, model },
options: {},
features: [
encryptPassword({
properties: {
encryptedPassword: 'password',
password: 'newPassword',
},
hash,
componentLoader,
}),
],
}
}
return {
resource: { client, model },
options: {},
}
})
const admin = new AdminJS({ resources, componentLoader })
@dziraf Any help on the above issue, its happening only in production with ADMIN_JS_SKIP_BUNDLE
@mickyarun If you use @adminjs/bundler, did you set assetsCDN in AdminJS object?
@SOULPWRD is an entry file generated in .adminjs folder when you start the server?
@dziraf
I hope this message finds you well. I am writing to inquire about the progress on resolving the issue detailed in https://github.com/SoftwareBrothers/adminjs/issues/1347
While I understand that this bug may be deemed less significant, and potentially tedious to address, I was hoping that you could kindly provide me with an estimated timeframe for a resolution.
As a temporary workaround, we can turn Chrome's autocomplete feature off. However, it would be highly appreciated if an option to address this issue could be implemented as soon as possible.
If it is not possible for you to address this issue within a reasonable timeframe, please let me know if you would welcome a Pull Request from me to resolve the issue.
Thank you for your time and efforts on this matter.
[BUG] iam new to Adminjs idk if this is worth reporting iam using mongoose when i edit field with population this happend on dark theme its not visible
light theme
dark theme
Fixed in https://github.com/SoftwareBrothers/adminjs/pull/1495
Login Page stopped to show errors, e.g in case of incorrect credentials. You can try to use wrong credentials in the demo app, it's reproducing. https://demo.adminjs.co/admin/login
[BUG] idk if iam doing something wrong or if its specfic to version 7 or not
i am using mongooes adapter
i have a field name idAuthor Refrence to "user" collection
but when i name it idAuthor it doenst show me dropdown and when i rename it to author it show dropdown
is there a way i can keep idAuthor with dropdown
assetsCDN
No I didn't added, all generated files are in .adminjs folder, still I am not able to solve this issue. @dziraf tried adding assetsCDN with all the files components.bundle.js, app.bundle.js,global.bundle.js,design-system.bundle.js still same. The issue is in @adminjs/bundler only, if don't set ADMIN_JS_SKIP_BUNDLE="true" and copy that bundle file to public folder and add the path in assetsCDN , then run with ADMIN_JS_SKIP_BUNDLE="true" its working. so @adminjs/bundler not bundling default plugins
[BUG] custom actions with component: false, still show a error page to implement component
Have taken the latest v7.0.6
The handler associated with the action is called but this page also pops up
Hi, something is wrong with the nested translations
i18next::translator: missingKey pl translation properties.isActive.true Yes
I have this key in my translations:
The column header in the table translates correctly, but the translation in the records is missing:
