tinyplex / tinybase

The reactive data store for local‑first apps.
https://tinybase.org
MIT License
3.76k stars 80 forks source link

Tinybase fails to build with Browserify #19

Closed shaneosullivan closed 2 years ago

shaneosullivan commented 2 years ago

Describe the bug

When adding an import "tinybase" or require("tinybase") in a file that is then passed to Browserify for buliding, it fails with the error

Error: Can't walk dependency graph: Cannot find module 'tinybase' 

Perhaps it is related to bundler requirements, but I build by app with many other packages and they all work just fine.

Your Example Website or App

https://github.com/shaneosullivan/tinybaseRepro

Steps to Reproduce the Bug or Issue

1: Go to https://github.com/shaneosullivan/tinybaseRepro and check out the project 2: Run npm install 3: Run npm run repro

Expected behavior

It should successfully build the file output.js without error

Screenshots or Videos

No response

Platform

Additional context

No response

jamesgpearce commented 2 years ago

nice issue; let me take a look

shaneosullivan commented 2 years ago

Obligatory macro from my Gitmeme extension (https://gitme.me) :-)

jamesgpearce commented 2 years ago

OK, so I think there are two problems.

First is that Browserify doesn't seem to support the modern exports field (see https://github.com/browserify/browserify/issues/1995).

So I got around that by specifying the path directly - with require("tinybase/lib/umd/tinybase"); - to get to the UMD version of the library.

Secondly, Browserify does not seem particularly happy with the ??= nullish assignment operator, which is pretty recent. Until it knows about that, you'll need to transform ahead of time.

I did this with Babel by installing this:

npm install --save-dev babelify @babel/core @babel/preset-env

...and then adding -g [ babelify --presets [ @babel/preset-env ] ] to the command line. The spaces are significant.

See this PR: https://github.com/shaneosullivan/tinybaseRepro/pull/1

When run:

$ node output.js 
{ greeting: { hi: 'there!' } }