Open Paroca72 opened 1 month ago
No response
I'm trying to replace the default Dashboard with a .tsx component/page.
Always
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", ] }
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
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:
tsconfig.json:
What browsers do you see the problem on?
No response
Relevant log output
No response
Relevant code that's giving you issues
Here components.ts:
Here app.ts:
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:
Thanks for your help