[Bug]: Not able to replace Dashboard with TSX component
Paroca72 opened this issue · comments
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