Hi I'm having an issue when trying to run my react app. I've installed a couple of packages to from a tutorial using the ceramic and 3id networks. This error has only shown up recently and I've looked online but still not too sure what be causing the issue. The version of node I am using is v14.15.0, my npm version is 6.14.8 and I'm on Windows 11 home version 21H2
The error in question is:
Failed to compile.
./node_modules/did-jwt/lib/index.module.js 1684:17
Module parse failed: Unexpected token (1684:17)
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.
| // TODO: should be able to use non base58 keys too
| return key.type === 'X25519KeyAgreementKey2019' && Boolean(key.publicKeyBase58);
> })) ?? [];
| if (!pks.length && !controllerEncrypters.length) throw new Error(`no_suitable_keys: Could not find x25519 key for ${did}`);
| return pks.map(pk => x25519Encrypter(base58ToBytes(pk.publicKeyBase58), pk.id)).concat(...controllerEncrypters);
My package.json file is as follows:
{
"name": "ceramic-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@3id/connect": "^0.2.5",
"@ceramicnetwork/3id-did-resolver": "^1.4.8",
"@ceramicnetwork/http-client": "^1.4.4",
"@ceramicstudio/idx": "^0.12.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"dids": "^2.4.0",
"ethers": "^5.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The current code I have is also just this in my App.js
import './App.css';
import {useState} from 'react';
import CeramicClient from '@ceramicnetwork/http-client'
import ThreeIdResolver from '@ceramicnetwork/3id-did-resolver'
import { EthereumAuthProvider, ThreeIdConnect } from '@3id/connect'
import { DID } from 'dids'
import { IDX } from '@ceramicstudio/idx'
const endpoint = "https://ceramic-clay.3boxlabs.com"
function App() {
const [name, setName] = useState('');
const [image, setImage] = useState('');
const [loaded, setLoaded] = useState(false);
async function connect() {
const addresses = await window.etheruem.request({
method: 'eth_requestAccounts'
})
return addresses;
}
async function readProfile() {
const [address] = await connect();
const ceramic = new CeramicClient(endpoint);
const idx = new IDX({ceramic});
try {
const data = await idx.get(
'basicProfile',
`${address}@eip155:1`
);
console.log('data: ',data);
if (data.name) {
setName(data.name);
}
if (data.avatar) {
setImage(data.avatar);
}
} catch (e) {
console.error('error: ',e);
setLoaded(true);
}
}
return (
<div className="App">
<button onClick={readProfile}>Read Profile</button>
</div>
);
}
export default App;