反应：找不到模块：无法解决答案

【问题标题】：React: Module not found: Can't resolve反应：找不到模块：无法解决
【发布时间】：2018-12-27 16:33:28
【问题描述】：

我正在使用 Prisma、Apollo Client、GraphQL-yoga 开发一个简单的 React 应用程序。在关注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";

【问题讨论】：

标签： reactjs typescript import

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您是否尝试从 ApplicationForm 导入中删除括号？查看其他一些示例，他们没有添加括号。以thisGitHub 为例。链接的文件导入一个 TypeScript 文件，其目录模式与您的类似。

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

【讨论】：

【解决方案3】：

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

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

它将解释何时需要使用花括号以及何时需要省略它们

When should I use curly braces for ES6 import?

【讨论】：

import client from "../index"; 尝试在这里使用带括号的github.com/wittydeveloper/react-apollo-form/wiki/…
Visual Studio 代码给了我“索引没有导出的成员客户端”。这不是真的，因为 inex 最后有“导出默认客户端；”
我在导入中添加了“.ts”：“import ApplicationForm from "../forms/ApplicationForm.ts";" ...这是正确的吗？
你不需要这样做。 create-react-app 会自动为您使用webpack。您肯定在某处搞砸了导入/导出但由于我们看不到您的所有文件，您只需要检查所有内容并确保您在任何地方都正确导入。