Как решить проблему react-jsonschema-form?

Question

[Вадим Ягофаров]

Добрый день! Создал новое приложение через react-create-app и пытаюсь подключить react-jsonschema-form. Но вываливается ошибка что-то типа такая переменная уже определена

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"

А если переименую то получаю вот такую ошибку

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.

или вот такую ошибку

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

Вот код

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();

Как правильно подключить react-jsonschema-form?

Answer 1

[Андрей]

1) Когда вы импортируете таким образом import Form from "@rjsf/core"; вы создаете новую константу в текущей области видимости. Затем вы пытаетесь создать константу еще раз: const Form = JSONSchemaForm.default;.
2) 'JSONSchemaForm' is not defined появляется, так как вы импортировали библиотеку под другим именем.

Попробуйте так. default указывать ненужно.

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();