Using Self.ID + React/Typescript Errors

Devtools Ceramic SDKs
,
1

Hello,

I am hoping someone can help me understand this issue i’m having integrating the Self.ID front end components into my existing React+typescript front end:

Failed to compile.

./node_modules/@self.id/react/dist/utils.js 10:76
Module parse failed: Unexpected token (10:76)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| /** @internal */
| export function getCookieValue(cookies, name, fallback) {
>   const value = cookies.split('; ').find(row => row.startsWith(`${name}=`))?.split('=')[1];
|   return value ? decodeURIComponent(value) : fallback;
| }

I get this error by including the Provider element in index.tsx, similar to this example:

here is my version of it:

                     <Provider client={{ ceramic: 'testnet-clay', connectNetwork: 'dev-unstable' }}>
                        <App />
                     </Provider>

I am not super familiar with configuring Babel, but the google results resolving this type of error are many. I’ve tried quite a few different proposed resolutions with no luck. I’m using craco/webpack as well, and tried adding all the Babel items necessary to craco.config.js - which seems to follow the same format more or less as webpack.config.js.

Thanks in advance, hoping someone from the community or team can point me in a more productive direction.

Thanks,
Kevin

2

For what its worth, I have the same issue pulling in the button login from the example at: GitHub - ceramicstudio/create-ceramic-app

./node_modules/@composedb/client/dist/schema.js 110:130
Module parse failed: Unexpected token (110:130)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       return id.startsWith('did:') ? id : await ctx.loadDoc(id);
|     }, didOrDoc => {
>       return typeof didOrDoc === 'string' ? 'CeramicAccount' : _classPrivateFieldGet(this, _modelAliases)[didOrDoc.metadata.model?.toString()];
|     });
|     const accountObject = new GraphQLObjectType({

Realize this is something in my webpack config or something, but at a loss how to debug.

3

Yes it’s an issue with your config, likely coming from optional chaining support.
Please make sure your environment target is ES2020 or higher as this is the minimum version Ceramic packages support.

4

Thanks, my config supports ES2020 (was using esnext) but tried inserting 2020 just to be sure. I’ll have to look for the issue elsewhere, into the chaining issue.

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": [
      "dom",
      "dom.iterable",
      "ES2020"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
5

thanks @paul - I got around my initial error shown here finally! just took like 2 days of finding the right solution :slight_smile:

I’m running into one final error i think including the Ceramic Login Button:

/Users/myuser/walletchatFE_Ceramic/src/App.tsx
TypeScript error in /Users/myuser/walletchatFE_Ceramic/src/App.tsx(97,44):
Property 'basicProfile' does not exist on type '{}'.  TS2339

     95 |          `);
     96 |           
  >  97 |          setProfile(profile?.data?.viewer?.basicProfile)
        |                                            ^
     98 |          setLoading(false);
     99 |       }
    100 |    }

Of course again this is a generic typescript checking issue I think again, but wanted to document here in case others have solved this already, or run into the same issues and I can solve it soon.

1 Like