Rrule: How to load Rrule?

Created on 3 Jun 2019 · 11Comments · Source: jakubroztocil/rrule

This is a really basic question but I didn't see anyone ask it in the closed issues so I'm going to try - how do you add rrule.js to the browser? I've tried adding it in codepen but I just can't seem to get it to work despite trying many different ways of requiring / importing modules.

Namely I keep seeing this error in the console

I even tried loading it in observable but just couldn't seem to get that working either. Any help is welcome, thanks :)

Source

zeluspudding

Most helpful comment

Hmm, so I've never had cause to import an ES6 module into the browser directly myself (though this might be a UMD module), but it looks like the following code works on codepen:

// This imports everything in the `rrule` namespace
import "https://jakubroztocil.github.io/rrule/dist/es5/rrule.min.js"

console.log(rrule)

// Create a rule:
const rule = new rrule.RRule({
  freq: rrule.RRule.WEEKLY,
  interval: 5,
  byweekday: [rrule.RRule.MO, rrule.RRule.FR],
  dtstart: new Date(Date.UTC(2012, 1, 1, 10, 30)),
  until: new Date(Date.UTC(2012, 12, 31))
})

// Get all occurrence dates (Date instances):
console.log(rule.all())

thefliik on 3 Jun 2019

🎉1 😄1 👍1

All 11 comments

There are many ways to use rrule in the browser. If you just want to play around / test rrule in your browser, you can use something like stackblitz which will allow you to import the module from npm.

You're running into problems because you're trying to import a relative file path ("rrule") from codepen's servers (and, while I've never used codepen, I doubt that codepen has made rrule available to it's users in some way). You'd need to import the javascript from a CDN if you're not going to serve it yourself.

thefliik on 3 Jun 2019

Hey @thefliik , thank you so much for your comment :)

stackblitz looks incredible. Codepen is a lot like stackblitz in that it's a playground for building webpages and let's you load scripts from different CDNs. I had loaded my script in through codepen's settings dialogue > Javascript > then entering the filepath to my hosted script.

I'm currently hosting rrule at https://s3.amazonaws.com/appforest_uf/f1559527195623x315562171275647800/rrule.min.js.

Here's the updated pen where I'm explicitly loading rrrule via a

Hmm, so I've never had cause to import an ES6 module into the browser directly myself (though this might be a UMD module), but it looks like the following code works on codepen:

// This imports everything in the `rrule` namespace
import "https://jakubroztocil.github.io/rrule/dist/es5/rrule.min.js"

console.log(rrule)

// Create a rule:
const rule = new rrule.RRule({
  freq: rrule.RRule.WEEKLY,
  interval: 5,
  byweekday: [rrule.RRule.MO, rrule.RRule.FR],
  dtstart: new Date(Date.UTC(2012, 1, 1, 10, 30)),
  until: new Date(Date.UTC(2012, 12, 31))
})

// Get all occurrence dates (Date instances):
console.log(rule.all())

thefliik on 3 Jun 2019

🎉1 😄1 👍1

So strange, S3 is definitely loading the resource in my console

Maybe you are logged into your amazon account on your computer

thefliik on 3 Jun 2019

That's kind of what I was thinking but no, I'm able to access that file from incognito mode and a second computer that doesn't have access. As seen here I've even tried loading the script from jsdeliver without luck.

zeluspudding on 3 Jun 2019

@zeluspudding did you not see my previous comment?

import "https://jakubroztocil.github.io/rrule/dist/es5/rrule.min.js" works for me on codepen.

thefliik on 3 Jun 2019

Oh, I'm sorry - I did miss your comment. And YES! It does work :)

Thank you sooo much! I really appreciate all the help.

I'd suggest perhaps an update to the getting started guide with your snippet of code (for this case of importing an ES6 module into the browser directly). I can submit a pull request if you like

zeluspudding on 3 Jun 2019

For anyone interested in playing with rrule in observable visit this link.

zeluspudding on 6 Jun 2019

Was this page helpful?

0 / 5 - 0 ratings