OrbitDB does not work with Svelte/Vite about orbitdb HOT 11 CLOSED

Thank you @silkroadnomad. Yes, I previously saw @DougAnderson444 's project and I can see that your project works on Svelte 3. Unfortunately, my project is already implemented with the latest version of Svelte 4 and Sveltekit and it's not possible for me to downgrade to an old version of Svelte for many reasons.

I tried to migrate your project to Svelte 4 using @Rich-Harris 's migration guide, but after the first step (npx svelte-migrate routes), I get the following error in the browser:

Not found: /
Error: Not found: /
    at resolve (file:///home/julia/practice/orbit/doug/.svelte-kit/runtime/server/index.js:3360:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async respond (file:///home/julia/practice/orbit/doug/.svelte-kit/runtime/server/index.js:3253:20)
    at async file:///home/julia/practice/orbit/doug/node_modules/@sveltejs/kit/dist/chunks/index.js:295:24

Does anybody have any ideas about how to make Orbit/IPFS cleanly work with the latest version of Svelte and SvelteKit?

from orbitdb.

@silkroadnomad Yes, Helia works fine with Svelte 4.x. That was the first thing I tried and described in my initial post. In fact, I would much rather use Helia. But OrbitDB still has a dependency on ipfs-core; so there are errors when I try to replace ipfs-core with Helia.

I would rather never use ipfs-core, but I don't know how long it will take the OrbitDB team to make it compatible with Helia. So using ipfs-core would have been better than nothing at all. But at this point, it seems we're still stuck with nothing at all for Svelte 4.x.

I agree that the IPFS team could potentially know more about why ipfs-core throws the errors I described above, but they are focused on Helia now and they don't provide any substantial support for the old ipfs-core code anymore.

In contrast, Helia works fine with Svelte 4.x; the problem is OrbitDB is still dependent upon ipfs-core. That means the IPFS team can't really help us and only the OrbitDB team can help fix the Helia compatibility problems.

Anybody have any other ideas?

from orbitdb.

@silkroadnomad Ah, I see now. Your example is fantastic! Thank you.

Now I see that the only way to use ODB effectively is to have a strong grasp of how to configure at least 3 different core libraries (libp2p, Helia and ODB) and many of their modules. It's not immediately obvious from the existing docs that we need to configure all these different pieces. And the examples in the docs are not really functional or correct right now because they still include configs and parameters that are only applicable for the older libraries and/or not applicable to the browser. This makes the onboarding process much more difficult.

I understand it's an open source project and resources are limited and the team is working as fast as possible to migrate everything to Helia. So I'm not complaining; I'm just pointing out an area for potential improvement to make it easier for others to get started.

In that spirit, your comments in this thread have helped me see exactly what I need to study and configure to make all these pieces work together. I think the project team should create a simple "Getting Started with Helia" page (similar to the old page) and integrate your examples into the project docs.

I appreciate everybody here (ODB team and community) for helping the world create great decentralized apps!

from orbitdb.

@JuliaBonita I accidentally found the reason for the error: ipfs/helia-ipns#59

from orbitdb.

I had only problems with Svelte4! But you can have a look here:
https://github.com/silkroadnomad/ipfs-vite-svelte-kit

That way, I can work with Svelte3.

OrbitDb and IPFS must be bundled with esbuild see package.json https://github.com/silkroadnomad/ipfs-vite-svelte-kit/blob/master/package.json#L13

from orbitdb.

Yes, this was my experience too. I also used the migration guide and tried a couple other things.

I received this tip: https://github.com/orbitdb/orbitdb-examples/tree/main/vue-vite

The OrbitDBs vue example with vite! Svelte uses vite too.

from orbitdb.

The OrbitDBs vue example with vite! Svelte uses vite too.

Thank you @silkroadnomad . I studied the Vue example, but it doesn't help for SvelteKit because the Vue example adds this to the vite.config.ts file:

define: {
    'process.env': {},
    'global.env': {},
  },

The global.env definition breaks many other modules in my SvelteKit project. So I added this to the app.html file to resolve the global issue:

if (global === undefined) {
        var global = window;
      }

But then I get this error:

app.js:41  TypeError: Cannot destructure property 'signals' of 'import_node_os.constants' as it is undefined.
    at normalizeSignal (signals.js:29:9)
    at Array.map (<anonymous>)
    at getSignals (signals.js:10:47)
    at getSignalsByName (main.js:9:15)
    at main.js:23:28

I thought maybe that error was related to the module trying to access the node:os library, but not having it available in the browser. So I tried many different ways to load polyfills for Vite, but the polyfills produce outdated code errors and break various other modules.

So again, does anybody have any ideas about how to make Orbit/IPFS cleanly work with the latest version (at least 4.0) of Svelte and SvelteKit?

from orbitdb.

Thank you @JuliaBonita for going more profound here. I'd even say it's not an OrbitDb issue per se. I guess (I didn't try) the issue already occurs when dealing with IPFS alone in Svelte4. Maybe Helia-IPFS even works out of the box with Svelte4? I haven't tried either.

So there would be a possibility to check what IPFS community is doing with Svelte and vice verca. There should be some folks working on it. Maybe @DougAnderson444 has an opinion on IPFS with Svelte4.

Update: I was just doing that with helia:
npm create svelte@latest my-app & cd my-app
npm install helia
Then added the example code from https://github.com/ipfs/helia.

Currently I am cloning Orbit-DB and checking out helia branch plan to build and move it to node-modules manually.

from orbitdb.

@JuliaBonita All works with the helia branch of OrbitDB.
Don't import ipfs-core! Only import helia!
E.g. do like this:

npm create svelte@latest my-app & cd my-app
npm install helia
npm install "https://github.com/orbitdb/orbitdb.git#helia" --save

Then put this into your <script> section inside +page.svelte

<script>
	import { createHelia } from 'helia'
//	import IPFS from 'ipfs-core'
	import { createOrbitDB } from '@orbitdb/core'
	import { strings } from '@helia/strings'

	const startHelia = async () => {

		const helia = await createHelia()
		const s = strings(helia)

		const myImmutableAddress = await s.add('hello world')

		console.log(await s.get(myImmutableAddress))
		return helia 
	}

	;(async function () {
	const ipfs = await startHelia()//await IPFS.create()
	const orbitdb = await createOrbitDB({ ipfs })

	// Create / Open a database. Defaults to db type "events".
	const db = await orbitdb.open("hello")
	
	const address = db.address
	console.log(address)
	// "/orbitdb/zdpuAkstgbTVGHQmMi5TC84auhJ8rL5qoaNEtXo2d5PHXs2To"
	// The above address can be used on another peer to open the same database

	// Listen for updates from peers
	db.events.on("update", async entry => {
		console.log(entry)
		const all = await db.all()
		console.log(all)
	})

	// Add an entry
	const hash = await db.add("world")
	console.log(hash)

	// Query
	for await (const record of db.iterator()) {
		console.log(record)
	}
	
	await db.close()
	await orbitdb.stop()
	})()
// hello world
</script>

and in my console.log at least appears the orbitdb address!

from orbitdb.

Thank you @silkroadnomad . I remember getting to this point in some of my previous testing with Helia and the OrbitDB/helia branch, but I stopped focusing on Helia because the browser errors still prevent it from working in most of my tests:

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module:

When I was investigating that error previously, I saw something that made me think it was caused because OrbitDB/Helia still had a dependency on ipfs-core. However, I just looked at the Node terminal errors, which are totally different:

PublishError.InsufficientPeers at GossipSub.publish

So maybe the browser error is really just a symptom of the insufficient peers error. That seems like it should be a relatively easy problem to fix by adding a list of bootstrap peers somewhere in the Helia/OrbitDB configs.

I don't have enough experience yet with these two libraries to know exactly how to do that, but I will perform some more tests later today.

from orbitdb.

You can get rid of this error very easily by adding a config to createHelia(config)
Have a lot of fun! :)

import { bootstrap } from '@libp2p/bootstrap';
import { pubsubPeerDiscovery } from '@libp2p/pubsub-peer-discovery';
import { circuitRelayTransport, circuitRelayServer } from 'libp2p/circuit-relay';
import { webRTC, webRTCDirect } from '@libp2p/webrtc';
import { webTransport } from '@libp2p/webtransport';
import { webSockets } from '@libp2p/websockets';
import { all } from '@libp2p/websockets/filters';
import { identifyService } from 'libp2p/identify';
import { autoNATService } from 'libp2p/autonat';
import { gossipsub } from '@chainsafe/libp2p-gossipsub';
import { kadDHT } from '@libp2p/kad-dht';
import { ipnsSelector } from 'ipns/selector';
import { ipnsValidator } from 'ipns/validator';

const multiaddrs = [ //add your own WebRTC Stars Servers here too! 
			'/dnsaddr/bootstrap.libp2p.io/p2p/QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN',
			'/dnsaddr/bootstrap.libp2p.io/p2p/QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa',
			'/dnsaddr/bootstrap.libp2p.io/p2p/QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb',
			'/dnsaddr/bootstrap.libp2p.io/p2p/QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt'
		];
		const bootstrapConfig = { list: multiaddrs };
		const config = {
			libp2p: {
				// https://github.com/ipfs/helia/blob/main/packages/helia/src/utils/libp2p-defaults.browser.ts#L27
				addresses: {
					listen: ['/webrtc', '/wss', '/ws']
				},
				transports: [
					webSockets({ filter: all }),
					webRTC(),
					webRTCDirect(),
					webTransport(),
					// https://github.com/libp2p/js-libp2p-websockets#libp2p-usage-example
					circuitRelayTransport({ discoverRelays: 3 })
				],
				//streamMuxers: [mplex()],
				// streamMuxers: [yamux()],
				peerDiscovery: [bootstrap(bootstrapConfig), pubsubPeerDiscovery()],
				services: {
					identify: identifyService(),
					autoNAT: autoNATService(),
					//pubsub: gossipsub({allowPublishToZeroPeers: true, emitSelf: false, canRelayMessage: true}),
					pubsub: gossipsub({
						allowPublishToZeroPeers: true,
						emitSelf: true,
						canRelayMessage: true
					}),
					dht: kadDHT({
						clientMode: true,
						validators: { ipns: ipnsValidator },
						selectors: { ipns: ipnsSelector }
					})
				}
				// https://github.com/libp2p/js-libp2p/blob/master/doc/CONFIGURATION.md#configuring-connection-gater
				//connectionGater: {denyDialMultiaddr: async (...args) => false},
			}
		};

from orbitdb.