反应：找不到模块：无法解析

Question

I'm developing a simple React App with Prisma, Apollo Client, GraphQL-yoga. While following this tutorial about react-apollo-form I encountered this problem.

./src/components/CreateEntry.js
Module not found: Can't resolve '../forms/ApplicationForm' in 'C:\Users\massi\Desktop\sandbox\erbar10\erbar10\src\components'

My tree

CreateEntry.js

import React, { Component } from "react";
import { withApollo } from "react-apollo";
import gql from "graphql-tag";
import { ApplicationForm } from "../forms/ApplicationForm";

const CREATE_DRAFT = gql`
  mutation createDraft($name: String!) {
    createDraft(name: $name, scientificName: $scientificName, file: $file) {
      id
      name
      scientificName
    }
  }
`;

class CreateEntry extends Component {
  render() {
    return (
      <ApplicationForm
        title="Entry Form"
        liveValidate={true}
        config={{
          mutation: {
            name: "createDraft",
            document: CREATE_DRAFT
          }
        }}
        data={{}}
        ui={{}}
      />
    );
  }
}

export default withApollo(CreateEntry);

ApplicationForm.ts

import * as React from "react";
import { configure } from "react-apollo-form";
import client from "../index";

const jsonSchema = require("./apollo-form-json-schema.json");

const ApplicationForm = configure<ApolloFormMutationNames>({
  client: client as any,
  jsonSchema
});

export default ApplicationForm;

I checked and checked my imports but I cannot find a solution. Is the problem relative to the .ts file? I'm sure I'm losing myself in a glass of water.

---

Update: There is also another problem: on ApplicationForm.ts ApolloFormMutationNames is highlighted with "Cannot find name ApolloFormMutationNames".

mutations.d.ts

/* this file is generated, do not edit and keep it in tsconfig.rootDir scope! */

declare type ApolloFormMutationNames =
  | "createDraft"
  | "deleteEntry"
  | "publish"
  | "setToBeReviewed";

Answer 1

只需删除导入中的ApplicationForm括号即可。

import ApplicationForm from "../forms/ApplicationForm";

Answer 2

Did you try removing the brackets from the ApplicationForm import? Looking at some other examples they didn't add brackets. See this GitHub as an example. The linked file imports a TypeScript file with a directory pattern similar to yours.

import ApplicationForm from "../forms/ApplicationForm";

Answer 3

As vitomadio said before, you don't need to use curly braces {} because you have default export in your file.

import ApplicationForm from "../forms/ApplicationForm"; should fix your problem.

it will explain when you need to use curly braces and when you need to omit them

When should I use curly braces for ES6 import?