fullcalendar: Angular 12 does not build with Preact 10.13

Reduced Test Case

Angular 11 project with fullcalendar@5.11.4

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)?

Angular

Bug Description

We use FullCalendar in Angular project. And today recently build start to fail constantly. As I see, there is a dependency in @fullcalendar/core from “preact”: “^10.0.5” and it is not strict. Several hours ago this preact package was updated to the version 10.13.0.

  "devDependencies": {
    "@angular-devkit/build-angular": "0.1102.12",
    "@angular/cli": "11.2.12",
    "@angular/compiler-cli": "11.2.13",
    "@angular/language-service": "11.2.13",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@types/file-saver": "2.0.1",
    "@types/lodash": "4.14.168",
    "@types/moment-timezone": "0.5.13",
    "@types/node": "16.11.26",
    "@types/qs": "6.9.6",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.18",
    "tailwindcss": "^2.2.19",
    "ts-node": "9.1.1",
    "typescript": "4.1.6"
  }

part of dependencies:

    "@angular/animations": "11.2.13",
    "@angular/cdk": "11.2.12",
    "@angular/common": "11.2.13",
    "@angular/compiler": "11.2.13",
    "@angular/core": "11.2.13",
    "@angular/forms": "11.2.13",
    "@angular/material": "11.2.12",
    "@angular/platform-browser": "11.2.13",
    "@angular/platform-browser-dynamic": "11.2.13",
    "@angular/router": "11.2.13",
    "@fullcalendar/angular": "5.11.4",
    "@fullcalendar/core": "5.11.4",
    "@fullcalendar/interaction": "5.11.4",
    "@fullcalendar/resource-common": "5.11.4",
    "@fullcalendar/resource-timegrid": "5.11.4",
    "@fullcalendar/scrollgrid": "5.11.4",

part of package.lock.json

		"node_modules/@fullcalendar/angular/node_modules/@fullcalendar/core": {
			"version": "5.11.4",
			"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-5.11.4.tgz",
			"integrity": "sha512-p1/GRIageomlyJpsMVi+Ig5TNo9t2sEYsLHe6zvtCLtpXK/l03veZukYyM/jou8VzT0VJp1f7yN8irc5VBgqxw==",
			"dependencies": {
				"@fullcalendar/common": "~5.11.4",
				"preact": "^10.0.5",
				"tslib": "^2.1.0"
			}
		},

Error:

✔ Browser application bundle generation complete.
Error: node_modules/preact/src/jsx.d.ts:2138:24 - error TS2304: Cannot find name 'SVGMPathElement'.
2138  	mpath: SVGAttributes<SVGMPathElement>;
      	                     ~~~~~~~~~~~~~~~
Error: node_modules/preact/src/jsx.d.ts:2145:22 - error TS2304: Cannot find name 'SVGSetElement'.
2145  	set: SVGAttributes<SVGSetElement>;

As a quick fix: add preact packages 10.0.5 as dev dependency. But this is temporary solution!

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 1
  • Comments: 15 (4 by maintainers)

Most upvoted comments

Apologies @vgoreiko , I’ll backport this bugfix to v5 as well. Please stay tuned…

@rschristian

I’d like to add that Angular 12’s maximum typescript version is v4.3.5. So any libraries that were using preact and supported Angular < 13 no longer work.

…Which was… a very unpleasant surprise. (We’re having the same issue in our Angular 12 project.)

You’re using a very old version of TypeScript that does not ship with SVGMPathElement or SVGSetElement types. It looks like they were added in v4.4: https://github.com/microsoft/TypeScript/pull/44842

Preact v10.13.0 depends on these to provide better typing support for SVG elements. Either downgrade your Preact version, upgrade your TS version to something modern, or add "skipLibCheck": true in your tsconfig.json