Trouble requiring NPM module following methods discussed on Observable

Dear Observable Community,

I realize that lots has been written on requiring modules, so please let me preface this by stating that I have read the following:

I also have referenced many of the discussion in the help forum. I still have not had any success in loading in a module that can be found on NPM called semantic-ui.

Here’s where I’m at in my attempts:

I have gotten as far as finding the `unpkg` index and `package.json`, but I am confused about where to go from here.

Could someone please help me to understand the issue and to identify a working require formula?

Thank you in advance for your time and consideration. I really appreciate the generosity of the Observable community and your patience with me as I learn.

Sincerely,

Aaron

1 Like

Hey Aaron!

Sure thing, the flavors of different JavaScript modules have no end :slight_smile: Here’s an example of including semantic-ui with some notes:

It has a bunch of quirks, detailed in the notebook, pretty funky stuff.

1 Like

Wow Tom, so fast! Thank you for the time and the walk through :+1:

Your verdict on the module is unfortunate:

This seems to be a very opinionated module and in my professional opinion as Notebook Doctor, probably not a great fit for Observable or new-style web applications.

I recently started using Semantic-UI for a web project and have enjoyed how easy it is to remember CSS classes. I was learning about websites with Bootstrap for a while and found that, after switching to Semantic UI, my understanding of how to put a page together increased dramatically. I also found their JavaScript code examples to be more ‘understandable’. I was hoping that using Semantic UI within Observable would help me to better learn about how one embeds graphs and charts within responsive page elements. Alas!

Thank you again for your time and generous help! I will continue my JavaScript studies and hope to keep improving.

Sincerely,

Aaron