import error: './App' does not contain a default export (imported as 'App')

Question

I´m trying to replicate the demo of this library: https://react-jsonschema-form.readthedocs.io/en/latest/

To automate the creation of forms, specifically, I'm trying with this example:

For that I'm following these steps:

1) Create a project using: npm init react-app formapp
2) Install de dependencies: yarn add react-jsonschema-form

Just after this step, if I run the app as: npm start

It works and I get:

3) I'm overwriting app.Js with the code:

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

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

You need to change ether line 2 or 4 from Form to somethingOtherThanForm

Answer 2

Like already mentioned by MrPickles you can get rid of the naming issue by folloiwing his instructions.

For the other error the problem is that you don't export anything in your 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.

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:

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

or

import { App } from './App'; // named export