javascript - 运行 React 应用程序时获取有关加载程序的编译错误
问题描述
嗨,我在尝试运行我的 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;
解决方案
2021-12-23 更新
此问题已在 Create React App 版本 5 中修复。
Create React App 目前在导入的模块中不支持 ES2020 (Modern Javascript) 的某些特性。
?? 是ES2020 Nullish 合并运算符,在导入的 Ceramic 模块中使用它会导致构建失败。
这个问题在这里讨论,似乎不太可能在 Create React App 的下一个主要版本之前得到解决。
两种选择是使用替代的 React 框架,例如支持这些功能的Next.js (此处的示例/说明),或者手动设置 React 项目。
此堆栈溢出问题中讨论了其他可能的解决方案,但当问题出现在导入的库中时,接受的答案将不起作用。
推荐阅读
- laravel - Laravel Socialite Providers GOOGLE ERROR Legacy People API 尚未在项目中使用
- python - Jira Python 自定义字段
- regex - 删除 Wordpress URL 上的问号
- php - 如何使用 PHP 解析 Google Fit Json 字符串
- c# - 缺少小数分隔符
- android - GetCurrent 用户仅从 Firebase Google 应用返回登录用户
- google-cloud-platform - Google Cloud 的本地数据传输服务
- php - 我可以在 PHP 中使用 random_bytes(3) 生成多少个随机字符串?
- python - 使用python从网站的多个页面中抓取数据
- angular - 将 ag 网格表转换为 PDF 文件