FAQ

Answers to common questions about using CCC — TypeScript configuration, React Server Components, wallet support, and more.

Property '*' does not exist on type 'typeof import(...)'

CCC uses JavaScript’s Package Entry Points feature to enable tree shaking while exporting everything on the ccc object. If TypeScript cannot find a property, check your tsconfig.json:

• Set moduleResolution to node16, nodenext, or bundler.
• Do not disable resolvePackageJsonExports.

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}

See the TypeScript guide on package.json exports for more detail.

TypeError: (0, react....createContext) is not a function

CCC’s UI components run on the client side only. If you are using React Server Components, add the "use client" directive at the top of any file that renders ccc.Provider:

"use client";

import { ccc } from "@ckb-ccc/connector-react";

export function Providers({ children }: { children: React.ReactNode }) {
  return <ccc.Provider>{children}</ccc.Provider>;
}

Can I use Lumos with CCC?

Yes. CCC provides the @ckb-ccc/lumos-patches package to add support for JoyID, Nostr, and Portal wallets inside Lumos-based projects.

Install the package:

npm install @ckb-ccc/lumos-patches

Apply the patches before calling any Lumos APIs:

import { generateDefaultScriptInfos } from "@ckb-ccc/lumos-patches";

// Call this before using Lumos. You no longer need @ckb-lumos/joyid.
registerCustomLockScriptInfos(generateDefaultScriptInfos());

Which wallets does CCC support?

CCC supports wallets from multiple ecosystems through a unified signer interface:

Ecosystem	Wallets
EVM	MetaMask, and other EVM-compatible wallets
Bitcoin	UniSat, OKX, UTXO Global, Xverse
CKB native	JoyID
Nostr	NIP-07 compatible extensions
Dogecoin	Doge-compatible wallets

All wallets connect through the same ccc.Signer interface, so your transaction logic works regardless of which wallet the user chooses.

How do I switch between mainnet and testnet?

Pass the appropriate client when constructing your signer or provider.

With the React connector, set the defaultClient prop on ccc.Provider, or call setClient() from the useCcc() hook at runtime:

import { ccc } from "@ckb-ccc/connector-react";

// Switch network at runtime
function NetworkSwitcher() {
  const { setClient } = ccc.useCcc();

  return (
    <>
      <button onClick={() => setClient(new ccc.ClientPublicMainnet())}>
        Mainnet
      </button>
      <button onClick={() => setClient(new ccc.ClientPublicTestnet())}>
        Testnet
      </button>
    </>
  );
}

Without React, pass the client directly:

import { ccc } from "@ckb-ccc/ccc";

const client = new ccc.ClientPublicTestnet();
// or
const client = new ccc.ClientPublicMainnet();

What is the difference between @ckb-ccc/ccc and @ckb-ccc/connector-react?

• @ckb-ccc/connector-react includes everything in @ckb-ccc/ccc plus React-specific additions: the ccc.Provider component, the useCcc() hook, and a pre-built wallet selection UI. Use this package in React apps.

• @ckb-ccc/ccc is the framework-agnostic core. Use it when you are building a custom wallet connection UI, working in a non-React environment, or want full control over how signers are managed.

If you are not using React, @ckb-ccc/ccc is the right starting point. See the packages overview for a full comparison.