The module 'module://graphql/language/parser.js' could not be resolved

I'm facing an issue while creating a React Native TypeScript project on Snack Expo. Even though I have added graphql to the package.json and included the types file, I keep getting this error :

Device: (1:8434) Unable to resolve module 'module://graphql/language/parser.js'
  Evaluating module://graphql/language/parser.js
  Evaluating module://graphql-tag.js
  Evaluating module://graphql/loadCountries.tsx.js
  Evaluating module://App.tsx.js
  Loading module://App.tsx

Does anyone know how to resolve this? Just to clarify, I am not using any JS files. You can access the Expo project through this link:

typescriptreact-nativenpmgraphqlexpo

Answer №1

To resolve the issue in my situation, I opted to install graphql. Additionally, I made use of the graphql-request package, which does not include graphql as a default dependency. Therefore, I manually added it using the following command:

npm install graphql

Answer №2

When encountering this issue while using import gql from 'graphql-tag', I was puzzled by why graphql-tag wasn't functioning properly in snack.expo.io. Strangely enough, it seemed to work fine in a react-native project.

Thankfully, a solution presented itself. By including 

"@apollo/client": "3.3.6"
(using the latest version) as a dependency in the package.json file, I was able to import gql from @apollo/client like so:

import { gql } from '@apollo/client';

This simple adjustment resolved the issue for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble running the command "npm install @feathers/cli -g" in the terminal

Encountering an error message while attempting to install feathers from npm. Error: npm WARN deprecated [email protected]: Package is no longer supported. Please contact [email protected] for further information. npm WARN deprecated [email  ...

npmcommand-lineinstallationfeathersjs

Combine two arrays of data sources

mergeThreads() { const userId = this.auth.getUser().uid; const buyerThreads$ = this.afs.collection('threads', ref => ref.where('buyerId', '==', userId)).valueChanges(); const sellerThreads$ = this.afs.collection ...

angulartypescriptrxjsionic3angularfire2

Resolve the "kexec" malfunction obstructing the successful execution of "npm install" for packages like WebPack in the "node_modules" directory following an upgrade to node versions 12, 13, or 14

After upgrading from "node" to "node 14", I attempted an "npm install" but encountered a failure due to the compilation error of "kexec" (also known as "node-kexec") which is a requirement for WebPack. The error messages received were: npm ERR! path /User ...

node.jsnpmwebpacknode-modules

Using the reduce method in JavaScript or TypeScript to manipulate arrays

Just exploring my culture. I have grasped the concept of the reduce principle var sumAll = function(...nums: number[]):void{ var sum = nums.reduce((a, b) => a + b , 0); document.write("sum: " + sum + "<br/>"); } sumAll(1,2,3,4,5); The r ...

javascriptarraystypescriptreduce

No TypeScript error in Angular app when assigning a string to a number data type

Today, I encountered some confusion when my app started acting strangely. It turns out that I mistakenly assigned a string to a number without receiving any error alerts. Any thoughts on why this happened? id:number; Later on: this.id = ActiveRoute.params ...

angulartypescript

Angular 5 Directive for Structuring Content

I'm currently in the process of developing a versatile search box component, with the following setup: search.component.html <div class="search-box-container"> <fa-icon class="search-icon" [icon]="faSearch"></fa-icon> <input ...

angulartypescript

Instructions on how to indicate separate readme files for GitHub and npm platforms

When publishing, both use the README.md as the description. It is common to have a single shared file for this purpose. However, what if there is a need for different Readme files and still be able to publish from a single local repository without manual ...

githubnpmdocumentationpublishreadme

Updating Angular 9 values using a fixed object

I am dealing with a patch value here where I simply pass an object to it. this.formPesquisar.controls['daniloTeste'].patchValue(this.dadosVisualizar.daniloTeste); However, I would like to pass a static object instead, something like: this.formPe ...

angulartypescript

Encountering an error "Property is used before its initialization" in Angular 10 when attempting to input an object into a template

My code includes a class: import * as p5 from 'p5'; export class Snake{ constructor() { } sketch = (p: p5) => { p.setup = () => { ... } } } To instantiate this class in app.component, I do the follow ...

angulartypescript

What is the process of connecting a Yarn module to a Docker container in another repository?

I'm currently facing a challenge in linking a module to a Docker container from another repository. To provide some background, I have a container hosting a React application named launch-control-admin. This project relies on a yarn module called @com ...

javascriptreactjsdockernpmyarnpkg

I'm attempting to integrate Angular Material into my project but I'm struggling to figure out how to resolve the issue

npm ERR! code ERESOLVE npm ERR! ERESOLVE was unable to find a resolution npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/tslint npm ERR! dev tslint@"~6.1.0" from the root projec ...

angularnpmangular-material

Struggling to figure out webhooks with Stripe

I have encountered a strange issue while using Stripe webhooks to process payments on my website. When I set the currency to USD, it prompts me to provide an address outside of India, which is expected. However, when I change the currency to INR, the addre ...

typescriptnext.jsstripe-paymentswebhooks

Troubleshooting the issue of Angular 2 error: Cannot access the 'getOptional' property

Currently, I am navigating my way through angular 2 and attempting to define a service named searchservice. I want to inject this service in the bootstap part of my project: import {SearchService} from 'src/service'; Here is the code for the Se ...

angularjstypescriptangular

Wrapper class for iOS and Android libraries in React-Native

Currently, I am exploring React Native and aiming to develop a unified interface (wrapper) for two libraries with similar functionalities but tailored for different platforms. For instance, DatePickerIOS & react-native-wheel-picker-android. I've expe ...

reactjsreact-nativecross-platform

What exactly does "nothing" mean in Node when using async await?

I have a method as shown below: private async sendToAll(clients) { for(const client of clients) { this.send(client, message); await true; // What should I put here to allow the rest of the application to continue executi ...

javascripttypescriptecmascript-6

Guide on deactivating the div in angular using ngClass based on a boolean value

displayData = [ { status: 'CLOSED', ack: false }, { status: 'ESCALATED', ack: false }, { status: 'ACK', ack: false }, { status: 'ACK', ack: true }, { status: 'NEW', ack ...

javascriptangulartypescript

Variable Scope is not defined in the TypeScript controller class of an AngularJS directive

I have implemented a custom directive to wrap ag grid like so: function MyDirective(): ng.IDirective { var directive = <ng.IDirective>{ restrict: "E", template: '<div style="width: 100%; height: 400px;" ag-grid="vm.agGrid ...

javascriptangularjsangularjs-directivetypescriptangularjs-controller

Having trouble compiling my Angular application with success

I am working with a file named mock-values.ts. In this file, I have defined the following constants: export const TIMES: Time[] = [ { i: '8:00', v: '8' }, { i: '8:30', v: '8:30' }, { i: '9:00', v: &apo ...

angulartypescriptimportcompiler-errorsexport

Attempting to set up npm

I've been facing issues while trying to set up npm. Initially, I downloaded the latest package from https://nodejs.org/en/download/ and proceeded with installation. When I ran 'npm install', the console displayed the following error: npm ins ...

node.jsnpmnpm-install

What is TypeScript's approach to managing `data-*` attributes within JSX?

Let's consider the following code snippet: import type { JSX } from 'react'; const MyComponent = (): JSX.Element => ( <div data-attr="bar">Foo</div> ); Surprisingly, this code does not result in any TypeScript er ...

reactjstypescriptjsxcustom-data-attribute