Circular Dependencies in @rjsf\core when using Rollup

[shixish]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

Rollup is reporting @rjsf\core having multiple circular dependencies:

Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\fields\index.js -> node_modules\@rjsf\core\dist\es\components\fields\ArrayField.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\fields\index.js -> node_modules\@rjsf\core\dist\es\components\fields\BooleanField.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\fields\index.js -> node_modules\@rjsf\core\dist\es\components\fields\MultiSchemaField.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\fields\index.js -> node_modules\@rjsf\core\dist\es\components\fields\NumberField.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\fields\index.js -> node_modules\@rjsf\core\dist\es\components\fields\ObjectField.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\fields\index.js -> node_modules\@rjsf\core\dist\es\components\fields\SchemaField.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\fields\index.js -> node_modules\@rjsf\core\dist\es\components\fields\StringField.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\widgets\index.js -> node_modules\@rjsf\core\dist\es\components\widgets\AltDateWidget.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\widgets\index.js -> node_modules\@rjsf\core\dist\es\components\widgets\CheckboxWidget.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\widgets\index.js -> node_modules\@rjsf\core\dist\es\components\widgets\DateTimeWidget.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\widgets\index.js -> node_modules\@rjsf\core\dist\es\components\widgets\FileWidget.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\widgets\index.js -> node_modules\@rjsf\core\dist\es\components\widgets\RangeWidget.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\widgets\index.js -> node_modules\@rjsf\core\dist\es\components\widgets\SelectWidget.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\components\widgets\index.js -> node_modules\@rjsf\core\dist\es\components\widgets\UpDownWidget.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\utils.js -> node_modules\@rjsf\core\dist\es\validate.js -> node_modules\@rjsf\core\dist\es\utils.js
Circular dependency: node_modules\@rjsf\core\dist\es\index.js -> node_modules\@rjsf\core\dist\es\withTheme.js -> node_modules\@rjsf\core\dist\es\index.js

The system still seems to be working as far as I can tell so far, but I've seen such errors break things in the past so I find it concerning. I expect most people are using webpack to compile their code, so I suspect this error is only showing up when using Rollup.

I snooped around at the code and these circular dependencies do seem to be real, though I'm not sure what kind of impact it's actually having.

Steps to Reproduce

I'm using the Material UI plugin like so:

import MuiForm from '@rjsf/material-ui';

I'm not sure what else may be relevant here...
I'm using gulp-better-rollup, @rollup/plugin-typescript, @rollup/plugin-commonjs, @rollup/plugin-node-resolve, @rollup/plugin-json when compiling with rollup.

Expected behavior

Rollup should compile the code without finding any circular dependencies within @rjsf's code.

Actual behavior

Rollup is complaining about the circular dependencies whenever recompiling the React code.

Version

"@rjsf/core": "^2.5.1",
"@rjsf/material-ui": "^2.5.1",
"rollup": "^2.45.2",
"@rollup/plugin-commonjs": "^15.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"@rollup/plugin-typescript": "^6.1.0",
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",

You can usually get this information in your package.json or in the file URL if you're using the unpkg one.

[shixish]

I just switched to esbuild (which is sick) and the error isn't showing up anymore... 🤷‍♂️

[apirogov]

I have the same (or a very similar) problem! Even though it still compiles somehow, it is quite annoying to see this error in the logs all the time. Would be great if something could be done about that!

[AlexIII]

This needs to be fixed

[epicfaace]

Can you help fix it? 🙂

[AlexIII]

Oh, I don't actually understand the cause of the problem... Just wanted to point out that it's still present and reproducible.
Sorry, if that came out rude.

[lifan0127]

It seems the getDefaultRegistry function is causing the circular deps for the first 14 warnings related to fields and widgets.

Perhaps we just need to move the function to a different file?

https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/core/src/utils.js#L81

[epicfaace]

@nickgros is working on fixing this issue in #2799

[heath-freenome]

Fixed in the v5 beta, see the 5.x migration guide