Getting compilation errors regarding loaders when running React app

Hi I’m having an issue when trying to run my react app. I’ve installed a couple of packages to from a tutorial using the ceramic and 3id networks. This error has only shown up recently and I’ve looked online but still not too sure what be causing the issue. The version of node I am using is v14.15.0, my npm version is 6.14.8 and I’m on Windows 11 home version 21H2

The error in question is:

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);

My package.json file is as follows:

{
  "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"
    ]
  }
}

The current code I have is also just this in my 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

Update 2021-12-23

This issue is fixed in Create React App version 5.

Create React App does not currently support some features of ES2020 (Modern Javascript) in imported modules.

?? is the ES2020 Nullish coalescing operator and use of this in the imported Ceramic module causes the build to fail.

The issue is discussed here and seems unlikely to be fixed until the next major version of Create React App.

Two options are to use an alternative React framework such as Next.js which supports the features (example/instructions here), or to set up the React project manually.

Other possible solutions are discussed in this stack overflow question, but the accepted answer will not work when the issue occurs in an imported library.

Advertisement

Answer

Update 2021-12-23