[Bug]: can't correctly create custom component when importing external lib

[clysss]

Contact Details

No response

What happened?

I'm trying to create a custom component using jsonforms lib. When I comment the jsonfoms call in the return (as in the sample code), everything goes fine and I see in log : 2024-06-16T21:37:56.342313743Z AdminJS watch 2024-06-16T21:37:56.372478350Z AdminJS is under localhost:8080/admin 2024-06-16T21:37:56.870898268Z Executing (default): SELECT 1+1 AS result 2024-06-16T21:37:57.117968255Z - Bundling files... 2024-06-16T21:37:57.441022456Z ✔ Finish bundling: 2 files and when I uncomment it, the bundling never goes on and i've in interface : when i try to see the item : Javascript Error Error: Component "MyInput" has not been bundled, ensure it was added to your ComponentLoader instance (the one included in AdminJS options). See development console for more details...

Bug prevalence

every time

AdminJS dependencies version

{ "name": "cy_42k_mvp", "version": "1.0.0", "main": "dist/server.js", "author": "", "license": "ISC", "type": "module", "scripts": { "dev": "ts-node-dev --transpile-only --inspect --ignore-watch node_modules src/server.ts", "build": "tsc", "start": "node --loader ts-node/esm src/server.ts" }, "dependencies": { "@adminjs/express": "^6.1.0", "@adminjs/sequelize": "^4.1.1", "adminjs": "^7.8.1", "bcrypt": "~5.0.1", "chai": "^4.3.10", "cors": "^2.8.5", "dotenv": "^16.0.1", "express": "^4.19.2", "jsonwebtoken": ">=9.0.0", "pg": "^8.11.5", "sequelize": "^6.37.3", "sequelize-cli": "^6.6.2", "swagger-jsdoc": "^6.2.8", "swagger-ui-express": "^5.0.0", "@jsonforms/core": "3.3.0", "@jsonforms/material-renderers": "3.3.0", "@jsonforms/react": "3.3.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@types/bcrypt": "~5.0.0", "@types/chai": "^4.3.11", "@types/cors": "^2.8.13", "@types/express": "^4.17.21", "@types/jsonwebtoken": "^9.0.1", "@types/mocha": "^10.0.6", "@types/node": "^20.14.2", "@types/supertest": "^2.0.16", "@types/swagger-jsdoc": "^6.0.4", "@types/swagger-ui-express": "^4.1.6", "@typescript-eslint/eslint-plugin": "^6.13.2", "chai": "^4.3.10", "eslint": "^8.55.0", "eslint-config-prettier": "^9.1.0", "eslint-config-standard-with-typescript": "^40.0.0", "eslint-plugin-import": "^2.29.0", "eslint-plugin-n": "^16.3.1", "eslint-plugin-prettier": "^5.0.1", "eslint-plugin-promise": "^6.1.1", "mocha": "^10.2.0", "prettier": "^3.1.0", "supertest": "^6.3.3", "ts-node": "^10.9.2", "ts-node-dev": "^2.0.0", "typescript": "^5.4.5" } }

What browsers do you see the problem on?

Firefox

Relevant log output

2024-06-16T21:37:56.342313743Z AdminJS watch
2024-06-16T21:37:56.372478350Z AdminJS is under localhost:8080/admin
2024-06-16T21:37:56.870898268Z Executing (default): SELECT 1+1 AS result
2024-06-16T21:37:57.117968255Z - Bundling files...
2024-06-16T21:37:57.441022456Z ✔ Finish bundling: 2 files

Relevant code that's giving you issues

import { allowOverride, Edit, EditPropertyProps, ShowPropertyProps} from 'adminjs';
import { FormGroup, FormMessage, Label, RichTextEditor, TextArea, Input } from '@adminjs/design-system';
import React, { FC, useMemo, useState, ReactElement } from 'react';
import { JsonForms } from '@jsonforms/react';
import {  materialCells,  materialRenderers} from '@jsonforms/material-renderers';
const MyInputComponent:FC<EditPropertyProps> = (props): ReactElement => {
  const schema = {
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1
    },
    "description": {
      "title": "Long Description",
      "type": "string"
    }
  },
  "required": ["name"]
  }
  const uischema={
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/name"
    },
    {
      "type": "Control",
      "scope": "#/properties/description",
      "options": {
        "multi": true
      }
    }
  ]
}
       
const initialData = {}
const { property, record, onChange } = props

  const [data, setData] = useState(initialData);
  return (
    <div>
/*    <JsonForms
      schema={schema}
      uischema={uischema}
      data={data}
      renderers={materialRenderers}
      cells={materialCells}
      onChange={({ data }) => setData(data)}
      />*/
yyyyy</div>
  );
}
export default MyInputComponent