Bug: type declarations not available have to use @coinbase/onchainkit/esm/*

[blmalone]

Describe the bug and the steps to reproduce it

When importing ConnectAccount:

import { ConnectAccount } from '@coinbase/onchainkit/wallet';

I get the following error:

Cannot find module '@coinbase/onchainkit/wallet' or its corresponding type declarations.ts(2307)

---

Below is a screenshot of the error:

---

Below is a screenshot when the error is resolved:

---

Fix: I had to directly use esm in my import statement.

What's the expected behavior?

Shouldn't have to use esm import. Or if I do, this should require a documentation update on your end.

What version of the libraries are you using?

^0.22.2

[kyhyco]

It should work as @coinbase/onchainkit/wallet.

I can't reproduce this issue on the sample app.

Could you show me your tsconfig?

[kyhyco]

That is to say, we only build for esm so let's make sure that your tsconfig is correct. Will update the docs afterwards.

[kyhyco]

FYI we are updating @coinbase/onchainkit/wallet as we speak. It doesn't work that great as-is.

[kyhyco]

Here is a sneak peak at what we are cooking up!

[blmalone]

@kyhyco Those updates look cool. Here's my tsconfig.ts:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "lib": ["dom", "es2017"],
    "jsx": "react",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

[kyhyco]

could you try with these?

{
  "compilerOptions": {
    // ...
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    // ...
  }
}

[blmalone]

Getting the same error:

[blmalone]

@kyhyco here's the repo I'm working with: https://github.com/blmalone/cafebabe

[kyhyco]

In middle of making the new ConnectWallet component. I will take a look at this after I make some progress on the new component!

[kyhyco]

Aight try this:

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["DOM", "DOM.Iterable", "esnext"],
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "useDefineForClassFields": true
  },
  "include": ["src"]
}

[blmalone]

Thanks for the reply. I tried your suggestion and I'm getting:

🚨 Build failed.

@parcel/core: Failed to resolve '@coinbase/onchainkit/identity' from './src/components/Home.tsx'

  /Users/blaine/code/cafebabe/web/src/components/Home.tsx:22:33
    21 | import { ConnectAccount } from "@coinbase/onchainkit/wallet";
  > 22 | import { Avatar, Address } from "@coinbase/onchainkit/identity";
  >    |                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    23 | import {
    24 |   useAccount,

I believe this has something to do with parcel the build tool we're using: https://parceljs.org/

[kyhyco]

Ah can't help you there. Don't know how parcel works.

[kyhyco]

@blmalone I recommend this though https://tailwindcss.com/docs/guides/vite

Make a new project using that guide which will setup vite (parcel alternative) for you out of the box.

Follow, onchainkit installation instructions and copy all the files from the old project into this new one.