How to solve react-jsonschema-form problem?

Question

JavaScript

Good afternoon! Created a new application via react-create-app and trying to connect react-jsonschema-form. But I get an error something like this variable is already defined

Failed to compile.

./src/index.js
  Line 8:7:  Parsing error: Identifier 'Form' has already been declared

   6 | import Form from "@rjsf/core";
   7 | 
>  8 | const Form = JSONSchemaForm.default;
     |       ^
   9 | const schema = {
  10 |   title: "Test form",
  11 |   type: "string"

And if I rename it, I get this error

Failed to compile.

./src/index.js
  Line 8:14:  'JSONSchemaForm' is not defined  no-undef

Search for the keywords to learn more about each error.

or this error

index.jsx:9 Uncaught TypeError: Cannot read property 'default' of undefined

Here is the code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//import App from './App';
import * as serviceWorker from './serviceWorker';
import Form1 from "@rjsf/core";

const Form = JSONSchemaForm.default;
const schema = {
  title: "Test form",
  type: "string"
};

ReactDOM.render((
  <Form schema={schema} />
), document.getElementById("app"));

serviceWorker.unregister();

How to properly connect react-jsonschema-form?

Answer 1

1) When you import in this way import Form from "@rjsf/core";you are creating a new constant in the current scope. Then you try to create the constant again: const Form = JSONSchemaForm.default;.
2) 'JSONSchemaForm' is not definedappears because you imported the library under a different name.
Try like this. defaultpointing out is unnecessary.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//import App from './App';
import * as serviceWorker from './serviceWorker';
import Form from "@rjsf/core";

const schema = {
  title: "Test form",
  type: "string"
};

ReactDOM.render((
  <Form schema={schema} />
), document.getElementById("app"));

serviceWorker.unregister();