How to use react-orbitdb with react 18.x

[silkroadnomad]

I created a brand new react app with react 18.x

yarn create react-app my-react-orbitdb 
cd my-react-orbitdb  
yarn add react-orbitdb
yarn start 

Then I replaced App.js with such code:

import {OrbitProvider,useOrbitDb} from 'react-orbitdb'

const App = () => (
  <div>
    <OrbitProvider>
      <h1>Test</h1>
    </OrbitProvider>
  </div>
);

export default App;

My browser console was showing me this error: "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem."

Then deleted node_modules and yarn.lock. did npm install instead of yarn install and yes react-orbitdb is based on react 16.x.

Now I am trying to replace my react 18 libs with react 16 ones but I am becoming a bit overwhelmed. react-orbitdb usees parcel in the example project, but as far as I understand react-scripts 5.x is using webpack here? I just wanted to leave this here if theres a solution for such kind of questions.

[silkroadnomad]

It turns out the same error comes when I am creating a new parcel bundled project with exactly the same package.json as from react-orbitdb and the sources from examples directory. But only when i want to import import { OrbitProvider, useOrbitDb } from "react-orbitdb"; (after npm install react-orbitdb)

(edited) Also it seems a npm packages with name react-js version 17.x was also imported into node-modules from some other dependency which I couldn't yet identify.

[pouriya73]

you need insert this code into package.json .

react-scripts --openssl-legacy-provider start --openssl-legacy-provider with this you can use react 18.x

[silkroadnomad]

This doesn't seem to change anything. Still same error in the browser console.

[pouriya73]

@inspiraluna Try to do this by changing the configuration of the package,json - use vite to run reactjs vite npm . you can see here https://www.npmjs.com/package/vite

[castorinop]

@inspiraluna Try to do this by changing the configuration of the package,json - use vite to run reactjs vite npm . you can see here https://www.npmjs.com/package/vite

Do you have a example ?

[pouriya73]

@inspiraluna Try to do this by changing the configuration of the package,json - use vite to run reactjs vite npm . you can see here https://www.npmjs.com/package/vite

Do you have a example ?

I will send you

[silkroadnomad]

I came across my old question today and felt competent enough to port your vite version to a react version with webpack. Its a fork https://github.com/inspiraluna/react-orbitdb and it seems to work at least by importing the npm module now. see also https://www.npmjs.com/package/@decentrasol/react-orbitdb

I am still experiencing issues with browsers replication and it will be fixed as I found the reason.

Let me know if somebody finds it useful and/or other comments on other issues.

Please make sure to add your own webrtc star server into the config like so:

const App = () => {

  const config = {
    repo: './example',
    config:
    {  
      Addresses: {
      Swarm: [
      '/dns6/ipfs.le-space.de/tcp/9091/wss/p2p-webrtc-star',
      '/dns4/ipfs.le-space.de/tcp/9091/wss/p2p-webrtc-star'
    ]}}}

  return (
    <div> 
      <OrbitProvider config={config}>
        <EventLogDemo/>
      </OrbitProvider>
    </div>
  );
};