Bug: Cannot find module @coinbase/onchainkit/identity or its corresponding type declarations.

[0x9090]

Describe the bug and the steps to reproduce it

I'm trying to do a ENS name lookup using OnChainKit in Typescript via a browser and without React (I don't use React in my app)

When I try to follow the documentation for getName() https://onchainkit.xyz/identity/get-name I get the error TS2307: Cannot find module '@coinbase/onchainkit/identity' or its corresponding type declarations.

I am using TypeScript and importing the latest version (0.36.6) of @onchainkit via NPM in package.json. This is my tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "module": "esnext",
    "moduleResolution": "node",
    "allowJs": true,
    "checkJs": true,
    "sourceMap": false,
    "outDir": "../www/js/",
    "removeComments": true,
    "isolatedModules": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "alwaysStrict": true,
    "skipLibCheck": true
  },
  "include": [
    "*.ts", "pages/*.ts", "components/*.ts"
  ]
}

I can import @coinbase/onchainkit fine, but it seems like the /identity exports aren't there. Is there some other path I should be importing to get the getName() function working in my app? This is a minimal version of the code I'm trying to get to work

import {getName} from "@coinbase/onchainkit/identity";

export async function baseGetName(_address: string): Promise<string> {
    const name = await getName({_address});
    return name.toString();
}

Thanks!

What's the expected behavior?

getName should be an exportable function with the necessary types when importing @coinbase/onchainkit/identity in a pure Typescript environment

Alternatively, a working Wagmi or Viem example for their version of getName() would suffice. Those also fail when trying L2 Base ENS resolution

What version of the libraries are you using?

• Onchainkit: 0.36.6

[dschlabach]

Hi @0x9090 - thanks for flagging!

• What version of Node are you on?
• We recommend using the following on your tsconfig.json - are you able to use NodeNext, or is there a reason that you're using node?

    "module": "NodeNext",
    "moduleResolution": "nodenext",

For reference: TSConfig Reference

[0x9090]

Hi @0x9090 - thanks for flagging!

* What version of Node are you on?

* We recommend using the following on your `tsconfig.json` - are you able to use `NodeNext`, or is there a reason that you're using `node`?

    "module": "NodeNext",
    "moduleResolution": "nodenext",

For reference: TSConfig Reference

For clarification, I don't directly use Node in the back-end project (the back-end is Golang + Gin-Gonic). But I have v20.8.0 installed on my system.

When I switch to NodeNext for module and moduleResolution, I get tons of dependency errors and it seems to break more than it fixes. I need to support ecmascript, as this Typescript code runs purely in a browser.

[0x9090]

I finally got it working! After much experimentation and frustration, I did get pure, in-browser Tyepscript working with onchainkit. This was the final tsconfig.json file that worked for me

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "Bundler",
    "allowJs": true,
    "checkJs": true,
    "sourceMap": false,
    "outDir": "../www/js/",
    "removeComments": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "alwaysStrict": true,
    "skipLibCheck": true,
    "moduleDetection": "force",
    "verbatimModuleSyntax": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "*": ["*"],
    }
  },
  "include": [
    "**/*.ts", "pages/**/*.ts", "components/**/*.ts", "util/**/*.ts", "services/**/*.ts"
  ]
}

and my webpack.cjs file

const path = require('path');
const webpack = require('webpack');

module.exports = {
    context: path.resolve(__dirname, ''),
    entry: {
        home: './pages/home.ts',
        login: './pages/login.ts',
    },
    mode: 'production',
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: [{
                loader: 'ts-loader',
                options: {
                    configFile: path.resolve(__dirname, './tsconfig.json'),
                }
            }],
            include: path.resolve(__dirname, "."),
            exclude: /node_modules/,
        },{
            test: /\.(sass|scss|css)$/,
            include: path.resolve(__dirname, "../scss"),
            exclude: /node_modules/,
            use: [{
                loader: 'style-loader'  // Adds CSS to the DOM by injecting a `<style>` tag
            },{
                loader: 'css-loader',  // Interprets `@import` and `url()` like `import/require()` and will resolve them
                options: {
                    sourceMap: false,
                }
            },{
                loader: 'postcss-loader',  // Loader for webpack to process CSS with PostCSS
                options: {
                    postcssOptions: {
                        plugins: [["autoprefixer", {}]]
                    }
                }
            },{
                loader: 'sass-loader',  // Loads a SASS/SCSS file and compiles it to CSS
                options: {
                    sourceMap: false,
                    sassOptions: {
                        outputStyle: "compressed",
                    }
                }
            }]
        }]
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../www/js/'),
        clean: true,
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js'],
        modules: [path.resolve(__dirname, '.'), 'node_modules'],
        fallback: {
            "crypto": require.resolve("crypto-browserify"),
            "stream": require.resolve("stream-browserify"),
            "buffer": require.resolve("buffer/"),
            "util": require.resolve("util/"),
            "process": false,
            "path": require.resolve("path-browserify"),
        },
        alias: {
            process: "process/browser"
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
        }),
        new webpack.ProvidePlugin({
            process: "process/browser",
        }),
    ],
    experiments: {
        topLevelAwait: true,
    },
    ignoreWarnings: [{
        message: /print-color-adjust/,
    }],
    target: "web",
};

Can I request that some documentation on setting up pure browser-based Typescript and Webpack to be added to the onchainkit documentation? Something that isn't React and Node.js specific. (Because not everyone uses those) Having some kind of documentation here would have saved me many hours of experimentation getting onchainkit types to resolve correctly.