Question

我正在使用Prisma，Apollo Client，GraphQL-yoga开发一个简单的React App。在跟随this tutorial about react-apollo-form时，我遇到了这个问题。

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

我的树

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;

我检查并检查了我的进口货，但找不到解决方案。问题是否与.ts文件有关？我确定我会迷失在一杯水中。

更新：还有另一个问题：在ApplicationForm.ts上，ApolloFormMutationNames突出显示为“找不到名称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

您是否尝试从ApplicationForm导入中删除括号？查看其他示例，他们没有添加括号。参见this GitHub作为示例。链接文件将导入TypeScript文件，该文件的目录模式与您的相似。

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

Answer 3

如vitomadio之前所述，您不需要使用花括号{}，因为文件中具有默认导出功能。

import ApplicationForm from "../forms/ApplicationForm";应该可以解决您的问题。

它将说明何时需要使用花括号以及何时需要省略花括号

When should I use curly braces for ES6 import?

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

3 个答案: