Truffle: Truffle Decoder cannot be imported in the browser

[adrianmcli]

I think this has something to do with the way it's being webpacked and published. It's not outputting a module compatible with ES6 import statements. The following fails:

import Decoder from "@truffle/decoder";
console.log(Decoder) // undefined

If you change it to CommonJS require statements, then it works:

const Decoder = require("@truffle/decoder")
console.log(Decoder) // {ContractDecoder: ƒ ...}

But both of the above cases should work properly.

[haltman-at]

Weird! Thanks for pointing this out, this'll have to be fixed...

[haltman-at]

Closing this since the issue is just that, as a TypeScript module without a default export, the way to import it is with import *.

[adrianmcli]

I'm having this issue again, and it doesn't seem to be a lack of default import as it actually fails catastrophically (for a lack of a better word, I apologize). I've created a reproduction repo here that is based on a plain Create React App + Decoder. The moment I try to import it, it fails with:

index.js:107 Uncaught TypeError: Cannot read property 'native' of undefined
    at Object../node_modules/fs-extra/lib/fs/index.js (index.js:107)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object../node_modules/fs-extra/lib/index.js (index.js:6)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object../node_modules/@truffle/decoder/dist/index.js (index.ts:176)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/App.js (App.css?4433:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/index.js (index.css?f3f6:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (serviceWorker.js:141)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

I wonder if it's something to do with the usage of fs.

[adrianmcli]

This time it's failing (with the same error as above) with all of the following cases:

// ES6 Module
import Decoder from "@truffle/decoder";

// ES6 Module w/ destructuring
import { forDeployedArtifact } from "@truffle/decoder";

// CommonJS Module
const Decoder = require("@truffle/decoder");

// CommonJS Module w/ destructuring
const { forDeployedArtifact } = require("@truffle/decoder");

[adrianmcli]

Note: everything works fine with Node.js. This seems to be a browser/frontend issue, which is why I suspect it's due to a reliance on some standard Node.js libraries that do not exist in the browser.

[haltman-at]

Blech, thanks for pointing this out. What's the error message, FWIW?

[adrianmcli]

The error msg is above: https://github.com/trufflesuite/truffle/issues/2841#issuecomment-606270734

[adrianmcli]

Looks like fs-extra is failing. I did an npm ls fs-extra and got this:

➜  decoder-import-bug git:(master) ✗ npm ls fs-extra
[email protected] /Users/adrianli/dev/decoder-import-bug
├─┬ @truffle/[email protected]
│ ├─┬ @truffle/[email protected]
│ │ ├── [email protected]  deduped
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └─┬ [email protected]
│       └── [email protected]
<irrelevant>

[haltman-at]

Ah, I see, thanks a bunch! Well, will have to see if can fix that, or what can be done if not...

[adrianmcli]

I forgot to link my reproduction repo: https://github.com/adrianmcli/decoder-import-bug

[haltman-at]

For now you can downgrade to the previous decoder version (4.1.0); you won't lose much functionality (just some stuff involving internal function pointers which I don't think you're currently handling anyway). But yeah will have to do something about this...

[haltman-at]

Another workaround would be to configure webpack to not attempt to import fs-extra, as mentioned here: https://github.com/jprichardson/node-fs-extra/issues/261

[adrianmcli]

For now you can downgrade to the previous decoder version (4.1.0); you won't lose much functionality (just some stuff involving internal function pointers which I don't think you're currently handling anyway). But yeah will have to do something about this...

sounds good, I'll try to run it at the older version (4.1.0)

[haltman-at]

OK, put up #2919 to address this. Hopefully it'll suffice and we won't have to resort to hackier measures...

[haltman-at]

Oops, seems we never closed this. (This was released in v5.1.20 -- Truffle Decoder version 4.2.1.) Closing!