Example not working

[kosich]

The first example from Try it online section - Observe Events doesn't seem to work:

(0 , _callbagBasics.fromEvent) is not a function

  16 | const setText = event => (prev, curr) => event.target.value;
> 17 | const inputs = pipe(fromEvent(input, "input"), map(setText));
     |                              ^
  18 | 

alas, I don't know how to fix this.

Thanks!

[franciscotln]

must be something with the exports/bundling. Adding it to that codesandbox as a separated dependency works normally.

[kosich]

That works! Thanks, @franciscotln !

Also neither of the other two examples work (for, it seems, the same issue).

I think, examples on the landing page are important part of onboarding experience.

Sadly, I couldn't properly setup codesandbox to use callbag-basics and run those examples (tried different module settings, didn't dig deep). Though, it looks like stackblitz (js template based) works out of the box for all 3 examples (Flatten Promises example).

What is the next step here?
Maybe @johnlindquist (👋 hi) as the author of examples could help with the fix?
If not, who should author (own) migrated sandbox?

[loreanvictor]

I am having a similar issue in TypeScript. It seems like in some environments and for some modules, the "default" key should be extracted from the module object. To see that, you can modify the mentioned example and change fromEvent(...) to fromEvent.default(...), and the code will be working properly.

To see how this varies based from module to module, you can try this in the same sandbox:

console.log(fromEvent.__esModule);     // > true
console.log(map.__esModule);           // > undefined

This is why fromEvent() needs to be changed to fromEvent.default but map() works as is.

For importing defaults, this is the code TypeScript transpiler generates:

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};

Which, would resolve importing issues (by making everything an object that has "default" key and then consistently referring to mod.default).

In either-case, I would actually recommend re-writing the library with TypeScript, as it takes care of all these corner cases (and since this is just an importing library, it should be relatively easy). I basically did that as a temporary solution for some other stuff I am working on, and although this approach works well for my intended environments (for example, you can replace callbag-basics with callbag-common in the aforementioned sandbox and get it to work properly), I did face some issues with bundling with rollup (I didn't dig deep since it wasn't my use case, just took rollup out of it).