Babel.js 运行React应用程序时获取有关加载程序的编译错误

6kkfgxo0  于 2022-12-08  发布在  Babel
关注(0)|答案(1)|浏览(175)

嗨,我在尝试运行我的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;
fkaflof6

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中讨论了其他可能的解决方案,但当问题发生在导入的库中时,已接受的答案将不起作用。

相关问题