Importing js-ipfs gives some webpack errors [Reactjs]

While I understand all support for js-ipfs has ceased in favour of the new ā€œHeliaā€ release, for reasons of backward compatibility, I would like to still use ipfs-core. However, I’m running into the same issue as above with regards to IPFS as a module and packaging it with a webapp using Webpack. Therefore, I thought I would dump all of my findings there in the hope that someone has a solution.

As the OP said, when importing ipfs or ipfs-core, a bunch of errors are output and the build fails. Many of these errors are browser incompability issues; for example, there is no concept of a filesystem in the browser’s js engine so the ā€˜fs’ module is useless. Therefore, this error can be avoided by using webpack’s resolve.fallback to either polyfill or disable completely, e.g.

resolve: {
  fallback: {
    fs: false
  }
}

or, install the fs-browserify module and use it as a replacement for native node fs:

resolve: {
  fallback: {
    fs: 'fs/'
  }
}

However, this does not solve the problem of node: protocol imports. The node: import seems to be a relatively new and mostly pointless exercise in introducing added frustration and confusion to js developers. Anyway, putting that to one side, it seems this cumbersome feature is here to stay.

Now, while webpack is convinced the problem is resolved, none of their suggestions work. In particular, they suggest using externals to provide support for protocols (although any formal documentation about this is missing).

There is a way to work around this using something called an externalPreset, which solves the node: protocol issue (I think it is because webpack interprets the protocol as a url and imports them in a different order? To be honest, I don’t really understand this feature). Anyway, externalPreset solves the webpack build issue but results in a runtime error:

Uncaught (in promise) ReferenceError: require is not defined

so, it doesn’t really resolve anything.

So, to summarize:

  • This seems like an ongoing problem, that is, there is no way to include IPFS in a webpack build. I’m also concerned that similar issues could arise even if I migrate to Helia,
  • This seems to be a Webpack v5 issue,
  • Someone else has suggested polyfills. As I noted, this solves other problems but not the node: protocol issue,
  • Webpack says they have fixed it but I have tried a number of permutations and cannot get Webpack to work,
  • There is a project called webpack-node-externals but it does not solve this problem,
  • The IPFS Examples webpack example does not compile and results in the same errors,
  • There is a prepackaged IPFS import which functions in the browser so IPFS must be getting it to build. However, it is not possible to determine which version of IPFS this build is from.

Therefore, based on my findings above, I’m wondering if anyone has any suggestions or a better understanding of webpack, that, perhaps, they can provide some further insight. Because, at the moment, I’m stuck with an app reliant at its core on IPFS but which I cannot package for the web using Webpack.

I’m also happy to share my exact webpack.config.js if it helps.