[英]import error: './App' does not contain a default export (imported as 'App')
I´m trying to replicate the demo of this library: https://react-jsonschema-form.readthedocs.io/en/latest/我正在尝试复制此库的演示: https://react-jsonschema-form.readthedocs.io/en/latest/
To automate the creation of forms, specifically, I'm trying with this example:为了自动创建 forms,具体来说,我正在尝试以下示例:
For that I'm following these steps:为此,我正在执行以下步骤:
1) Create a project using: npm init react-app formapp 1)创建项目使用:npm init react-app formapp
2) Install de dependencies: yarn add react-jsonschema-form 2)安装de依赖:yarn add react-jsonschema-form
Just after this step, if I run the app as: npm start就在这一步之后,如果我将应用程序运行为: npm start
It works and I get:它有效,我得到:
3) I'm overwriting app.Js with the code: 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"));
Now I when I try to start the app I get this error:现在,当我尝试启动应用程序时,出现此错误:
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.
So I commented line number four:所以我评论了第四行:
import React from "react";
import Form from "react-jsonschema-form";
//const Form = JSONSchemaForm.default;
const schema = {
title: "Todo",
type: "object",
And tried again, then I got this other error:又试了一次,然后我得到了另一个错误:
Failed to compile
./src/index.js
Attempted import error: './App' does not contain a default export (imported as 'App').
EDIT:编辑:
This is the code of the index file I'm using:这是我正在使用的索引文件的代码:
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();
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
You need to change ether line 2 or 4 from Form
to somethingOtherThanForm
您需要将以太线 2 或 4 从
Form
更改为somethingOtherThanForm
Like already mentioned by MrPickles you can get rid of the naming issue by folloiwing his instructions.就像MrPickles已经提到的那样,您可以按照他的指示摆脱命名问题。
For the other error the problem is that you don't export anything in your app.js.对于另一个错误,问题是您没有在 app.js 中导出任何内容。
import App from './App'; // App or Default is not exported by App.js
Also you don't have a HTMLElement
with the ID of app
in your DOM.此外,您的 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")} />
);
}
Now in your index.js you can either do:现在在您的 index.js 中,您可以执行以下操作:
import App from './App'; // Default export
or或者
import { App } from './App'; // named export
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.