Won't build with webpack

[nycoliver]

Playing around with the new create-react-app but importing ipfs throws a bunch of errors. Cannot resolve module fs, net, tls. I could try adding the corresponding externals to webpack config but the readme says js-ipfs is transpiled with shims added so no need to adjust asset management process.

Not sure if I am missing something, or should just chalk this up to a work in progress.

[haadcode]

Try if this works for you: const IPFS = require('exports?Ipfs!ipfs/dist/index.js').

You might additionally have to change your webpack config. The one I use in Orbit is here: https://github.com/haadcode/orbit/blob/refactor/architecture/client/webpack.config.js

[nginnever]

Could you link us to your webpack config/project. Shouldn't be an issue. Simple configurations work well for me like this example. https://github.com/nginnever/ipfs-pad/blob/master/webpack.config.js

[claus]

@nginnever you're using OrbitDB though, and don't import js-ipfs directly. In OrbitDB, @haadcode currently works around the reported issue by doing the things he describes above. I'm seeing the same issues as the reporter with current versions of js-ipfs.

[nginnever]

@claus my link is probably a bad example since I was just testing things out and it's incomplete, I've never actually used orbitdb but I also haven't touched that project in a while and just reran it and reproduced the bug. Thanks for pointing it out.

[nginnever]

closing in favor of 353

[nycoliver]

Thanks @haadcode, seems to be working with import ipfs from 'ipfs/dist/index.js';

EDIT: Nevermind, spoke too soon. Builds fine, but now app is throwing ReferenceError: Can't find variable: fs, same as 353.

[haadcode]

@nycoliver in that case, I think you need to add 'fs' to webpack's 'externals' property:

externals: {
  fs : '{}'
  ...
}

[nycoliver]

I got it to work with the following config based off orbit client, thanks!
Still only v0.13.0 though.

Dependencies:

"ipfs": "^0.13.0", // 0.14 throws fs is not defined, even with external and alias
"exports-loader": "^0.6.3"

Webpack config:

config.resolve.alias = { fs: require.resolve('./src/fs-mock') }

Fs-mock:

module.exports = {
  createWriteStream: function(filename, options) {
    return;
  },
  writeFileSync: function() {
    return;
  },
  writeFile: function(path, data, options, cb) {
    if(typeof options === 'function')
      cb = options;
    cb(null);
  },
  openSync: function() {
    return;
  },
  writeSync: function() {
    return;
  },
  exists: function(path, cb) {
    cb(null, false);
  },
  existsSync: function (path) {
    return false;
  },
  readFileSync(path, options) {
    return;
  }
}