ocean protocol react tutorial npm start fails

user_3597730 0
Viewed 169

I am just trying to clone this repo: https://github.com/oceanprotocol/react-tutorial

when I run the app I get the following stack trace:

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.getPrototypeOf (<anonymous>)
    at Object../node_modules/whatwg-url/dist/utils.js (utils.js:48)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object../node_modules/whatwg-url/dist/URL.js (URL.js:4)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object../node_modules/whatwg-url/webidl2js-wrapper.js (webidl2js-wrapper.js:3)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object../node_modules/whatwg-url/index.js (index.js:3)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object../node_modules/@oceanprotocol/squid/dist/node/aquarius/Aquarius.js (Aquarius.ts:1)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object../node_modules/@oceanprotocol/squid/dist/node/ocean/Ocean.js (Ocean.ts:11)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object../node_modules/@oceanprotocol/squid/dist/node/squid.js (squid.ts:4)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/index.js (asset.js:54)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (index.js:126)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

I am not having much luck on unpacking the root cause of the issue and any help is appreciated!

create-react-app webpack reactjs javascript
1 Answers

Looks like the package that this tutorial is using is now deleted. (Squid.js)

And regarding why its giving TypeError because whatwg-url is a dependency pacakge of squid.js and whatwg-url is expecting an Object and its receiving undefined or null. May be squid.js internally calls some external url/api for creating an instance.

Instead of using :

import { Ocean } from '@oceanprotocol/squid'.

Use this :

react-tutorial repo has not been updated to support the V3 version of ocean protocol : https://github.com/oceanprotocol/react-tutorial/issues/14

import { Ocean } from '@oceanprotocol/react'

NPM : npm install @oceanprotocol/react https://www.npmjs.com/package/@oceanprotocol/react

Github Documentation : https://github.com/oceanprotocol/ocean.js

Hope this helps !! Cheers.

user_47515930
Related