嗨,我在尝试运行我的React应用程序时遇到了问题。我安装了几个包,以使用陶瓷和3id网络的教程。这个错误最近才出现,我已经上网查看了,但仍然不太确定是什么导致了这个问题。我使用的节点版本是v14.15.0,我的npm版本是6.14.8,我在Windows 11家庭版本21H2
问题中的错误是:
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);
我的package.json文件如下:
{
"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"
]
}
}
我的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;
1条答案
按热度按时间fkaflof61#
更新日期:2021年12月23日
此问题已在Create React App版本5中修复。
Create React App当前不支持导入模块中ES2020(现代Javascript)的某些功能。
??是ES2020 Nullish coalescing operator,在导入的Ceramic模块中使用它会导致构建失败。
该问题已在here中讨论,似乎不太可能在Create React App的下一个主要版本之前得到修复。
有两种选择,一种是使用支持特性(example/instructions here)的替代React框架,如Next.js,另一种是手动设置React项目。
本stack overflow question中讨论了其他可能的解决方案,但当问题发生在导入的库中时,已接受的答案将不起作用。