error: Could not resolve "electron" when using in a web app

[rhysburnie]

Hi I get the following in a vite/vue app when i import ipfs

Pre-bundling dependencies:
 vue
 anchorme
 ipfs-core
(this will be run only when your dependencies or config have changed)
> node_modules/electron-fetch/lib/index.es.js:1257:21: error: Could not resolve "electron" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
   1257 │   electron = require('electron');

It only happens when I import ipfs but I am confused why electron would be involved at all in this situation.

I have seen people use ipfs fine in react (web) apps

[welcome]

Thank you for submitting your first issue to this repository! A maintainer will be here shortly to triage and review.
In the meantime, please double-check that you have provided all the necessary information to make this process easy! Any information that can help save additional round trips is useful! We currently aim to give initial feedback within two business days. If this does not happen, feel free to leave a comment.
Please keep an eye on how this issue will be labeled, as labels give an overview of priorities, assignments and additional actions requested by the maintainers:

• "Priority" labels will show how urgent this is for the team.
• "Status" labels will show if this is ready to be worked on, blocked, or in progress.
• "Need" labels will indicate if additional input or analysis is required.

Finally, remember to use https://discuss.ipfs.io if you just need general support.

[TheDutchCoder]

We can second this issue.
What an odd thing to import, it's probably buried in some dependency down the chain.

None of the previous versions work either btw. I don't think this lib is truly ESM currently?

[TheDutchCoder]

I think I tracked down the core of the problem.

The js-ipfs-utils package lists electron-fetch as a dependency: https://github.com/ipfs/js-ipfs-utils/blob/master/package.json#L55

That package relies on process.versions.electron: https://github.com/arantes555/electron-fetch/blob/master/src/index.js#L22

Apparently, that resolves to true when running Vite (I don't know what it does under the hood, but I think it's a good starting point).

Temporarily hard-coding that to false doesn't help, as that whole package seems to be a Node package, not a browser package.

I think js-ipfs-utils should remove that package as a dependency for the ESM build. I can open an issue there as well.

[rhysburnie]

It seems like a bit of a rabbit hole... I also played around with the files as you did forcing it to return false as a test from the electron detection, but there there we just more of similar issue from other non esm modules being used.

For now I am just going to use a project via @vue/cli vue3 + webpack rather than vite

[ghostdevv]

As a workaround you can add this to your vite config:

      optimizeDeps: {
        exclude: ['ipfs-http-client', 'electron-fetch']
      }

[gnomadic]

added that and the server starts, but now:

[vite] connecting...
client.ts:52 [vite] connected.
index.mjs?v=498773e3:7 Uncaught SyntaxError: The requested module '/node_modules/merge-options/index.js?v=498773e3' does not provide an export named 'default'

[Sameer-472]

As a workaround you can add this to your vite config:

      optimizeDeps: {
        exclude: ['ipfs-http-client', 'electron-fetch']
      }

[abir-sharma]

As a workaround you can add this to your vite config:

      optimizeDeps: {
        exclude: ['ipfs-http-client', 'electron-fetch']
      }

i added this but now m getting Uncaught SyntaxError: Unexpected string this error how can i fix this???

[vladfaust]

@abir-sharma if you're using Vite, this may be the reason: vitejs/vite#3229

[janaSunrise]

I'm building a react library that uses this library. I get the error that electron is not found and is needed by the electron-fetch package.

I'm using rollup to bundle as esm and cjs, and using v56.0.2 of the IPFS HTTP client. I'm clueless why this is breaking and would appreciate help in order to get this issue fixed and build my library.

[melMass]

Same here in SvelteKit / Vite, excluding these from optimize deps creates other errors for me, unfortunately a 500 one with not much traceback

[Karakatiza666]

Same issue with SvelteKit / Vite, using "ipfs-http-client": "^56.0.2"

[jlr-io]

Does anyone know of a setup that doesn't run into this? The only thing that works for me is vanilla js.

[kevinXmichael]

I am using Vite + Svelte and also having the issue with ipfs-http-client in version 56.0.3.

[raduciobanu22]

A workaround is to mark electron-fetch as external using https://www.npmjs.com/package/vite-plugin-externals

// svelte.config.js

import { viteExternalsPlugin } from 'vite-plugin-externals'

const config = {
	kit: {
		adapter: adapter(),
		vite: {
			plugins: [
				viteExternalsPlugin({
					'electron-fetch': 'Electron-Fetch',
				}),
			]
		}
	},
};

Update: Sorry, not working, getting a 500 after this.

[pablomendezroyo]

I had a similar issue with ipfs-http-client + webpack

This webpack.config.js worked for me

module.exports = {
... 
  resolve: {
    fallback: {
      electron: false
    }
  }
...

[whizzzkid]

js-ipfs is being deprecated in favor of Helia. You can follow the migration plan here #4336 and read the migration guide.

This issue has been resolved in Helia! if this does not address your concern please let us know by reopening this issue before 2023-06-05!