导入错误：“./App”不包含默认导出（导入为“App”）

Question

我正在尝试复制此库的演示： https://react-jsonschema-form.readthedocs.io/en/latest/

为了自动创建 forms，具体来说，我正在尝试以下示例：

为此，我正在执行以下步骤：

1）创建项目使用：npm init react-app formapp
2）安装de依赖：yarn add react-jsonschema-form

就在这一步之后，如果我将应用程序运行为： npm start

它有效，我得到：

3）我正在用代码覆盖 app.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

  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

Answer 2

就像MrPickles已经提到的那样，您可以按照他的指示摆脱命名问题。

对于另一个错误，问题是您没有在 app.js 中导出任何内容。

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

此外，您的 DOM 中没有带有app ID 的HTMLElement 。

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")} />
  );
}

现在在您的 index.js 中，您可以执行以下操作：

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

或者

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