Error: The AWS amplify codegen is unable to locate any exported members within the Namespace API

Using AWS resources in my web app, such as a Cognito user pool and an AppSync GraphQL API, requires careful maintenance in a separate project. When modifications are needed, I rely on the amplify command to delete and re-import these resources:

$ amplify remove auth
   ...
$ amplify remove api
   ...
$ amplify import auth
   ...
$ amplify codegen add --apiId <my API ID>
   ...

As far as my experience goes, this method of importing externally managed resources has been effective for the past few months, with minimal issues. If there are better practices out there, I'm open to suggestions from the community.

However, after the most recent delete and re-import process, running the app encountered a compiler error within the TypeScript code generated by amplify codegen:

$ yarn start

Compiled successfully!
 ...
webpack compiled successfully
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
ERROR in src/graphql/queries.ts:21:30
TS2694: Namespace '"<path to project>/src/API"' has no exported member 'SomeAPIOperationQueryVariables'.
    19 |   }
    20 | }
  > 21 | ` as GeneratedQuery<APITypes.SomeAPIOperationQueryVariables, APITypes.SomeAPIOperationQuery>;
       |                              ^^^^^^^^^^^^^^^^^^^^^
    22 | export const anotherAPIOperation = /* GraphQL */ `query AnotherAPIOperation {
    23 |   anotherAPIOperation {
    24 |     color
    
...

The AppSync API and its schema (alongside the Cognito resources) have functioned well across multiple individual projects over the last couple of months, ruling out any immediate issues in those areas.

The compiler error specifically affects GraphQL operations that do not require arguments - resulting in issues for certain types while other queries and mutations compile without errors.

I've attempted the suggested importing steps and even started fresh by removing all local files associated with amplify and performing a clean initialization, yet the error persists. What could be causing this issue? Any insights or guidance on troubleshooting would be greatly appreciated.

typescriptaws-amplifyaws-appsyncaws-amplify-cligraphql-codegen

Answer №1

Having encountered a similar issue myself, it appears to be a bug within the Amplify codegen tool that assumes every query requires arguments. The Variables type is not being generated with an empty dictionary for input, causing this inconvenience.

I am contemplating creating an issue on their GitHub repository if one does not already exist by the time I address it.

For now, my workaround involves adding a dummy optional argument to each query in the schema file to prompt the generation of Variables types. It may even be possible to assign default values to them as far as I can recall.

Admittedly, this is not the most optimal solution. Nonetheless, I hope it aids you in overcoming this hurdle temporarily.

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

Combine two streams under certain conditions using RxJs

When working with streams, I am facing a scenario where I have two server calls to make in order to get the required response. However, if the first call returns data, I do not want to execute the second call. I have been struggling to find the proper comb ...

angulartypescriptrxjs

Error: The npm-link library encountered an invalid hook call

Problem Description: I am working on developing a package named eformless. To set up the package, I utilized CRA to create a directory named sandbox where I linked the package. However, I keep encountering an error when attempting to launch the sand ...

node.jsreactjstypescriptnpmnpm-link

Executing a function for every element within a loop in Angular 11 - the Angular way

I'm currently developing a project using Angular in which users have the ability to upload multiple questions simultaneously. After adding the questions, they are displayed in a separate modal where users can include diagrams or figures for each quest ...

arraysreactjsangulartypescriptfrontend

The deletion by index feature seems to be malfunctioning in Angular

Is there a way to delete an item by its ID instead of just deleting the last element using this code? I want to create input fields with a delete button next to each one simultaneously. TS: public inputs: boolean[] = []; public addNew(): void { this ...

htmlangulartypescript

How can I set up BaconJS in conjunction with Webpack and CoffeeScript?

Currently in the process of transitioning old code to Webpack and encountering some issues... Utilizing a dependency loader in TypeScript import "baconjs/dist/Bacon.js" And a module in CoffeeScript @stream = new Bacon.Bus() Upon running the code, I en ...

typescriptcoffeescriptwebpackbacon.js

Traversing the enum's keys poses a challenge in terms of typing

Imagine you need to display all values of an enum enum AnEnum { a = 'a', b = 'b' } const keys = Object.keys(AnEnum); keys.forEach(key => { console.log(AnEnum[key]); }); This results in the following error message: ...

typescriptenums

Storing a byte array in a local file using JavaScript: A Step-by-Step Guide

Recently, I encountered an issue while working with an openssl certificate. Specifically, when I tried to download the certificate from my API, it returned byte arrays that I needed to convert to a PEM file in order to access them through another API. The ...

javascripttypescriptunicodeutf-8chilkat

Ways to display all current users on a single page within an application

I have come across a project requirement where I need to display the number of active users on each page. I am considering various approaches but unsure of the best practice in these scenarios. Here are a few options I am considering: 1. Using SignalR 2. ...

javascriptangulartypescriptasp.net-web-apisignalr

The JSON object, which has been converted into a string and sent over the network,

Attempting to set up a websocket server using TypeScript in Node.js, the following code was used: ws.on('message', (msg: string) => { console.log("got message:" + msg); const m = JSON.parse(msg); console.log(m); ...

javascriptjsontypescriptwebsocket

Problem with extending a legacy JavaScript library using TypeScript

Can someone assist me with importing files? I am currently utilizing @types/leaflet which defines a specific type. export namespace Icon { interface DefaultIconOptions extends BaseIconOptions { imagePath?: string; } class Default exte ...

angulartypescripttypes

Is Webpack CLI causing issues when trying to run it on a .ts file without giving any error

I am facing an issue with my webpack.config.js file that has a default entrypoint specified. Here is the snippet of the configuration: module.exports = { entry: { main: path.resolve('./src/main.ts'), }, module: { rules: [ { ...

javascripttypescriptwebpack

What causes React component state initialization to return a `never` type when set to null?

Initializing a component's state to null outside of the constructor results in the state having the type never in the render function. However, when the state is initialized within the constructor, the correct type is maintained. Despite many StackO ...

reactjstypescript

Adding Material-UI icons dynamically in a React TypeScript project requires understanding the integration of imported icons

I have a collection of menu buttons with icons, stored in an array of objects. The icon names are saved as strings that correspond to Material UI icons: interface MenuButton { text: string, onClickFunction: Function icon: string } export defau ...

javascriptreactjstypescriptmaterial-ui

How to Utilize Knockout's BindingHandler to Integrate JQuery.Datatables Select Feature?

I've developed a custom KO bindingHandler (view it here) to assist in updating the DataTable. The documentation for JQuery.DataTable.Select regarding how to access data requires a handle. You can see the details here. var table = $('#myTable&a ...

jquerytypescriptknockout.jsdatatablesknockout-3.0

Tips for encapsulating a promise while maintaining the original return type

In my code, there is a function that utilizes an axios instance and is of type async function register(data: RegisterData): Promise<AxiosResponse<UserResponse, any>> export const register = (data: RegisterData) => api.post<UserResponse> ...

typescriptvue.js

Encountering issues with Proxy functionality in the latest versions of Angular 13 and Spring Boot

I've encountered an issue with the proxy configuration in Angular. I'm unsure if it's a problem within my Angular settings or if there's a configuration issue in Spring. For testing purposes, I have a backend built in springboot to han ...

angulartypescriptspring-boot-actuator

Creating valuable properties in TypeScript is a skill that requires knowledge and practice

In TypeScript, there is a unique feature available for defining properties with values using the `value` keyword. class Test { constructor(private value: number = 123) { } public MyValueProperty: number = 5; } Here is how you can define such ...

javascripttypescript

How to Use an Object Created from a Different Class in TypeScript

Scenario In the development process, I am using an auth.service.ts. This service is responsible for fetching user information from the database upon login. The retrieved data is then used to create a new user object. Here is a snippet of the code: user: ...

javascriptangulartypescript

Tips for accessing and adjusting an ngModel that is populated by an attribute assigned via ngFor

Looking for guidance on how to modify an input with ngModel attribute derived from ngFor, and update its value in the component. Here is my code snippet for reference: HTML FRONT The goal here is to adjust [(ngModel)] = "item.days" based on button click ...

javascriptangulartypescriptangular2-ngmodel

Allow only specified tags in the react-html-parser white list

Recently, I've been working on adding a comments feature to my projects and have come across an interesting challenge with mentioning users. When creating a link to the user's profile and parsing it using React HTML parser, I realized that there ...

javascripthtmlreactjstypescript