Class constructor component cannot be invoked without 'new' #7472

tacman · 2023-10-04T12:16:36Z

Reduced Test Cases

https://jsfiddle.net/tacman1123/917t4mas/2/
https://tacman.github.io/micro-calendar/fullcalendar/

Open the javascript console to see the error.

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

I understand

Which connector are you using (React/Angular/etc)?

No connector (vanilla JS)

Bug Description

I'm trying to involve fullcalendar using modules and importmap, and am getting an error with a basic example.

In my HTML

<script type="importmap">
  "imports": {
  "@fullcalendar/daygrid": "https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.9/+esm",
  "@fullcalendar/interaction": "https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6.1.9/+esm",
  "@fullcalendar/core": "https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.9/+esm"
  }
  }
  </script>
...

         
    <h1>Calendar</h1>
    <div id="calendar">
        The calendar will go here.
    </div>

And then my app.js is more or less copied from the README.

import { Calendar } from '@fullcalendar/core'
import interactionPlugin from '@fullcalendar/interaction'
import dayGridPlugin from '@fullcalendar/daygrid'
// //
const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
    plugins: [
        interactionPlugin,
        dayGridPlugin
    ],
    initialView: 'dayGridMonth',
    editable: false,
    events: [
        { title: 'Meeting', start: new Date() },
        { title: 'Another Meeting', start: new Date() }
    ]
})

calendar.render()

The render command fails here:

Digging into it, there's a customRenderer set, but that's where it's failing.

if (customGenerator != null) {
            const customGeneratorRes = typeof customGenerator === 'function' ?
                customGenerator(renderProps, createElement) :
                customGenerator;
            if (customGeneratorRes === true) {
                useDefault = true;
            }
            else {

I'm new to importmaps, and I suspect that's where my problem is. I'd LOVE to be able to use javascript libraries like this would a build system like NPM. Perhaps I'm missing a component, or not loading them in the right order?

tacman · 2023-10-04T15:07:18Z

Even more minimalistic: https://jsfiddle.net/tacman1123/917t4mas/2/

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset=utf-8>
        <meta name="description" content="MicroCalendar">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

        <title>MicroCalendar</title>
        
                        <script type="importmap">
{
    "imports": {
        "@fullcalendar/daygrid": "https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.9/+esm",
        "@fullcalendar/interaction": "https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6.1.9/+esm",
        "@fullcalendar/core": "https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.9/+esm"
    }
}
</script>

        
<script  type="module">
    import { Calendar } from '@fullcalendar/core'
    import interactionPlugin from '@fullcalendar/interaction'
    import dayGridPlugin from '@fullcalendar/daygrid'
    // //
    const calendarEl = document.getElementById('calendar')
    const calendar = new Calendar(calendarEl, {
        plugins: [
            interactionPlugin,
            dayGridPlugin
        ],
        initialView: 'dayGridMonth',
        editable: false,
        events: [
            { title: 'Meeting', start: new Date() }
        ]
    })

    calendar.render()

</script>
    </head>

    <body id="base">
    <div id="calendar">
        The calendar will go here.
    </div>

    </body>
</html>

tattali · 2023-10-04T19:57:35Z

Hi @tacman,
Using https://www.skypack.dev/ as recomended in the fullcalendar doc seems working better
One point less for JSDeliver ;)

<!DOCTYPE html>
<html>
  <head>
    <script type='importmap'>
      {
        "imports": {
          "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/core@6.1.9",
          "@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/daygrid@6.1.9"
        }
      }
    </script>
    <script type='module'>
      import { Calendar } from '@fullcalendar/core'
      import dayGridPlugin from '@fullcalendar/daygrid'

      document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById('calendar')
        const calendar = new Calendar(calendarEl, {
          plugins: [dayGridPlugin],
          headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
          }
        })
        calendar.render()
      })
    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

acerix · 2023-10-04T23:02:18Z

Yes, the problem seems to be with how jsdeliver is building that version. The instructions in the docs for this seem to be work as expected:

https://fullcalendar.io/docs/initialize-browser-esm

tacman · 2023-10-05T10:42:02Z

So the good news is that indeed, fullcalendar works with skypack.

The bad news is that skypack appears dead: https://github.com/skypackjs/skypack-cdn/issues

https://www.skypack.dev/search?q=fullcalendar&p=1

Search hasn't been working since at least June. So the issue is that someday skypack may go away. I think this issue should stay open until fullcalendar works with jsdelivr, since that seems to be a standard for loading packages/modules.

tacman · 2023-10-06T11:12:49Z

Even the calendar-bundle suggests using jsdelivr, although the version is wrong.

https://github.com/tattali/CalendarBundle#3-add-styles-and-scripts-in-your-template

If the next version of the bundle uses AssetMapper, the installation will happen automatically. I'm working on that now.

EmersonCoosta · 2024-02-15T01:19:27Z

In the tsconfig.json file, replace the value of the "module" key for "es2020":
// "module": "commonjs",
"module": "es2020",

tacman · 2024-02-15T21:19:09Z

@EmersonCoosta I know nothing about how js modules are built, but if this helps get it working on jsdelivr, it'd be a huge help.

I don't think it's hard, it's almost certainly a configuration issue. If this might be it, it'd be worth a try republishing!

johndodev · 2024-03-25T15:47:58Z

Any chance this "new" error will be fixed soon ? What issue should I follow ?

pdhuaman · 2024-05-04T16:36:03Z

Just came across this issue too. Here's a hacky way just in case!

Install:

php bin/console importmap:require fullcalendar@^5.11.5 @fullcalendar/common@^5.11.5  @fullcalendar/core@^5.11.5 @fullcalendar/daygrid@^5.11.5

Add other plugins as needed. Just make sure the version is 5.11.5. The latest version will not work.

Then...

    //fullcalendar_controller.js

    import "fullcalendar";  // <--- This sucks !!!
    import { Calendar } "@fullcalendar/core"
    //... the rest of your plugins

Hope they fix this soon. Updating assets will screw up the version in importmaps.

tacman · 2024-05-04T17:19:06Z

Thanks! Great to have a solution, and also the developers can look at what changed between v5 and 6 and maybe fix it.

But yeah, needing to re-install these after every update is a bit of a pain. And unlike composer, there's no way to lock to a version or specific commit.

tattali · 2024-05-04T20:31:03Z

Seems necessary to map all the files again

The following code work with the version 6.1.10

<!DOCTYPE html>
<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "preact": "https://cdn.jsdelivr.net/npm/preact@10.19.5/dist/preact.mjs",
          "preact/compat": "https://cdn.jsdelivr.net/npm/preact@10.19.5/compat/dist/compat.mjs",
          "preact/hooks": "https://cdn.jsdelivr.net/npm/preact@10.19.5/hooks/dist/hooks.mjs",
          "@fullcalendar/core": "https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.10/index.js",
          "@fullcalendar/core/index.js": "https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.10/index.js",
          "@fullcalendar/core/internal.js": "https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.10/internal.js",
          "@fullcalendar/core/preact.js": "https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.10/preact.js",
          "@fullcalendar/daygrid": "https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.10/index.js",
          "@fullcalendar/daygrid/internal.js": "https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.10/internal.js"
        }
      }
    </script>
    <script type="module">
      import { Calendar } from '@fullcalendar/core'
      import dayGridPlugin from '@fullcalendar/daygrid'

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new Calendar(calendarEl, {
          plugins: [dayGridPlugin],
          headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
          }
        });

        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

tacman · 2024-05-05T22:02:56Z

I don't think this issue should be closed yet, though maybe the issue is with my code.

@pdhuaman , are you able to get this to work in Symfony with AssetMapper using the latest version?

pdhuaman · 2024-05-06T17:08:31Z

@tacman
Sadly no. I am using 5.11.5 for now. I have stimulus controllers relying on fullcalendar, so I am pretty much stuck with this version.

tacman · 2024-05-06T17:33:44Z

Can you share any of the controllers? I've been working a generic one that I can include in a Symfony UX Component, but this has been a show-stopper.

pdhuaman · 2024-05-06T18:37:10Z

Here's a test controller I created to test this out. Works just fine so are the rest of my controllers on version 5.11.5.

//test_controller.js
import { Controller } from "@hotwired/stimulus";
import 'fullcalendar'; //this is needed.
import { Calendar } from "@fullcalendar/core";
import dayGridPlugin from '@fullcalendar/daygrid';

export default class extends Controller {

    static targets = ['container']

    connect(){
        this.initCalendar()
    }

    initCalendar(){
        const cal = new Calendar(this.containerTarget, {
            plugins: [dayGridPlugin],
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth'
            }
        })

        cal.render()
    }
}

view.html.twig

<div {{ stimulus_controller('test') }}>
    <div id="calendar" data-test-target="container"></div>
</div>

//importmaps.php
    'fullcalendar' => [  //yes... without the @
        'version' => '5.11.5',
    ],
    '@fullcalendar/core' => [// needed
        'version' => '5.11.5',
    ],
    '@fullcalendar/common' => [// This is required too!!!
        'version' => '5.11.5',
    ],
    '@fullcalendar/daygrid' => [
        'version' => '5.11.5',
    ],
    '@fullcalendar/timegrid' => [
        'version' => '5.11.5',
    ],
    '@fullcalendar/list' => [
        'version' => '5.11.5',
    ],
    '@fullcalendar/interaction' => [
        'version' => '5.11.5',
    ],

tacman mentioned this issue Oct 4, 2023

Support Symfony 7 tattali/CalendarBundle#62

Closed

acerix closed this as completed Oct 4, 2023

tacman mentioned this issue Oct 5, 2023

TypeError when loading ESM scripts from jsdelivr.com #7474

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Class constructor component cannot be invoked without 'new' #7472

Class constructor component cannot be invoked without 'new' #7472

tacman commented Oct 4, 2023 •

edited

tacman commented Oct 4, 2023

tattali commented Oct 4, 2023 •

edited

acerix commented Oct 4, 2023

tacman commented Oct 5, 2023

tacman commented Oct 6, 2023

EmersonCoosta commented Feb 15, 2024

tacman commented Feb 15, 2024

johndodev commented Mar 25, 2024

pdhuaman commented May 4, 2024 •

edited

tacman commented May 4, 2024

tattali commented May 4, 2024

tacman commented May 5, 2024

pdhuaman commented May 6, 2024

tacman commented May 6, 2024

pdhuaman commented May 6, 2024 •

edited

Class constructor component cannot be invoked without 'new' #7472

Class constructor component cannot be invoked without 'new' #7472

Comments

tacman commented Oct 4, 2023 • edited

Reduced Test Cases

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

Which connector are you using (React/Angular/etc)?

Bug Description

tacman commented Oct 4, 2023

tattali commented Oct 4, 2023 • edited

acerix commented Oct 4, 2023

tacman commented Oct 5, 2023

tacman commented Oct 6, 2023

EmersonCoosta commented Feb 15, 2024

tacman commented Feb 15, 2024

johndodev commented Mar 25, 2024

pdhuaman commented May 4, 2024 • edited

tacman commented May 4, 2024

tattali commented May 4, 2024

tacman commented May 5, 2024

pdhuaman commented May 6, 2024

tacman commented May 6, 2024

pdhuaman commented May 6, 2024 • edited

tacman commented Oct 4, 2023 •

edited

tattali commented Oct 4, 2023 •

edited

pdhuaman commented May 4, 2024 •

edited

pdhuaman commented May 6, 2024 •

edited