運行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;

uj5u.com熱心網友回復：

Create React App 目前不支持匯入模塊中 ES2020（現代 Javascript）的一些特性。

?? 是ES2020 Nullish 合并運算子，在匯入的 Ceramic 模塊中使用它會導致構建失敗。

該問題在此處討論，并且在 Create React App 的下一個主要版本之前似乎不太可能得到解決。

兩種選擇是使用替代的 React 框架，例如支持這些功能的Next.js（此處的示例/說明），或者手動設定 React 專案。

此堆疊溢位問題中討論了其他可能的解決方案，但當問題出現在匯入的庫中時，已接受的答案將不起作用。

標籤：javascript 节点.js 反应 网络包 babeljs

上一篇：從webpack-ed組件庫中排除React

下一篇：ElasticSearch“A”或“空”