[Bug]: Not able to replace Dashboard with TSX component

[Paroca72]

Contact Details

No response

What happened?

I'm trying to replace the default Dashboard with a .tsx component/page.

Bug prevalence

Always

AdminJS dependencies version

package.json:

{
  "name": "adminjs",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "nodemon --config nodemon.json --exec node --no-warnings=ExperimentalWarning --loader ts-node/esm src/app.ts"
  },
  "dependencies": {
    "@adminjs/bundler": "^3.0.0",
    "@adminjs/express": "^6.1.0",
    "@adminjs/sequelize": "^4.1.1",
    "adminjs": "^7.8.1",
    "connect-session-sequelize": "^7.1.7",
    "cors": "^2.8.5",
    "express": "^4.19.2",
    "express-formidable": "^1.2.0",
    "express-session": "^1.18.0",
    "openai": "^4.48.2",
    "tedious": "^18.2.0",
    "tslib": "^2.6.3"
  },
  "devDependencies": {
    "@types/cors": "^2.8.17",
    "@types/express": "^4.17.21",
    "@types/express-session": "^1.18.0",
    "@types/node": "^20.14.2",
    "nodemon": "^3.1.3",
    "ts-node": "^10.9.2",
    "typescript": "^5.4.5"
  }
}

tsconfig.json:

{
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node"
  },
  "compilerOptions": {
    "outDir": "./built",
    "target": "esnext",
    "esModuleInterop": true,
    "jsx": "react",
    "declaration": true,
    "declarationDir": "./types",
    "emitDeclarationOnly": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "moduleResolution": "nodenext",
    "module": "nodenext",
    "baseUrl": ".",
    "types": [
      "node",
      "react"
    ],
    "typeRoots": [
      "node_modules/@types",
      "node_modules/@adminjs/design-system/vendor-types"
    ],
    "paths": {
      "react": [
        "node_modules/@types/react"
      ]
    },
    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "include": [
    "./src/**/*",
  ],
  "exclude": [
    "./node-modules",
  ]
}

What browsers do you see the problem on?

No response

Relevant log output

No response

Relevant code that's giving you issues

Here my index.tsx:

import { Box } from "@adminjs/design-system";
import React from "react";

// just some regular React component
const HomePage = () => {
    // State
    return (
        <Box>
            <center>
                <br />
                <br />
                <br />
                <img src="/images/logo.png" style={{ maxWidth: '50%' }} />
            </center>
        </Box>
    );
};

export default HomePage;

Here components.ts:

import { ComponentLoader } from "adminjs"
import path from "path";

const homePagePath = path.resolve("./src/components/home_page/index");
const componentLoader = new ComponentLoader();

const Components = {
    homePage: componentLoader.add("HomePage", homePagePath),
};

export { componentLoader, Components };

Here app.ts:

const options: AdminJSOptions = {
    version: { app: process.env.npm_package_version },
    componentLoader: componentLoader,
    resources: AdminJSSettings.resources,
    locale: AdminJSSettings.locale,
    branding: AdminJSSettings.branding,
    dashboard: { component: Components.homePage },
  };
  const admin = new AdminJS(options)

But the Dashboard is always the default one.
If I looking inside the .adminjs/bundle.js i not see listed my component or any changes:

(function () {
	'use strict';

	AdminJS.UserComponents = {};

})();

Thanks for your help

[Villva-vinoth]

Still the bug is not solve yet right ? I do encouter this issue

[AshotN]

Try using this before calling .listen()

admin.watch()

[niksad8]

for to solve this i just deleted the .adminjs folder and did a recompile using tsc that always solve this problem,
in my build command i just do a rm -r ./.adminjs && tsc