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

Question

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

要自动创建表单，具体来说，我正在尝试以下示例：

为此，我正在按照以下步骤操作：

1）使用以下命令创建一个项目：npm init react-app formapp
2）安装依赖项：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中也没有ID为HTMLElement的{​​{1}}。

app

现在在index.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);

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

或

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