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

Question

您好，我在尝试运行我的 React 应用程序时遇到问题。我已经从使用陶瓷和 3id 网络的教程中安装了几个包。这个错误最近才出现，我在网上看过，但仍然不太确定是什么导致了这个问题。我使用的node版本是v14.15.0，我的npm版本是6.14.8，我在Windows 11 home version 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;

Answer 1

2021-12-23更新

此问题已在 Create React App 版本 5 中修复。

Create React App 当前不支持导入模块中的 ES2020（现代 Javascript）的某些功能。

??是 ES2020 Nullish coalescing operator 并且在导入的 Ceramic 模块中使用它会导致构建失败。

这个问题已经讨论 here 并且似乎不太可能在 Create React App 的下一个主要版本之前得到解决。

两种选择是使用替代的 React 框架，例如 Next.js which supports the features (example/instructions here)，或者手动设置 React 项目。

在此中讨论了其他可能的解决方案，但当问题出现在导入的库中时，接受的答案将不起作用。

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

Getting compilation errors regarding loaders when running React app

javascript

node.js

reactjs

webpack

babeljs

2021-12-23更新