Circular dependencies #574
Description
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.
Description
Bug
Steps to Reproduce
This is a minimal use case:
import React from 'react' import SchemaField from 'react-jsonschema-form/lib/components/fields/SchemaField' import Form from 'react-jsonschema-form' console.warn( 'SchemaField.defaultProps.registry.fields.SchemaField', SchemaField.defaultProps.registry.fields.SchemaField ) const CustomSchemaField = function(props) { return ( <div id="custom"> <p>Yeah, I am pretty dumb.</p> <SchemaField {...props} /> </div> ); }; const fields = { SchemaField: CustomSchemaField }; const FormWithCustomSchemaField = () => ( <Form schema={{ type: 'object', properties: { title: { type: 'string', title: 'a title' } } }} fields={fields} onSubmit={() => {}} onChange={() => {}} > <span /> </Form> ) const NormalForm = () => ( <Form schema={{ type: 'object', properties: { title: { type: 'string', title: 'a title' } } }} onSubmit={() => {}} onChange={() => {}} > <span /> </Form> ) const App = () => ( <div> <FormWithCustomSchemaField /> <NormalForm /> </div> ) export default AppThe error is
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Form`. This is because of #387 + webpack/webpack#1788
Expected behavior
Should have no error.
Actual behavior
An error, because of undefined SchemaField.
require("./components/fields") = { ArrayField: () => () /* component */, ..., SchemaField: undefined }Version
from v0.41.2 to latest (v0.48.0)
Proposal solution
Setting default registry lazily, when react components are instanced, not when they are created.
// utils.js export function getDefaultRegistry() { return { fields: require("./components/fields").default, widgets: require("./components/widgets").default, definitions: {}, formContext: {}, }; } // SchemaField.js SchemaField.defaultProps = { uiSchema: {}, errorSchema: {}, idSchema: {}, registry: null, disabled: false, readonly: false, autofocus: false, }; function SchemaFieldRender(props) { const { uiSchema, errorSchema, idSchema, name, required, registry = getDefaultRegistry() } = props; // do other things }If it's ok, I will create a PR.