React: Module not found: Can't resolve

Multi tool use
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
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
add a comment |
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
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
add a comment |
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
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
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
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
reactjs typescript import react-apollo-form
edited Dec 27 '18 at 17:10
asked Dec 27 '18 at 16:33


Massimo Variolo
2,99032646
2,99032646
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Just remove ApplicationForm courly braces in your import.
import ApplicationForm from "../forms/ApplicationForm";
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
add a comment |
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";
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
add a comment |
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?
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
|
show 1 more comment
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Just remove ApplicationForm courly braces in your import.
import ApplicationForm from "../forms/ApplicationForm";
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
add a comment |
Just remove ApplicationForm courly braces in your import.
import ApplicationForm from "../forms/ApplicationForm";
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
add a comment |
Just remove ApplicationForm courly braces in your import.
import ApplicationForm from "../forms/ApplicationForm";
Just remove ApplicationForm courly braces in your import.
import ApplicationForm from "../forms/ApplicationForm";
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
add a comment |
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
add a comment |
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";
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
add a comment |
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";
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
add a comment |
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";
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";
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
add a comment |
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
add a comment |
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?
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
|
show 1 more comment
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?
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
|
show 1 more comment
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?
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


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
|
show 1 more comment
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
|
show 1 more comment
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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