[Bug]: can't correctly create custom component when importing external lib #1674
Comments
|
browser's console should display more detailed logs on what's wrong with jsonforms |
|
Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools react-dom.development.js:29840:16 BasePropertyComponent/Component<@https://xxx-ws.azurewebsites.net/admin/frontend/assets/app.bundle.js:23698:15 React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. react-dom.development.js:18687:14 |
|
(for easier reading : ) |
|
tsconfig : |
|
If I were to guess, I'd say it might be an issue with Material UI renderers since AdminJS doesn't use MUI. The error basically says that the component hasn't been built |
|
I'll try to test with another mui component to see if it fails
Adminjs just replied that:
Hi @clysss <https://jsonforms.discourse.group/u/clysss> , did you try
moving your schema definition either completely outside the component or
use React’s useMemo hook to avoid recreating it everytime?
I could imagine there being some endless re-rendering loop with the schema
being re-created on every re-render like in your code snippet above.
Do you have an idea where I should code that? Should I use usememo(schema)
during the call of <jsonforms>?
Thx
Le mar. 18 juin 2024, 10:34, Rafał Dzięgielewski ***@***.***>
a écrit :
… If I were to guess, I'd say it might be an issue with Material UI
renderers since AdminJS doesn't use MUI.
The error basically says that the component hasn't been built
—
Reply to this email directly, view it on GitHub
<#1674 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ANKVWKXIRRW3GLI5BA2YGRDZH7WLBAVCNFSM6AAAAABJM53G7OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNZVGUZDOMJUHA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
|
With button mui it works :
It needs around 2 minutes to build the 971 files but after the component is
correctly rendered.
When I put back the jsonforms, the message "bundling files" don't appear in
logs
Is there a way to start manually the bundling that I can see what's wrong?
Le mar. 18 juin 2024, 11:04, clysss ***@***.***> a écrit :
… I'll try to test with another mui component to see if it fails
Adminjs just replied that:
Hi @clysss <https://jsonforms.discourse.group/u/clysss> , did you try
moving your schema definition either completely outside the component or
use React’s useMemo hook to avoid recreating it everytime?
I could imagine there being some endless re-rendering loop with the schema
being re-created on every re-render like in your code snippet above.
Do you have an idea where I should code that? Should I use usememo(schema)
during the call of <jsonforms>?
Thx
Le mar. 18 juin 2024, 10:34, Rafał Dzięgielewski ***@***.***>
a écrit :
> If I were to guess, I'd say it might be an issue with Material UI
> renderers since AdminJS doesn't use MUI.
>
> The error basically says that the component hasn't been built
>
> —
> Reply to this email directly, view it on GitHub
> <#1674 (comment)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/ANKVWKXIRRW3GLI5BA2YGRDZH7WLBAVCNFSM6AAAAABJM53G7OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNZVGUZDOMJUHA>
> .
> You are receiving this because you authored the thread.Message ID:
> ***@***.***>
>
|
|
With button mui it works : Is there a way to start manually the bundling that I can see what's wrong? because 2024-06-18T20:34:39.0410673Z Connection... |
|
Try running the app with: Set it to at least 4096 and see if it helps. It looks like JSONForms or MUI exports lots of files which are bundled and the app runs out of memory during bundling. You can research if you can import files from their libraries so that tree shaking works |
|
still the same bug... even it's after a longer time ! |
|
update : after upgrading from 7 to 16go the server and give 12go to stack, it finaly works... |
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
Relevant code that's giving you issues
The text was updated successfully, but these errors were encountered: