3rd Party JavaScript Packages

Hi,

I had the same problem. I resolved it by including js files via CDN and not via importmap :

import { Calendar } from 'https://cdn.skypack.dev/@fullcalendar/core@6.1.10';

David

Hey Brandon and David!

Using the url is a great workaround - it’s so cool that you always have this as an option :).

But, of course, that shouldn’t be needed. I don’t know fullcalendar, but the first thing that looks funny is your import statement. My guess it it should look like what @dbo did, except replace the CDN url with the package name: import { Calendar } from '@fullcalendar/core';. And so also, install this with importmap:require @fullcalendar/core

Let me know if that helps! And I’m happy to offer any more explanation into what’s going on.

Cheers!

Hi!
Firstly, thanks for the answer and all your effort in this lovely course, but for me don't solve the problem. The only way to solve it is to use the CDN URL.
If I try as you describe:

import { Calendar } from '@fullcalendar/core';
import DayGridPlugin from '@fullcalendar/daygrid/index.js';

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

I have this error in the browser console:

 Uncaught TypeError: class constructors must be invoked with 'new'
    render https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    Preact 23
    handleRenderRequest https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    Pe https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    handleRenderRequest https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    drained https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    tryDrain https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    request https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    render https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    <anonymous> https://localhost/assets/app-f58212e6a0b7bdb970ebb9053d580fdd.js:18
    EventListener.handleEvent* https://localhost/assets/app-f58212e6a0b7bdb970ebb9053d580fdd.js:12
core.index-57623a7e3dad789a4c3310e6d9285762.js:7:41883
    render https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    Preact 23
    handleRenderRequest https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    Pe https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    handleRenderRequest https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    drained https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    tryDrain https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    request https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    render https://localhost/assets/vendor/@fullcalendar/core/core.index-57623a7e3dad789a4c3310e6d9285762.js:7
    <anonymous> https://localhost/assets/app-f58212e6a0b7bdb970ebb9053d580fdd.js:18
    (Async: EventListener.handleEvent)
    <anonymous> https://localhost/assets/app-f58212e6a0b7bdb970ebb9053d580fdd.js:12

In other case, when I use it with the CDN way

import { Calendar } from 'https://cdn.skypack.dev/@fullcalendar/core@6.1.11';
import DayGridPlugin from 'https://cdn.skypack.dev/@fullcalendar/daygrid@6.1.11';

Fix the problem, but I think that this workaround don't be needed if we have the local files.
I don't understand why not works using this local files instead of CDN URL files.

I found that there are some related issues in this GitHub repos, but I'm not sure if is the same problem because is more related to ESM and jsdelivr
https://github.com/fullcalendar/fullcalendar/issues/7474
https://github.com/tattali/CalendarBundle/issues/70

Thanks!

Hi,

Have you tried to importmap:require @fullcalendar/daygrid and use it as import dayGridPlugin from '@fullcalendar/daygrid' ?

Cheers!

Yes I try it but shows me the same error

Uncaught TypeError: class constructors must be invoked with 'new'

ok... looks not good, in reality this issue blocks this library from asset mapper usage, I tried lot of different ways of connecting it, even with bundle installing, and also using external import link and everything stucks with this error.. the problem is inside the jsDelivr it brake the package internal linking that's why it doesn't work.

Seem it is the way to go: https://symfonycasts.com/screencast/asset-mapper/vendor-css

Good catch! I hope this helps you

Cheers!

Guess I should watch the whole course ;)

@weaverryan explains it here on the example of tom-select: https://symfonycasts.com/screencast/last-stack/ux-packages

php bin/console importmap:require tom-select/dist/css/tom-select.default.css

Hey Blanx,

Haha, that's a good idea ;)

Thanks for sharing a better solution with others!

Cheers!

Hey @Leonard_Bira!

Weird! Hmm. Well, asset-map:compile should only need to be run when you're deploying to production. In dev mode, if your browser makes a request to /assets/app-abcd1234.js, that physical file doesn't exist. Instead, the request is handled by Symfony and it returns the file.

However, if you DO run asset-map:compile on your local machine, then, definitely, if you make any changes to your source files, those won't be seen. The public/assets directory is kind of "stuck" with the old code. If this was the case for you, you can delete public/assets/ entirely and allow Symfony to serve the files, which should then always contain the latest versions of the code :).

Cheers!

Hey @Mathias-VdB!

Let's get you unlocked so you can enjoy AssetMapper!

Ok, so I assume you ran something like importmap:require @fortawesome/fontawesome-free/css/fontawesome.min.css and now have an entry like this in your importmap.php file? If so, remove that, and try this instead:

php bin/console importmap:require @fortawesome/fontawesome-free/css/all.css

Let me know if that works (it should, I just tried it). Tbh, I love FontAwesome, but their install has always confused me. I don't know what this fontawesome.min.css file is exactly: it's the CSS, but it lacks the FontFace that the all.css has:

@font-face {
  /* ... */
  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }

AssetMapper is pretty cool in this regard. When you require all.css, it sees the url() inside this file and actually downloads the font files! So with this, you'll notice (in assets/vendor/...), that you have a webfonts folder with these items.

Also, FontAwesome recommends you install them by including a "kit" - which is just a bit of JavaScript and then you can control what icons go in there. That's what I've been doing lately anyway.

Let me know if this helps!

Cheers!