question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error with CSS imports in Angular 14

See original GitHub issue

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:closed
  • Created a year ago
  • Reactions:27
  • Comments:30 (5 by maintainers)

github_iconTop 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.

Read more comments on GitHub >

github_iconTop 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": [ ....
Read more >
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):.
Read more >
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,...
Read more >
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" ] ...
Read more >
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...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found