复现React JSON Schema Form示例遇重复声明与默认导出错误

咱们一步步来解决你遇到的这两个编译错误：

1. 解决"Identifier 'Form' has already been declared"错误 #

这个错误是因为你重复声明了Form变量：你先通过import Form from "react-jsonschema-form";导入了组件，紧接着又写了const Form = JSONSchemaForm.default;，这在JavaScript里是不允许的——同一个作用域不能有同名的变量声明。

实际上，react-jsonschema-form的默认导出就是Form组件，所以你完全不需要那行额外的赋值语句，直接用导入的Form即可。

2. 解决"'./App' does not contain a default export"错误 #

你的index.js是按照Create React App的默认配置，期望从./App导入一个默认导出的组件，但你修改后的App.js直接用ReactDOM.render渲染内容，没有导出任何组件，这就导致了导入失败。

我们需要把App.js改成标准的React组件结构，导出默认的App组件。

修正后的完整App.js代码 #

import React from "react";
import Form from "react-jsonschema-form";

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

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

export default App;

关键修改点说明 #

• 删掉了重复的const Form = JSONSchemaForm.default;语句，直接使用导入的Form组件
• 把原来的ReactDOM.render逻辑改成了定义App函数组件，返回表单元素
• 添加了export default App;，让index.js能正确导入并渲染这个组件

你的index.js代码不需要做任何修改，保持原样即可。现在重新运行npm start，项目就能正常启动，你也能看到自动生成的Todo表单了。

内容的提问来源于stack exchange，提问作者Luis Ramon Ramirez Rodriguez