Webpack bundle failing at CID: Unexpected token: name (CID)

[lightninglu10]

Hey guys, I'm trying to bundle https://github.com/ipfs/js-ipfs, and they're using cids.

Whenever I try to build, yarn run build, with create-react-app, I'm getting this error:

static/js/main.d24ead13.js from UglifyJs
Unexpected token: name (CID) [./~/cids/src/index.js:23,0][static/js/main.d24ead13.js:8442,6]

looks like uglifyJS doesn't look CID? tracked it down to your package and was wondering if you had any insights.

Unable to build because of this.

[JohnAllen]

Yeah I get something related.

npm run build
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file: 
        ./node_modules/cids/src/index.js:23 
Read more here: http://bit.ly/2tRViJ9

From reading that link it sounds like CID doesn't precompile its code and some es6 code can't be run in the browser without using a transpiler and precompiling.

[dignifiedquire]

You can either transpile all ES6 things using babel or use uglify-es which is the uglify2 version compatible with es6 syntax.

@diasdavid why did you mark this as a bug?

[daviddias]

Picked the wrong issue. Thanks for catching that :)

[acailly]

I don't get how it is not a bug?

Currently, someone who wants to quickly make a React app with an IPFS hello world and publish it on its github pages to share it (someone like me) will likely fail to do so because of this error.

99% of these guys will not transpile the lib but they will say "IPFS? Nah, not stable enough", leave and don't come back until IPFS makes the headlines.

I think this kind of issue could discourage a lot of early adopters and should not be considered lightly.

My 2 cents 💗

(Additionnal info: this issue tracks the future use of uglify-es in create-react-app)

[daviddias]

Very valuable 2 cents, @acailly.

I agree it should be fixed so that devs don't have to work around it. There is also tracking of the same issue here: libp2p/js-libp2p#65. I can add the label bug if that makes a difference, either way, it requires changing how we do the duck typing throughout the codebase.

I would be very happy to accept a contribution that removes the need to check constructor name.

[AquiGorka]

@dignifiedquire I did what you mention about using uglify-es and the error still shows.

I had to eject the create-react-app, modify the minify step to use Uglify 3 (requiring the webpack plugin). The build process works but the error stills renders to the console and the app was not able to communicate with IPFS (using the files component).

I did try to use Uglify 3s configuration parameter to maintain class names keep_fnames: true but this did not work.

[ecarrollcode]

It seems @dignifiedquire hit the nail on the head - everything I can find indicates that it's a compatibility issue between ES5 and ES6. @AquiGorka already tried uglify-es, but did anyone try using Babel? That seems like a good option for resolving this.

[AquiGorka]

I tried Babel too-I mean, I tried almost everything I could think of:

• uglify @2 and @3
  • using (for each version) the different parameters to maintain/keep class names
• babel
• manually transpiling the files that throw the errors (and ALL of their dependencies as well)

I even wrote a blog post about it all: http://bits.citrusbyte.com/the-state-of-frontend-development-with-IPFS-in-2017/

Catching up to this after a while, found this:
probably fixes the issue: libp2p/js-libp2p#177

@abitrolly if you want a workaround:
In my case, I removed the minify step, and when a solution is found I will add it back.
The app works perfectly and with code splitting I was able to split the whole unminified bundle.
Let me know if you want specifics for the workaround.

[kidandcat]

Hi, I'm trying to figure what's the problem here and try to help, I did the first step in this issue:

Hey guys, I'm trying to bundle https://github.com/ipfs/js-ipfs, and they're using cids.

Whenever I try to build, yarn run build, with create-react-app, I'm getting this error:

But it compiled without any problem, have that project been updated to fix that bug?

[vs77bb]

Hi all - just as an FYI, there's a bounty of .05ETH on the solve of this issue at: https://gitcoin.co/issue/ipld/js-cid/38

[daviddias]

Related - ipfs/js-ipfs#938 (comment)

[dimkk]

Hey, feels like managed to solve your issue.
You can checkout my repo https://github.com/dimkk/gitcoin-js-scid-38
It's simple and dirty, but looks like job's done.

I can't submit on gitcoin, cuz its require eth to be in my wallet, so i bought it, but need to wait it to arrive - like a day or smth.

[AquiGorka]

@dimkk there is no grotesque module in your repo...

[daviddias]

@fsdiogo is onto this one and already has a bunch of PRs coming. :)

[dimkk]

@AquiGorka sorry mate, fixed it

[fsdiogo]

The problem was that the repo ipld/eth-hash-to-cid had an older version of js-cid as a dependency, but @diasdavid already updated it.

We'll need to update a bunch of deps in js-ipfs for the whole uglify issue to be solved, but I'm working on that.

Check ipfs/js-ipfs#938 (comment) for reference.

[dimkk]

@fsdiogo It's a lot of work and that would be great!

[abitrolly]

Looks like my comment was removed. Let me know when the bug is fixed, and how should I distribute gitcoin bonus for it. Use https://gitcoin.co/faucet if you need some ether to operate with gitcoin.co

[fsdiogo]

Check ipfs/js-ipfs#1321 for more info.

[vs77bb]

@abitrolly Did this one need pay out to @dimkk?

@dimkk, if you need ETH, gitcoin.co/faucet should get you there and you can click 'Submit Work' so @abitrolly can pay this out on Gitcoin!

[gitcoinbot]

@rrandom are you still working on this issue?

• warning 1 (3 days)
• warning 2 (6 days)
• auto removal (10 days)

[victorb]

Not sure how it got activated, but can we disable gitcoin somehow? Don't think we're actually using it and it just started appear from nowhere, leaving comments about completely unrelated things

[thelostone-mc]

@victorbjelkholm Ah i guess it came cause @abitrolly put up a bounty on this issue as mentioned here in hopes that someone would pick it up for a reward for 0.05 ETH

What happened probably :

- @lightninglu10 created the issue
- @abitrolly funded it on gitcoin - https://gitcoin.co/issue/ipld/js-cid/38
- @rrandom  picked it up but didn't respond with his plan of action
- @gitcoinbot left a comment asking @rrandom for a PR / action plan

Ideally killing the bounty -> would stop the commenting.

Agreed springing this up out the blue to the repo owner who isn't aware of gitcoin is confusing ! 😓
Need to figure out a nicer way how to notify the github owner that someone is bountying an issue on from their repo

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

Work has been started.

1. @mkeen

has committed to working on this project to be completed 9 months, 4 weeks from now.

[abitrolly]

Ok. To stop spamming this issue I killed the bounty here and will award it according to ipfs/js-ipfs#1321 (comment)

Thanks everyone for your patience. Thanks to that, we've been able to catch a some issues with gitcoin.co, which will surely take some time to fix.

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

The funding of 0.05 ETH (34.19 USD @ $683.88/ETH) attached to this issue has been cancelled by the bounty submitter

• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $7,112.79 more funded OSS Work available on the Gitcoin Issue Explorer