React: Module not found: Can't resolve

Multi tool use
Multi tool use












1














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:UsersmassiDesktopsandboxerbar10erbar10srccomponents'


My tree



enter image description here



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









share|improve this question





























    1














    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:UsersmassiDesktopsandboxerbar10erbar10srccomponents'


    My tree



    enter image description here



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









    share|improve this question



























      1












      1








      1







      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:UsersmassiDesktopsandboxerbar10erbar10srccomponents'


      My tree



      enter image description here



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









      share|improve this 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:UsersmassiDesktopsandboxerbar10erbar10srccomponents'


      My tree



      enter image description here



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






      reactjs typescript import react-apollo-form






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 27 '18 at 17:10

























      asked Dec 27 '18 at 16:33









      Massimo Variolo

      2,99032646




      2,99032646
























          3 Answers
          3






          active

          oldest

          votes


















          0














          Just remove ApplicationForm courly braces in your import.



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





          share|improve this answer





















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03










          • I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11



















          0














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





          share|improve this answer





















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03






          • 1




            I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11



















          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?






          share|improve this answer





















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03










          • I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11










          • import client from "../index"; try to use like here with brackets github.com/wittydeveloper/react-apollo-form/wiki/…
            – Artur Oganesyan
            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











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53948094%2freact-module-not-found-cant-resolve%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          3 Answers
          3






          active

          oldest

          votes








          3 Answers
          3






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          Just remove ApplicationForm courly braces in your import.



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





          share|improve this answer





















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03










          • I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11
















          0














          Just remove ApplicationForm courly braces in your import.



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





          share|improve this answer





















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03










          • I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11














          0












          0








          0






          Just remove ApplicationForm courly braces in your import.



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





          share|improve this answer












          Just remove ApplicationForm courly braces in your import.



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






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Dec 27 '18 at 16:47









          vitomadio

          491110




          491110












          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03










          • I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11


















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03










          • I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11
















          the error "Module not found:" still remains!
          – Massimo Variolo
          Dec 27 '18 at 17:03




          the error "Module not found:" still remains!
          – Massimo Variolo
          Dec 27 '18 at 17:03












          I updated the question with more details
          – Massimo Variolo
          Dec 27 '18 at 17:11




          I updated the question with more details
          – Massimo Variolo
          Dec 27 '18 at 17:11













          0














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





          share|improve this answer





















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03






          • 1




            I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11
















          0














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





          share|improve this answer





















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03






          • 1




            I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11














          0












          0








          0






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





          share|improve this answer












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






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Dec 27 '18 at 16:48









          Miguel J.

          14612




          14612












          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03






          • 1




            I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11


















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03






          • 1




            I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11
















          the error "Module not found:" still remains!
          – Massimo Variolo
          Dec 27 '18 at 17:03




          the error "Module not found:" still remains!
          – Massimo Variolo
          Dec 27 '18 at 17:03




          1




          1




          I updated the question with more details
          – Massimo Variolo
          Dec 27 '18 at 17:11




          I updated the question with more details
          – Massimo Variolo
          Dec 27 '18 at 17:11











          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?






          share|improve this answer





















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03










          • I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11










          • import client from "../index"; try to use like here with brackets github.com/wittydeveloper/react-apollo-form/wiki/…
            – Artur Oganesyan
            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
















          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?






          share|improve this answer





















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03










          • I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11










          • import client from "../index"; try to use like here with brackets github.com/wittydeveloper/react-apollo-form/wiki/…
            – Artur Oganesyan
            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














          0












          0








          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?






          share|improve this answer












          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?







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Dec 27 '18 at 16:54









          Artur Oganesyan

          8318




          8318












          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03










          • I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11










          • import client from "../index"; try to use like here with brackets github.com/wittydeveloper/react-apollo-form/wiki/…
            – Artur Oganesyan
            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


















          • the error "Module not found:" still remains!
            – Massimo Variolo
            Dec 27 '18 at 17:03










          • I updated the question with more details
            – Massimo Variolo
            Dec 27 '18 at 17:11










          • import client from "../index"; try to use like here with brackets github.com/wittydeveloper/react-apollo-form/wiki/…
            – Artur Oganesyan
            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
















          the error "Module not found:" still remains!
          – Massimo Variolo
          Dec 27 '18 at 17:03




          the error "Module not found:" still remains!
          – Massimo Variolo
          Dec 27 '18 at 17:03












          I updated the question with more details
          – Massimo Variolo
          Dec 27 '18 at 17:11




          I updated the question with more details
          – Massimo Variolo
          Dec 27 '18 at 17:11












          import client from "../index"; try to use like here with brackets github.com/wittydeveloper/react-apollo-form/wiki/…
          – Artur Oganesyan
          Dec 27 '18 at 17:13




          import client from "../index"; try to use like here with brackets github.com/wittydeveloper/react-apollo-form/wiki/…
          – Artur Oganesyan
          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




          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




          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


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53948094%2freact-module-not-found-cant-resolve%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          wnNFB75ji7tlJcLO cM lXhTN1btL,M54 At6Gai,oaIZnYSK
          wjUjkPEF6uAhWx4,GaVY g25yA dSnSvPc8Gr,tMztbhv8P,V9dY Lc7rEpts2FpBzz58TfqO,Q G,4W64T

          Popular posts from this blog

          Monofisismo

          Angular Downloading a file using contenturl with Basic Authentication

          Olmecas