React: Module not found: Can't resolve

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

score 0 · Answer 1 · answered Dec 27 '18 at 16:47

0

Just remove ApplicationForm courly braces in your import.

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

answered Dec 27 '18 at 16:47

vitomadio

1,140
8
14

score 0 · Answer 2 · answered Dec 27 '18 at 16:48

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

score 0 · Answer 3 · answered Dec 27 '18 at 16:54

0

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?

answered Dec 27 '18 at 16:54

Ar2zee

410
1
4
12

`import client from "../index";` try to use like here with brackets https://github.com/wittydeveloper/react-apollo-form/wiki/configure-your-%22Form-component%22 – Ar2zee Dec 27 '18 at 17:13
Visual studio code gives me "index has no exported member client". It's not true since inex has at the end 'export default client;' – Massimo Variolo Dec 27 '18 at 17:17
I've added ".ts" on the import: "import ApplicationForm from "../forms/ApplicationForm.ts";" ... is this the right thing? – Massimo Variolo Dec 27 '18 at 17:31
You don't need to do that. `create-react-app` will do it automatically for you with `webpack`. You messed up with import/export somewhere for sure But since we don't see all your files you just need to check everything and make sure you doing import everywhere right. – Ar2zee Dec 27 '18 at 19:31

React: Module not found: Can't resolve

3 Answers3