Webpack dat-dns not found

[holtwick]

When using the dat-sdk as described in the README with Webpack/Vue it does have an issue loading dat-dns:

const SDKPromise = require('dat-sdk/promise')

Error message:

* dns in ./node_modules/node-dat-archive/node_modules/dat-dns/index.js

The sample, see App.vue for the problematic import: datbox.zip

[RangerMauve]

Weird, I'm not sure what the issue is. It might be that Webpack/Vue isn't respecting the browser field properly. You could also double check that dat-dns is installed.

Would you mind posting a full stack trace if one exists?

[holtwick]

Sorry, it does not provide a full stack trace. This is what show up in the browser:

./node_modules/node-dat-archive/node_modules/dat-dns/index.js
Module not found: Error: Can't resolve 'dns' in '/Users/dirk/work/sandbox/datbox/node_modules/node-dat-archive/node_modules/dat-dns'

I can also confirm, that dat-dns is available at that path.

But I think it should not load any node.js related stuff in the browser anyway.

[RangerMauve]

It seems that the issue is inside the node-dat-archive module, not the SDK.

Probably related to the use of pauls-dat-api. I'd suggest opening the issue there. 😅

[holtwick]

Well, you advertise the SDK as being compatible with regualar web. Wouldn't it be great for general adoption, if it worked out of the box ;)

[RangerMauve]

The problem you're describing isn't coming from the dat SDK, it's coming from some other module in your app. As far as I've seen it is working outside of the box on the web.

[RangerMauve]

Wait a minute

[RangerMauve]

Ha ha, okay I think I got it, it's an SDK bug after all. :P Not sure why it isn't manifesting with browserify. I'll ping you when I have a fix out.

[RangerMauve]

See if version 1.0.1 helps. https://github.com/datproject/sdk/releases/tag/v1.0.1

It might be a side effect of webpack not propagating the changes in the browser field to dependencies the way browserify does.

[holtwick]

Thanks. I can confirm, that this error is gone by now.

But another one shows up probably related to graceful-fs:

polyfills.js?a0a3:31 Uncaught TypeError: Cannot read property 'match' of undefined
    at patch (polyfills.js?a0a3:31)
    at patch (graceful-fs.js?0da7:96)
    at Object.eval (graceful-fs.js?0da7:88)
    at eval (graceful-fs.js:348)
    at Object../node_modules/graceful-fs/graceful-fs.js (chunk-vendors.js:3338)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at eval (index.js?bf81:4)
    at Object../node_modules/pauls-dat-api/node_modules/fs-extra/lib/fs/index.js (chunk-vendors.js:4865)
    at __webpack_require__ (app.js:786)

[RangerMauve]

That one is coming from pauls-dat-api which is definately not part of the SDK. :P

Are you maybe trying to use it and the SDK at the same time? As I understand, pauls-dat-api is only meant to be used in node.js.

[holtwick]

Well the only import I'm doing is const { DatArchive } = require('dat-sdk/auto') and I was under the impression it would automatically load whatever is required for the current environment...?

[RangerMauve]

Hmmm, seems like it's more dependency issues. Looking into it.

[RangerMauve]

Worst case you could try using browserify to build the SDK, and then integrate the bundle with your app.

[RangerMauve]

I think you'll need to modify your weback config to ignore the fs-extra module.

[holtwick]

Well, I think webpack is a very common part of developers toolchain. It probably sometimes is too smart. I suppose it would make sense to provide an explicit import path for use in common web browsers, where any node.js related import is omitted. Otherwise webpack will integrate whatever it finds an import for and this may cause the seen issues. What do you think?

I'm new to DAT and evaluating it right now. Since I'm very curious I continue retrying, because I believe the project is awesome. But other devs might find that frustrating and not evaluate any futher.

[RangerMauve]

Yeah, the main issue is that the PDA module is relying on node-isms and Webpack isn't as robust as Browserify for handling cases like that. 😅

I'll need to either reimplement PDA or find a replacement for it that doesn't rely on the FS so heavily.

I'd suggest using the browserify bundles in your project in the meantime, or seeing if there are webpack plugins that make it behave more like browserify. I'll add a TODO to make a demo using Webpack for bundling in the near future.

[holtwick]

Ok, thanks for your help.

[RangerMauve]

Might make sense to throw: https://github.com/geut/hyperdrive-promise into the mix, but it's using hyperdrive10 which is still a bit of a WIP. 😅

[RangerMauve]

On IRC, @urgent posted that they added the following to their webpack config to make this work:

resolve: {
    alias: {
      fs: 'graceful-fs'
    }
}

A PR with a description of how to set up webpack would be very much appreciated.

[RangerMauve]

This should be fixed if you use the config in #43

Big thanks to @urgent for figuring this out!