Error when trying to create a React wrapper for the library

[m-abdelwahab]

Hi, I found your library and I think it's really cool! I'm trying to add it to a React project and I keep getting an error that Object(...) is not a function when calling the annotate function.
I reproduced the behavior in a code sandbox.
https://codesandbox.io/s/tender-river-k6d32?fontsize=14&hidenavigation=1&theme=dark

Idk what I'm doing wrong.

Thank you so much!

[pshihn]

Seems like your project/webpack settings are not picking up the 'main' file from the package.json.

Try doing this instead:

import { annotate } from "rough-notation/lib/rough-notation.cjs.js";

[kbravh]

I just ran into this as well while attempting to run this on a Gatsby React site. @pshihn Your suggestion works.

[kbravh]

However, it does cause the typing and intellisense suggestions to no longer function as expected.

[pshihn]

I am not sure how webpack/react/gatsby setup selects which file to us. Perhaps you guys know what I am doing wrong.
In my package.json, i have set the "main" to be "lib/rough-notation.cjs.js" which is the commonjs version
and "module" to be "lib/rough-notation.esm.js" which is the es6 version. What am I doing wrong?

[m-abdelwahab]

Yup, that fixed it! thanks @pshihn

[kbravh]

So I found that importing as import { annotate } from "rough-notation/lib/rough-notation"; works and preserves the Intellisense typing. I'm not yet sure why the main entry point is not working.

[kbravh]

@pshihn The issue seems to lie in the fact that webpack's order of importing is browser> module> main. If I remove the browser field from the package.json or have browser point to the esm, things work fine. This is legacy support for webpack, and as such won't be removed.

Other package authors have been removing the browser tag from package.json and providing the IIFE version from unkpg, as you have already done (see Blockstack).

I've created this pull request #8 to remove the browser tag, which should resolve the issues.