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

【问题标题】：import error: './App' does not contain a default export (imported as 'App')导入错误：“./App”不包含默认导出（导入为“App”）
【发布时间】：2020-06-19 11:28:09
【问题描述】：

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

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

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

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

【问题讨论】：

你能提供你的 index.js 吗？看起来您通过 import App from './app.js' 之类的方式导入了上述脚本；我对吗？但你不会从你的 app.js 中导出 App
@BastianFießinger 刚刚添加

标签： javascript reactjs forms

【解决方案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

【讨论】：

【解决方案2】：

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

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

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

另外，您的 DOM 中没有 ID 为 app 的 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

【讨论】：