Generated vue and ts-client don't work together #3067

lxgr-linux · 2022-11-06T11:44:26Z

Describe the bug
There seams to be a problem with the generated vue and ts-client.

To reproduce
Steps to reproduce the behavior:

Scaffold a new chain:

ignite scaffold chain testtest123
cd testtest123

Generate vue and ts-client:

ignite generate vuex
ignite generate ts-client

Change axios version in ts-client/package.json to 0.21.4 like I read on your discord server
Remove content of prepare.js to be able to build against local ts-client:

cd vue
echo "" > prepare.js

Do npm i
Do npm i @babel/types because it seams to be required, but is not contained by the package.json
Create tsconfig.json with content:

{
  "compilerOptions": {
    "target": "ES2020",                            
    "lib": ["DOM","DOM.Iterable","ES2020","ScriptHost"],
    "module": "commonjs",                               
    "moduleResolution": "node",                       
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": false,
  }
}

Run tsc
Get errors:

../ts-client/client.ts:147:22 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

147         await window.keplr.experimentalSuggestChain(suggestOptions);
                       ~~~~~

../ts-client/client.ts:149:16 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

149         window.keplr.defaultOptions = {
                 ~~~~~

../ts-client/client.ts:156:20 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

156       await window.keplr.enable(chainId);
                     ~~~~~

../ts-client/client.ts:157:28 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

157       this.signer = window.keplr.getOfflineSigner(chainId);
                             ~~~~~

node_modules/vite-plugin-dynamic-import/dist/index.d.ts:7:33 - error TS2503: Cannot find namespace 'acorn'.

7 export declare type AcornNode = acorn.Node & Record<string, any>;
                                ~~~~~

src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:312:64 - error TS2551: Property 'serviceABCIQuery' does not exist on type 'Api<unknown>'. Did you mean 'serviceAbciQuery'?

312     let value= (await client.CosmosBaseTendermintV1Beta1.query.serviceABCIQuery(query ?? undefined)).data
                                                                 ~~~~~~~~~~~~~~~~

../ts-client/cosmos.base.tendermint.v1beta1/rest.ts:1019:3
  1019   serviceAbciQuery = (
         ~~~~~~~~~~~~~~~~
  'serviceAbciQuery' is declared here.

src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:316:70 - error TS2551: Property 'serviceABCIQuery' does not exist on type 'Api<unknown>'. Did you mean 'serviceAbciQuery'?

316      let next_values=(await client.CosmosBaseTendermintV1Beta1.query.serviceABCIQuery({...query ?? {}, 'pagination.key':(<any> value).pagination.next_key} as any)).data
                                                                       ~~~~~~~~~~~~~~~~

../ts-client/cosmos.base.tendermint.v1beta1/rest.ts:1019:3
  1019   serviceAbciQuery = (
         ~~~~~~~~~~~~~~~~
  'serviceAbciQuery' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:236:53 - error TS2551: Property 'queryNFTs' does not exist on type 'Api<unknown>'. Did you mean 'queryNfTs'?

236     let value= (await client.CosmosNftV1Beta1.query.queryNFTs(query ?? undefined)).data
                                                      ~~~~~~~~~

../ts-client/cosmos.nft.v1beta1/rest.ts:618:3
  618   queryNfTs = (
        ~~~~~~~~~
  'queryNfTs' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:240:59 - error TS2551: Property 'queryNFTs' does not exist on type 'Api<unknown>'. Did you mean 'queryNfTs'?

240      let next_values=(await client.CosmosNftV1Beta1.query.queryNFTs({...query ?? {}, 'pagination.key':(<any> value).pagination.next_key} as any)).data
                                                            ~~~~~~~~~

../ts-client/cosmos.nft.v1beta1/rest.ts:618:3
  618   queryNfTs = (
        ~~~~~~~~~
  'queryNfTs' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:262:53 - error TS2551: Property 'queryNFT' does not exist on type 'Api<unknown>'. Did you mean 'queryNft'?

262     let value= (await client.CosmosNftV1Beta1.query.queryNFT( key.class_id,  key.id)).data
                                                      ~~~~~~~~

../ts-client/cosmos.nft.v1beta1/rest.ts:646:3
  646   queryNft = (classId: string, id: string, params: RequestParams = {}) =>
        ~~~~~~~~
  'queryNft' is declared here.


Found 10 errors in 4 files.

Errors  Files
   4  ../ts-client/client.ts:147
   1  node_modules/vite-plugin-dynamic-import/dist/index.d.ts:7
   2  src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:312
   3  src/store/generated/cosmos.nft.v1beta1/index.ts:236

What version are you using?

Provide the output of the ignite version command.

Ignite CLI version:	v0.25.1
Ignite CLI build date:	2022-10-20T15:52:00Z
Ignite CLI source hash:	cc393a9b59a8792b256432fafb472e5ac0738f7c
Cosmos SDK version:	v0.46.3
Your OS:		linux
Your arch:		amd64
Your Node.js version:	v19.0.1
Your go version:	go version go1.19.3 linux/amd64
Your uname -a:		Linux AMDarch 6.0.6-arch1-1.1 #1 SMP PREEMPT_DYNAMIC Sun, 30 Oct 2022 19:59:21 +0000 x86_64 GNU/Linux
Your cwd:		/home/arch/testtest123/vue
Is on Gitpod:		false

The text was updated successfully, but these errors were encountered:

clockworkgr · 2022-11-06T13:36:01Z

Describe the bug There seams to be a problem with the generated vue and ts-client.

To reproduce Steps to reproduce the behavior:

Scaffold a new chain:

ignite scaffold chain testtest123
cd testtest123

Generate vue and ts-client:

ignite generate vuex
ignite generate ts-client

Change axios version in ts-client/package.json to 0.21.4 like I read on your discord server
Remove content of prepare.js to be able to build against local ts-client:

cd vue
echo "" > prepare.js

Do npm i
Do npm i @babel/types because it seams to be required, but is not contained by the package.json
Create tsconfig.json with content:

{
  "compilerOptions": {
    "target": "ES2020",                            
    "lib": ["DOM","DOM.Iterable","ES2020","ScriptHost"],
    "module": "commonjs",                               
    "moduleResolution": "node",                       
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": false,
  }
}

Run tsc
Get errors:

../ts-client/client.ts:147:22 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

147         await window.keplr.experimentalSuggestChain(suggestOptions);
                       ~~~~~

../ts-client/client.ts:149:16 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

149         window.keplr.defaultOptions = {
                 ~~~~~

../ts-client/client.ts:156:20 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

156       await window.keplr.enable(chainId);
                     ~~~~~

../ts-client/client.ts:157:28 - error TS2339: Property 'keplr' does not exist on type 'Window & typeof globalThis'.

157       this.signer = window.keplr.getOfflineSigner(chainId);
                             ~~~~~

node_modules/vite-plugin-dynamic-import/dist/index.d.ts:7:33 - error TS2503: Cannot find namespace 'acorn'.

7 export declare type AcornNode = acorn.Node & Record<string, any>;
                                ~~~~~

src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:312:64 - error TS2551: Property 'serviceABCIQuery' does not exist on type 'Api<unknown>'. Did you mean 'serviceAbciQuery'?

312     let value= (await client.CosmosBaseTendermintV1Beta1.query.serviceABCIQuery(query ?? undefined)).data
                                                                 ~~~~~~~~~~~~~~~~

../ts-client/cosmos.base.tendermint.v1beta1/rest.ts:1019:3
  1019   serviceAbciQuery = (
         ~~~~~~~~~~~~~~~~
  'serviceAbciQuery' is declared here.

src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:316:70 - error TS2551: Property 'serviceABCIQuery' does not exist on type 'Api<unknown>'. Did you mean 'serviceAbciQuery'?

316      let next_values=(await client.CosmosBaseTendermintV1Beta1.query.serviceABCIQuery({...query ?? {}, 'pagination.key':(<any> value).pagination.next_key} as any)).data
                                                                       ~~~~~~~~~~~~~~~~

../ts-client/cosmos.base.tendermint.v1beta1/rest.ts:1019:3
  1019   serviceAbciQuery = (
         ~~~~~~~~~~~~~~~~
  'serviceAbciQuery' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:236:53 - error TS2551: Property 'queryNFTs' does not exist on type 'Api<unknown>'. Did you mean 'queryNfTs'?

236     let value= (await client.CosmosNftV1Beta1.query.queryNFTs(query ?? undefined)).data
                                                      ~~~~~~~~~

../ts-client/cosmos.nft.v1beta1/rest.ts:618:3
  618   queryNfTs = (
        ~~~~~~~~~
  'queryNfTs' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:240:59 - error TS2551: Property 'queryNFTs' does not exist on type 'Api<unknown>'. Did you mean 'queryNfTs'?

240      let next_values=(await client.CosmosNftV1Beta1.query.queryNFTs({...query ?? {}, 'pagination.key':(<any> value).pagination.next_key} as any)).data
                                                            ~~~~~~~~~

../ts-client/cosmos.nft.v1beta1/rest.ts:618:3
  618   queryNfTs = (
        ~~~~~~~~~
  'queryNfTs' is declared here.

src/store/generated/cosmos.nft.v1beta1/index.ts:262:53 - error TS2551: Property 'queryNFT' does not exist on type 'Api<unknown>'. Did you mean 'queryNft'?

262     let value= (await client.CosmosNftV1Beta1.query.queryNFT( key.class_id,  key.id)).data
                                                      ~~~~~~~~

../ts-client/cosmos.nft.v1beta1/rest.ts:646:3
  646   queryNft = (classId: string, id: string, params: RequestParams = {}) =>
        ~~~~~~~~
  'queryNft' is declared here.


Found 10 errors in 4 files.

Errors  Files
   4  ../ts-client/client.ts:147
   1  node_modules/vite-plugin-dynamic-import/dist/index.d.ts:7
   2  src/store/generated/cosmos.base.tendermint.v1beta1/index.ts:312
   3  src/store/generated/cosmos.nft.v1beta1/index.ts:236

What version are you using?

Provide the output of the ignite version command.

Ignite CLI version:	v0.25.1
Ignite CLI build date:	2022-10-20T15:52:00Z
Ignite CLI source hash:	cc393a9b59a8792b256432fafb472e5ac0738f7c
Cosmos SDK version:	v0.46.3
Your OS:		linux
Your arch:		amd64
Your Node.js version:	v19.0.1
Your go version:	go version go1.19.3 linux/amd64
Your uname -a:		Linux AMDarch 6.0.6-arch1-1.1 #1 SMP PREEMPT_DYNAMIC Sun, 30 Oct 2022 19:59:21 +0000 x86_64 GNU/Linux
Your cwd:		/home/arch/testtest123/vue
Is on Gitpod:		false

I am confused.. what is your exact goal? do you want to publish a built version of ts-client?

lxgr-linux · 2022-11-06T13:38:00Z

I want to get the generated vue project to work.

clockworkgr · 2022-11-06T13:53:04Z

I want to get the generated vue project to work.

ok...in that case, steps 3,4,6,7 are unnecessary and mess with the template...the axios suggestion was for building and publishing the ts-client as a standalone library

Just do:

ignite scaffold chain testtest123
cd testtest123
ignite chain serve

to create and launch your chain and while it's running, in a different term

cd testtest123
ignite g vuex --proto-all-modules
cd vue
npm install
npm run dev

Above assumes you have node v16 or higher

lxgr-linux · 2022-11-06T14:08:40Z

You would still need to use step Nr.4 since I didn't publish the ts-client. And another problem is, that the project the generated vuex stores are for is a vue project written in just js, not ts, and therefore everything needs to be transpiled to js.
And that worked for the longest time and wasn't even necessary before that.

clockworkgr · 2022-11-06T14:25:43Z

You would still need to use step Nr.4 since I didn't publish the ts-client. And another problem is, that the project the generated vuex stores are for is a vue project written in just js, not ts, and therefore everything needs to be transpiled to js. And that worked for the longest time and wasn't even necessary before that.

ah...so you want JUST the vuex files then....not to run the boilerplate vue project which is in fact in TS...
yeah we stopped transpiling a while back so people can use their own bundling setup...thats why babel is unnecessary for us (we use vite in the boilerplate)

step 4 doesnt affect the code...it simply prints a notice that you should in fact publish your ts-client at some point.

I'll have to get back to you on the setup for transpiling just the vuex files..

clockworkgr · 2022-11-06T21:12:22Z

@lxgr-linux Ok. So I looked at this further and there are 2 issues at play here:

A working package.json and tsconfig that will allow you to transpile the vuex TS source to JS for your frontend project. I have prepared this and it's quiet straight forward.
there is a actually a bug in the generated code (the "bad" camelcasing of ServiceABCIQuery and QueryNFTS) which breaks the transpilation

I will put a fix up for this for the next release. In the meantime, do you want instructions on how to transpile manually? Or would you rather wait for the release?

lxgr-linux · 2022-11-07T16:14:36Z

I will put a fix up for this for the next release. In the meantime, do you want instructions on how to transpile manually? Or would you rather wait for the release?

Oh yes, having instructions for transpiling would be very nice, because we're currently migrating our chain to the newest cosmos-sdk version and our frontend is the last thing holding us back.

lxgr-linux added the type:error Something isn't working label Nov 6, 2022

lxgr-linux mentioned this issue Nov 6, 2022

Cosmos version upgrade DecentralCardGame/Cardchain#98

Merged

6 tasks

clockworkgr mentioned this issue Nov 7, 2022

fix: Generated REST client method casing bug & JS additions #3068

Merged

aljo242 assigned clockworkgr Nov 9, 2022

aljo242 closed this as completed in #3068 Nov 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Generated vue and ts-client don't work together #3067

Generated vue and ts-client don't work together #3067

lxgr-linux commented Nov 6, 2022

clockworkgr commented Nov 6, 2022

lxgr-linux commented Nov 6, 2022

clockworkgr commented Nov 6, 2022 •

edited

Loading

lxgr-linux commented Nov 6, 2022 •

edited

Loading

clockworkgr commented Nov 6, 2022

clockworkgr commented Nov 6, 2022

lxgr-linux commented Nov 7, 2022

Generated vue and ts-client don't work together #3067

Generated vue and ts-client don't work together #3067

Comments

lxgr-linux commented Nov 6, 2022

clockworkgr commented Nov 6, 2022

lxgr-linux commented Nov 6, 2022

clockworkgr commented Nov 6, 2022 • edited Loading

lxgr-linux commented Nov 6, 2022 • edited Loading

clockworkgr commented Nov 6, 2022

clockworkgr commented Nov 6, 2022

lxgr-linux commented Nov 7, 2022

clockworkgr commented Nov 6, 2022 •

edited

Loading

lxgr-linux commented Nov 6, 2022 •

edited

Loading