Error with CSS imports in Angular 14

After update to angular 14 console log errors.

./node_modules/@fullcalendar/common/main.css:4:0 - Error: Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* classes attached to <body> */
| /* TODO: make fc-event selector work when calender in shadow DOM */
> .fc-not-allowed,
| .fc-not-allowed .fc-event { /* override events' custom cursors */
|   cursor: not-allowed;

./node_modules/@fullcalendar/daygrid/main.css:2:0 - Error: Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
> :root {
|   --fc-daygrid-event-dot-width: 8px;
| }

./node_modules/@fullcalendar/list/main.css:2:0 - Error: Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
> :root {
|   --fc-list-event-dot-width: 10px;
|   --fc-list-event-hover-bg-color: #f5f5f5;

./node_modules/@fullcalendar/timegrid/main.css:6:0 - Error: Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| 
> .fc-v-event { /* allowed to be top-level */
|   display: block;
|   border: 1px solid #3788d8;

Issue Analytics

State:
Created a year ago
Reactions:27
Comments:30 (5 by maintainers)

Top GitHub Comments

22reactions

sha-Ncommented, Jun 9, 2022

another workaround is to add following to angular.json’s styles array

"styles" : [
...
"./node_modules/@fullcalendar/common/main.css",
"./node_modules/@fullcalendar/daygrid/main.css",
"./node_modules/@fullcalendar/timegrid/main.css",
"./node_modules/@fullcalendar/list/main.css",
...
],

10reactions

arshawcommented, Nov 18, 2022

Hi @thaoula, I’m working hard to finish v6. Another beta should be out early next week. I’ve decided to have a legit @fullcalendar/angular package for v6 rather than the web-component. I was influenced by this article which notes that component validation is essentially turned off when you use CUSTOM_ELEMENTS_SCHEMA. There will also be additional features.

Please stay tuned. I understand that people are eager to receive a proper fix.

Top Results From Across the Web

Angular 14 : fullcalendar imports make the compilation fail

Found out it was an Angular issue. A fix is to import fullcalendar's CSS files in angular.json like so : "styles": [ ....

Sass Error after upgrading vom v14 to v15

The following error appears after updating a simple and lean application form v14 to v15 (angular and infragistics, node JS v18):.

The [New] State of CSS in Angular | by Emma Twersky

In this post, we'll take a look at new web features that impact how we define styling in our Angular applications. In 2019,...

SCSS cannot resolve imports (node_modules) in IDE - YouTrack

webstorm complains that "cannot resolve directory tailwindcss". My angular.json is like so in the root. "styles": [ "apps/instant/src/styles/styles.scss" ] ...

scss unable to find stylesheet. | Angular - EJ 2 Forums

When I tried creating a dropdownlist with scss I get an error that it can't find the stylesheet. The error occurs when it...