ошибка импорта: './App' не содержит экспорт по умолчанию (импортирован как 'App')

Question

Я пытаюсь воспроизвести демонстрацию этой библиотеки: https://react-jsonschema-form.readthedocs.io/en/latest/

Чтобы автоматизировать создание форм, в частности, я пытаюсь с этим примером:

Для этого я выполняю следующие шаги:

1) Создайте проект, используя: npm init response-app formapp
2) Установите зависимости: yarn add response-jsonschema-form

Сразу после этого шага, если я запустил приложение как: npm start

Он работает, и я получаю:

3) Я перезаписываю приложение. Js кодом:

import React from "react";
import Form from "react-jsonschema-form";

const Form = JSONSchemaForm.default;
const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: {type: "string", title: "Title", default: "A new task"},
    done: {type: "boolean", title: "Done?", default: false}
  }
};

const log = (type) => console.log.bind(console, type);

ReactDOM.render((
  <Form schema={schema}
        onChange={log("changed")}
        onSubmit={log("submitted")}
        onError={log("errors")} />
), document.getElementById("app"));

Теперь я при попытке запустить приложение, я получаю эту ошибку:

Failed to compile
./src/App.js
  Line 4:7:  Parsing error: Identifier 'Form' has already been declared

  2 | import Form from "react-jsonschema-form";
  3 | 
> 4 | const Form = JSONSchemaForm.default;
    |       ^
  5 | const schema = {
  6 |   title: "Todo",
  7 |   type: "object",
This error occurred during the build time and cannot be dismissed.

Итак, я прокомментировал строку номер четыре:

import React from "react";
import Form from "react-jsonschema-form";

//const Form = JSONSchemaForm.default;
const schema = {
  title: "Todo",
  type: "object",

И попробовал еще раз, затем я получил эту другую ошибку:

Failed to compile
./src/index.js
Attempted import error: './App' does not contain a default export (imported as 'App').

РЕДАКТИРОВАТЬ:

Это код индексного файла, который я использую:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

Answer 1

Как уже упоминалось MrPickles , вы можете избавиться от проблемы именования, следуя его инструкциям.

В случае другой ошибки проблема заключается в том, что вы ничего не экспортируете в своем приложении . js.

import App from './App'; // App or Default is not exported by App.js

Также у вас нет HTMLElement с идентификатором app в вашем DOM.

import React from "react";
import Form from "react-jsonschema-form";

const Form = JSONSchemaForm.default;
const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: {type: "string", title: "Title", default: "A new task"},
    done: {type: "boolean", title: "Done?", default: false}
  }
};

const log = (type) => console.log.bind(console, type);

// Export App
export default function App() {
  return (
    <Form schema={schema}
        onChange={log("changed")}
        onSubmit={log("submitted")}
        onError={log("errors")} />
  );
}

Теперь в вашем индексе. js вы можете сделать:

import App from './App'; // Default export

или

import { App } from './App'; // named export

Answer 2

  2 | import Form from "react-jsonschema-form"; // makes a variable "Form"
  3 | 
  4 | const Form = JSONSchemaForm.default; // so this is already declared on line 2

Вам необходимо изменить эфирную линию 2 или 4 с Form на somethingOtherThanForm