Error with Fullcalendar implementation

[froot]

I know this is not exactly ProcessWire related, but it's still an issue I'm facing while trying to implement in a PW site.

I'm trying to get Fullcalendar to work, first I included it via CDN, which worked OK, but then I wanted to implement the rrule plugin which always threw an error that I just never managed to resolve. Then I switched to installing it via npm, not least because in the long run I would like to have Fullcalendar be served locally anyway, which is the best practice (?).

I followed the instructions on www.fullcalendar.io concerning the implementation via npm:

import { Calendar } from '@fullcalendar/core/';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
initialView: 'dayGridMonth'
})
calendar.render()
})

 

But the calendar does not render and I keep getting this error:

 

Uncaught TypeError: Failed to resolve module specifier "@fullcalendar/core/". Relative references must start with either "/", "./", or "../".

FYI
I'm using webpack to bundle it and entry and output points seem to work fine.
All node_modules are visible in the file system.
I don't use any framework like react, just vanilla js.
Error occurs on Chrome, FF and Safari

Help is very much appreciated, I already lost a couple of days over this 🙈

[virtualgadjo]

Hi,

the only problem i can see in your code is your trailing slash at the end of of your first import that should be
 

import { Calendar } from '@fullcalendar/core';
// instead of
// import { Calendar } from '@fullcalendar/core/';
// which makes core a folder

have a nice day

[froot]

either with or without doesn’t work.

And code is a folder!

[TomPich]

Sorry, maybe a dumb question to ask, but did you configure (resolve path / module to use, babel-loader)?
Did you try that specifying the exact location of the files?

[froot]

56 minutes ago, TomPich said:

Sorry, maybe a dumb question to ask, but did you configure (resolve path / module to use, babel-loader)?

I'm not sure what you mean here…

57 minutes ago, TomPich said:

Did you try that specifying the exact location of the files?

If you mean, trying to do ./node_modules/fullcalendar/core then yes I tried that (also with / and ../) and all log a 504 not found error.

[virtualgadjo]

13 hours ago, froot said:

either with or without doesn’t work.

And code is a folder!

Hi @froot,

so are daygrid, timegrid and the other compoenents and this trailing slash is the only difference with what fullcalendar shows except for... what webpack does
maybe that's where you may have a look as, like you i use fullcalendar with vanilla js, in pw as well as with codeigniter (but without webpack) and never run into that kind of issue...,

feeling that "funny" i searched a little and found this here https://fullcalendar.io/docs/upgrading-from-v5

of course it depends of the version you're using, apparently this is for v6+
(using links without webpack and not as a module i haven't had to see this...)

incase it may be useful 🙂

have a nice day

[froot]

Thanks for the suggestion, but it doesn’t help either I’m afraid.

I’m on FC version 6.1.15, so I tried with /internal AND I tried downgrading to version 5.11.0 and without /internal – all of which throw the same error!

Should I try without webpack? 

🤪

[virtualgadjo]

maybe, in my various search result i've found one where a guys says that when using webpack, as it works with node, borwsers do not understand the import links the way  a machine does
don't know if it's the real answer... but well what you suggest is what i would do in order to try a differential diagnosis to speak like a doctor 🙂
at least you would have an answerfor that question is webpack where the problem come from and an idea of what to look for as the solution to have it work with it

have a nice day

[froot]

Thanks again, but if I try without webpack, i.e. without bundle.js but directly like this:

<!-- Include FullCalendar JS -->
<script type="module" src="<?=wire()->urls->httpRoot?>../node_modules/@fullcalendar/core/main.js"></script>
<script type="module" src="<?=wire()->urls->httpRoot?>../node_modules/@fullcalendar/daygrid/main.js"></script>
<script type="module" src="<?=wire()->urls->httpRoot?>../node_modules/@fullcalendar/timegrid/main.js"></script>
<script type="module" src="<?=wire()->urls->httpRoot?>../node_modules/@fullcalendar/interaction/main.js"></script>

 

I still get similar errors:
 

Uncaught TypeError: Failed to resolve module specifier "tslib". Relative references must start with either "/", "./", or "../".
Uncaught TypeError: Failed to resolve module specifier "@fullcalendar/common". Relative references must start with either "/", "./", or "../".

because the import commands are still on these included files!

[virtualgadjo]

Hi,

"funny" enough i think the error comes from the way npm import the files (or the way dependencies are written in the files) as, if you have a close look at where the error is it's in the daygrid index.js file line 1 when using a importmap like in this example but with the map aiming at the files imported with npm (it works fine with the distant files)
https://fullcalendar.io/docs/initialize-browser-esm

i've also tried a more "old" and "brutal" way of woking using curl to get locally https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js

using it as a simple js file once in my assets/js/ folder and the main script in a simple js file (not a module one) and everything went well too, my usual a little tricky usages as well as your own script except thet the instance is slightly different

document.addEventListener('DOMContentLoaded', function () {
    const calendarEl = document.getElementById('calendar')
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth'
    })
    calendar.render()
})

thank you actually as you convinced me to keep working this old way with fullcalendar 😀

have a nice day

[TomPich]

14 hours ago, froot said:

I'm not sure what you mean here…

5 hours ago, virtualgadjo said:

when using webpack, as it works with node, borwsers do not understand the import links the way  a machine does
don't know if it's the real answer...

That’s my point. When using webpack on a website, you have to map the includes with the corresponding node_module folders. It does not find them automatically. That has to be done in the webpack.config.js.

Otherwise (which is the solution I choose), you have to write the full path to the file to include (and the right version of it), something like "../node_module/@fullcalendar/core/index.global.js" or whatever file that provides the final "exports".

Hope it will be usefull.

[AndZyk]

Hello @froot

in the past I have imported the FullCalendar scripts like this:

<script src="<?=urls()->templates?>node_modules/@fullcalendar/core/main.min.js"></script>
<script src="<?=urls()->templates?>node_modules/@fullcalendar/core/locales/de.js"></script>
<script src="<?=urls()->templates?>node_modules/@fullcalendar/interaction/main.min.js"></script>
<script src="<?=urls()->templates?>node_modules/@fullcalendar/daygrid/main.min.js"></script>
<script src="<?=urls()->templates?>node_modules/@fullcalendar/timegrid/main.min.js"></script>
<script src="<?=urls()->templates?>node_modules/@fullcalendar/timeline/main.min.js"></script>
<script src="<?=urls()->templates?>node_modules/@fullcalendar/list/main.min.js"></script>
<script src="<?=urls()->templates?>node_modules/moment/min/moment.min.js"></script>
<script src="<?=urls()->templates?>scripts/global.js?v=<?=time()?>"></script>

In the "global.js" I have initialized the FullCalendar.

If you want to use the non-minified scripts, then you have to use WebPack I think. But I am oldschool and don't use WebPack. 😄

Regards, Andreas

[virtualgadjo]

2 minutes ago, AndZyk said:

If you want to use the non-minified scripts, then you have to use WebPack I think. But I am oldschool and don't use WebPack. 😄

Hi @AndZyk

being probably even a little more old school, even kind of an old timer 😄 that why i end using a single fullcal bundle file (thanks to curl output...)  and hop, on horseback with only one script src 🙂

have a nice day

[elabx]

7 minutes ago, virtualgadjo said:

being probably even a little more old school, even kind of an old timer 😄 that why i end using a single fullcal bundle file (thanks to curl output...)  and hop, on horseback with only one script src 🙂

 

No sure if you need backwards compat but maybe try ESM for the sake of moving on with your work? https://fullcalendar.io/docs/initialize-browser-esm

[virtualgadjo]

hi @elabx

i've tried it and it works fine... as long as you use cdn links, too bad, not that well with the file imported with npm
i like having my file locally as i can work even offline, but i've not completely given up having it work getting all the cdn linked files locally with curl 🙂

have a nice day

[froot]

5 hours ago, TomPich said:

That’s my point. When using webpack on a website, you have to map the includes with the corresponding node_module folders. It does not find them automatically. That has to be done in the webpack.config.js.

I thought that’s why you have resolve and alias in webpack.config.js…

resolve: {
	extensions: ['.js'],
	alias: {
		'@fullcalendar': path.resolve(__dirname, 'node_modules/@fullcalendar')
	}
},

 

#########

 

@AndZyk I tried the old-school way, but like I said, it’s the “import” command that causes the errors, and there’s still import commands inside the included fullcalendar scripts…  

 

7 hours ago, froot said:

Uncaught TypeError: Failed to resolve module specifier "tslib". Relative references must start with either "/", "./", or "../".
Uncaught TypeError: Failed to resolve module specifier "@fullcalendar/common". Relative references must start with either "/", "./", or "../".

Edited Monday at 07:49 PM by froot

[froot]

4 hours ago, elabx said:

No sure if you need backwards compat but maybe try ESM for the sake of moving on with your work? https://fullcalendar.io/docs/initialize-browser-esm

Yes it’s a different story with CDN, that words slightly better, with different issues though (can’t get plugin rrule to work for example).

Edited Monday at 07:49 PM by froot

[virtualgadjo]

Hi, apprently, you have to use one more cdn link if you want to use the rrule plugin

https://fullcalendar.io/docs/rrule-plugin
maybe it will work 🙂

have a nice day