3box-js icon indicating copy to clipboard operation
3box-js copied to clipboard
verified publisher icon 3box

Chatbox example is not working

Open rstuven opened this issue 5 years ago • 1 comments

Describe the bug After MetaMask sign in, the app doesn't show chatbox.

To Reproduce Steps to reproduce the behavior:

  1. git clone [email protected]:3box/3box-chatbox-react.git && cd 3box-chatbox-react
  2. npm install && npm run start
  3. Open http://localhost:8080/
  4. Sign in using MetaMask
  5. Error in console log.

Desktop (please complete the following information):

  • OS: macOS 10.15.5
  • Browser: Chrome
  • Version: 84.0.4147.125 (Official Build) (64-bit)

Additional context

Network log

Request: GET https://beta.3box.io/address-server/odbAddress/0xba8398ce00912922de4ab30caad9a9227872e47a Response: 200

{"status":"success","data":{"rootStoreAddress":"/orbitdb/QmWiw1B9nG1MC8P8oQZanryGFyB3zMEgb1sh8Z5m4i8rZv/1220464eca31591c31f07450fc5e718a7b592065c4d0ba84520b573ea7b81860632f.root","did":"did:3:bafyreiheopnbxwz24uqukjg4ku7povwffsxybx253v23slkuwm5ybqtsx4"}}
Console log 
generating 2048-bit RSA keypair...
VM48508:1 Fetch finished loading: GET "https://beta.3box.io/address-server/odbAddress/0x1ac6348a404a061dfb1a2709d68361f9f3770004".

rfc4648.js:56 Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
    at encode (rfc4648.js:56)
    at Object.encode (rfc4648.js:86)
    at Base.encode (base.js:14)
    at Function.encode (index.js:42)
    at ./node_modules/ipfs-repo/src/blockstore-utils.js.exports.cidToKey (blockstore-utils.js:19)
    at Object.get (blockstore.js:43)
    at loadOrFetchFromNetwork (index.js:200)
    at Bitswap.get (index.js:231)
    at BlockService.get (index.js:96)
    at IPLDResolver.get (index.js:136)
encode @ rfc4648.js:56
encode @ rfc4648.js:86
encode @ base.js:14
encode @ index.js:42
./node_modules/ipfs-repo/src/blockstore-utils.js.exports.cidToKey @ blockstore-utils.js:19
get @ blockstore.js:43
loadOrFetchFromNetwork @ index.js:200
get @ index.js:231
get @ index.js:96
get @ index.js:136
get @ get.js:15
(anonymous) @ utils.js:180
readCbor @ index.js:79
read @ index.js:127
fromMultihash @ entry.js:145
(anonymous) @ entry-io.js:140
fetchEntry @ entry-io.js:81
(anonymous) @ index.js:57
setTimeout (async)
load @ Replicator.js:107
sync @ Store.js:314
async function (async)
sync @ Store.js:313
_onMessage @ OrbitDB.js:258
onMessage @ OrbitDB.js:273
_handleMessage @ exchange-heads.js:20
emit @ events.js:153
_messageHandler @ direct-channel.js:84
emit @ events.js:153
(anonymous) @ pubsub.js:221
_emitMessage @ pubsub.js:219
_processRpcMessage @ pubsub.js:215
_processRpcMessage @ index.js:155
(anonymous) @ pubsub.js:200
async function (async)
(anonymous) @ pubsub.js:190
_onRpc @ pubsub.js:174
(anonymous) @ pubsub.js:121
async function (async)
(anonymous) @ pubsub.js:118
rawPipe @ index.js:4
pipe @ index.js:49
_processMessages @ pubsub.js:114
_onIncomingStream @ index.js:181
async function (async)
_onIncomingStream @ index.js:174
_onStream @ upgrader.js:313
onStream @ upgrader.js:235
async function (async)
onStream @ upgrader.js:231
_handleIncoming @ mplex.js:202
(anonymous) @ mplex.js:151
async function (async)
(anonymous) @ mplex.js:149
rawPipe @ index.js:4
pipe @ index.js:49
(anonymous) @ mplex.js:144
(anonymous) @ index.js:18
rawPipe @ index.js:4
pipe @ index.js:49
_createConnection @ upgrader.js:261
upgradeOutbound @ upgrader.js:189
async function (async)
upgradeOutbound @ upgrader.js:168
dial @ index.js:45
async function (async)
dial @ index.js:41
dial @ transport-manager.js:87
dialAction @ index.js:140
(anonymous) @ dial-request.js:58
async function (async)
(anonymous) @ dial-request.js:54
run @ dial-request.js:53
_createPendingDial @ index.js:158
connectToPeer @ index.js:75
dialProtocol @ index.js:300
dial @ index.js:276
connect @ connect.js:7
(anonymous) @ utils.js:180
_callee31$ @ 3box.js:1905
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
getIPFS @ 3box.js:1926
_callee27$ @ 3box.js:1717
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
create @ 3box.js:1741
_callee30$ @ 3box.js:1830
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
openBox @ 3box.js:1849
_callee$ @ Example.js:29
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ bootstrap:856
_next @ bootstrap:856
Promise.then (async)
asyncGeneratorStep @ bootstrap:856
_next @ bootstrap:856
(anonymous) @ bootstrap:856
(anonymous) @ bootstrap:856
componentDidMount @ Example.js:22
$ npm ls --depth=1 
[email protected] /Users/rstuven/lab/3box-chatbox-react
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── @babel/[email protected] deduped
│ ├── @ethersproject/[email protected]
│ ├── @ethersproject/[email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── @babel/[email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ └── [email protected] deduped
├─┬ @babel/[email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected] deduped
├─┬ @babel/[email protected]
│ ├── @babel/[email protected]
│ └── @babel/[email protected]
├─┬ @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected] deduped
│ ├── @babel/[email protected]
│ ├── @babel/[email protected] deduped
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected] deduped
├─┬ @babel/[email protected]
│ ├── @babel/[email protected] deduped
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ ├── @babel/[email protected]
│ └── @babel/[email protected]
├─┬ @babel/[email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ ├── [email protected]
│ └── [email protected]
├─┬ @babel/[email protected]
│ └── [email protected]
├── UNMET PEER DEPENDENCY @types/react@^15.0.0 || ^16.0.0
├── [email protected]
├─┬ [email protected]
│ ├── @babel/[email protected] deduped
│ ├── @babel/[email protected] deduped
│ ├── @babel/[email protected] deduped
│ ├── @babel/[email protected] deduped
│ ├── [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ ├── @babel/[email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ └── [email protected] deduped
├── [email protected]
├─┬ UNMET PEER DEPENDENCY [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ └── [email protected] deduped
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected] deduped
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── @webassemblyjs/[email protected]
│ ├── @webassemblyjs/[email protected]
│ ├── @webassemblyjs/[email protected]
│ ├── @webassemblyjs/[email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected] deduped
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
└─┬ [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected] deduped
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  └── [email protected]

npm ERR! peer dep missing: react-dom@^15.4.2, required by [email protected]
npm ERR! peer dep missing: @types/react@^15.0.0 || ^16.0.0, required by [email protected]
npm ERR! peer dep missing: bufferutil@^4.0.1, required by [email protected]
npm ERR! peer dep missing: utf-8-validate@^5.0.2, required by [email protected]
npm ERR! peer dep missing: bufferutil@^4.0.1, required by [email protected]
npm ERR! peer dep missing: utf-8-validate@^5.0.2, required by [email protected]
npm ERR! peer dep missing: bufferutil@^4.0.1, required by [email protected]
npm ERR! peer dep missing: utf-8-validate@^5.0.2, required by [email protected]

rstuven avatar Sep 05 '20 21:09 rstuven

I found the root cause: Some dependencies (see below) are installing [email protected], which removes the buffer property from the CID class, while others still depend on that property.

$ npm ls cids    
[email protected] /Users/rstuven/lab/3box-chatbox-react
├─┬ [email protected]
...
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   ├── [email protected] 
│ │   └─┬ [email protected]
│ │     └── [email protected] 
...

My workaround was to install a previous version of ipfs-log:

npm install [email protected]

rstuven avatar Sep 06 '20 20:09 rstuven