導入錯誤：“./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