[question] Levelup, React and ES6?

[fergiemcdowall]

Like many Front End Engineers I have to do everything in React these days.

One of the great things about levelup is that you can pair it with level-js in order to run it in a browser. Up until now I have being doing this by making node-style React apps with require and then browserifying everything.

However since React uses ES6 modules by default, it seems like the best way to incorporate a levelup instance into a browser app would be to somehow get it as an ES6 module. This would have the advantage that it could be plugged straight into the supported tooling that comes from the React project

So- is levelup available as an ES6 module?

[vweevers]

import levelup from 'levelup'

Should work. It's not an ES6 module, so you can't do tree shaking etc, but it works.

[fergiemcdowall]

Thanks! Now I feel a bit embarrassed for not just trying it :)

[vweevers]

No worries! Good to close?

[fergiemcdowall]

Yes! :)

…

-- Apologies for brevity- this message was sent from my mobile

On 22 Nov 2018, at 13:19, Vincent Weevers ***@***.***> wrote: No worries! Good to close? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[fergiemcdowall]

@vweevers I've been banging on this off and on for a few weeks now, and I still can't get level or level-browserify to compile with Rollup or Webpack. Browserify works really well, but unfortunately doesn't compile to ES6.

Frontend build tools are a bit of a rabbit hole, and I am no expert- so perhaps there is somebody here who knows the exact incantation to get level working in a browser based ES6 environment? Or perhaps level itself needs a little tweak?

Either way, some documented way to make level play nice with browsers and ES6 would be really nice to have™!

Until then: maybe reopen this issue or one that is similar?

[vweevers]

@fergiemcdowall could you provide a minimal example repo that we can install and (try to) run?

[vweevers]

Browserify works really well, but unfortunately doesn't compile to ES6.

The feature you're missing is browserify/browserify#1186, correct? Or is it about more than just imports?

[vweevers]

It seems level@next works fine with webpack at least: level-with-webpack-test (clone, npm i, npm run build, open index.html).

[fergiemcdowall]

@vweevers thanks for taking the time to throw that example together so quickly! Yes, your example using level@~5.0.0-0 works here as well

(The current [email protected] doesn't seem to want to play nice with webpack or rollup, but so long at 5 works its no problem)

[vweevers]

To be clear, before level@next, level did not work in browsers, and you had to combine levelup and level-js yourself, or use level-browserify. I'm curious to know why that didn't work for you. It's possible that levelup, when used by itself, doesn't work with es6 imports. Lemme try that as well.

[vweevers]

It's possible that levelup, when used by itself, doesn't work with es6 imports. Lemme try that as well.

Also works: https://github.com/vweevers/level-with-webpack-test/tree/levelup

[vweevers]

And level-browserify also works: https://github.com/vweevers/level-with-webpack-test/tree/level-browserify

[fergiemcdowall]

If you take level-with-webpack-test and bump it down to [email protected] you get the error that I also get with rollup. Something to do with bindings.js:

ERROR in ./node_modules/bindings/bindings.js
Module not found: Error: Can't resolve 'fs' in '/Users/fergusmcdowall/projects/node/level-with-webpack-test/node_modules/bindings'
 @ ./node_modules/bindings/bindings.js 6:9-22
 @ ./node_modules/leveldown/leveldown.js
 @ ./node_modules/level/level.js
 @ ./index.js

[vweevers]

If you take level-with-webpack-test and bump it down to [email protected] you get the error that I also get with rollup.

To be clear, before level@next, level did not work in browsers

[fergiemcdowall]

Sorry- mispoke- I also get a bindings.js related error with level-browserify in rollup, and level@next.

Quite possible that this is more to do with my limited understanding of Rollup than any actual problem.

[fergiemcdowall]

In any case- that it works in webpack solves my usecase

[vweevers]

Sorry- mispoke- I also get a bindings.js related error with level-browserify in rollup, and level@next.

Ah okay. So Rollup is the problem. Good to know! I'm not sure if that is something we can fix on our end, so if and when someone wants to tackle that we can discuss it in a new issue. Thanks!

[fergiemcdowall]

For sure 👍

Now we have an example that demonstrates "compile Level for browser", and that should be good enough for most users regardless of compiler.

Cheers!