Error: Problem starting a project with Typescript and Babel

Devtools Ceramic SDKs
1

Im trying to run “Getting started demo” in a TypeScript project using Babel and I get the following errors when I try to run tsc --build --pretty:

node_modules/@ceramicnetwork/common/lib/index.d.ts:23:27 - error TS2307: Cannot find module 'ipfs-core-types' or its corresponding type declarations.

23 import type { IPFS } from 'ipfs-core-types';
                             ~~~~~~~~~~~~~~~~~

node_modules/@ceramicnetwork/http-client/lib/ceramic-http-client.d.ts:18:9 - error TS2380: The return type of a 'get' accessor must be assignable to its 'set' accessor type
  Type 'undefined' is not assignable to type 'DID'.

18     get did(): DID | undefined;
           ~~~

node_modules/@ceramicnetwork/blockchain-utils-linking/lib/filecoin.d.ts:15:74 - error TS2709: Cannot use namespace 'MessageParams' as a type.

15 export declare function asTransaction(address: string, message: string): MessageParams;
            
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 3 errors.

I tried installing those deps, but it only created more errors. Help would be greatly appreciated

2

Hey,

So I’m not sure exactly what’s going on here since I think the problem is likely related to your tsconfig file. Can you compare it to the files here or here. Please note that these repos were configured using webpack & typescript without babel so that might change your config.

3

I have the same issue. I used ionic/angular. I followed this tutorial: Installing the JS HTTP Client - Ceramic Developers


 node_modules/@ceramicnetwork/common/lib/index.d.ts:24:27 - error TS2307: Cannot find module 'ipfs-core-types' or its corresponding type declarations.
 
24 import type { IPFS } from 'ipfs-core-types';

This is the ceramic.services.ts

import { Injectable } from '@angular/core';

import { CeramicClient } from '@ceramicnetwork/http-client';
import { DID } from 'dids';
import { getResolver as getKeyResolver } from 'key-did-resolver';
import { getResolver as get3IDResolver } from '@ceramicnetwork/3id-did-resolver';

@Injectable({
  providedIn: 'root'
})
export class Web3Service {

  ceramicNode = 'https://ceramic-clay.3boxlabs.com';
  ceramic = new CeramicClient(this.ceramicNode);



  constructor() {
    const did = new DID({
      resolver: {
        // A Ceramic client instance is needed by the 3ID DID resolver to load DID documents
        ...get3IDResolver(this.ceramic),
        // `did:key` DIDs are used internally by 3ID DIDs, therefore the DID instance must be able to resolve them
        ...getKeyResolver(),
      },
    })
    this.ceramic.did = did;

  }
}

this is the tsconfig

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

steps to recreate:

$ npm install -g @ionic/cli
$ ionic start

select blank
create a service

$ ionic generate service services/ceramic

paste the above code in services/ceramic.services.ts
in app.components.ts add

import {Web3Service} from './services/web3.service';

then in console

$ ionic serve
4

I’m not sure if this is going to be the same issue. I know we can’t use Ceramic with React Native so it would track that we’d have similar problems with ionic. Your code itself looks right to me so my guess would be something to do with Ionic.

5

Ok I seem to have solved it by adding

npm install ipfs-core