Error with CSS imports in Angular 14
blueiceprj opened this issue · 32 comments
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;
same issue with me after update from angular 13 to 14
The import css statements will have to be removed. They are no longer supported by the Angular CLI and they do plan on supporting this going forward.
Experiencing the same issue
I have the same problem. Any suggestion on how to fix?
Unfortunately this issue blocks us from migrating to Angular 14. Our current workaround/hack is to remove the css imports from the library and import them manually via scss import.
Not proud of the solution, but it might help others:
- Create a file called "remove-css-imports.js" in your root
- Add the following content:
const fs = require("fs");
const files = [
"node_modules/@fullcalendar/common/main.js",
"node_modules/@fullcalendar/daygrid/main.js",
"node_modules/@fullcalendar/timegrid/main.js"
];
for (const fullCalendarFile of files) {
fs.readFile(fullCalendarFile, "utf8", function (err, data) {
if (err) {
return console.log(err);
}
var result = data.replace("import './main.css';", "");
fs.writeFile(fullCalendarFile, result, "utf8", function (err) {
if (err) return console.log(err);
});
});
}- call this as postinstall script in your package.json :
"postinstall": "node remove-css-imports.js" - import the css files manually in any angular's scss style file :
// temporarily import fullcalendar css
@import "@fullcalendar/common/main.css";
@import "@fullcalendar/daygrid/main.css";
@import "@fullcalendar/timegrid/main.css";Remember to remove the .angular folder if you previously built the project since fullcalendar will be cached in there.
Unfortunately this issue blocks us from migrating to Angular 14. Our current workaround/hack is to remove the css imports from the library and import them manually via scss import.
Not proud of the solution, but it might help others:
- Create a file called "remove-css-imports.js" in your root
- Add the following content:
const fs = require("fs"); const files = [ "node_modules/@fullcalendar/common/main.js", "node_modules/@fullcalendar/daygrid/main.js", "node_modules/@fullcalendar/timegrid/main.js" ]; for (const fullCalendarFile of files) { fs.readFile(fullCalendarFile, "utf8", function (err, data) { if (err) { return console.log(err); } var result = data.replace("import './main.css';", ""); fs.writeFile(fullCalendarFile, result, "utf8", function (err) { if (err) return console.log(err); }); }); }
- call this as postinstall script in your package.json :
"postinstall": "node remove-css-imports.js"- import the css files manually in any angular's scss style file :
// temporarily import fullcalendar css @import "@fullcalendar/common/main.css"; @import "@fullcalendar/daygrid/main.css"; @import "@fullcalendar/timegrid/main.css";Remember to remove the
.angularfolder if you previously built the project since fullcalendar will be cached in there.
I did exactly same things and also added list module (remove-css-imports.jsi style.css) and but get this error:
./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;
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",
...
],
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", ... ],
its working! Thanks.
I can confirm I am also experience this issue which is holding up our move to Angular 14. Is there any work being done to officially resolve this issue?
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", ... ],
much easier and works. Thank you
As I used @angular-builders/custom-webpack
I ignore it with
new IgnorePlugin({
resourceRegExp: /[\\/]\w+\.css$/,
contextRegExp: /[\\/]@fullcalendar[\\/]\w+$/,
}),
Still, I have faced the same issue in Angular v14.
why is this problem moved to the fullcalender-angular project when the real problem is really in for example the common module:
https://github.com/fullcalendar/fullcalendar/blob/master/packages/common/src/main.ts#L1
there the main.ts file imports a css file which is not really a fully supporting thing
So how should the fullcalendar-angular subproject fix this?
@jcompagner Because it only angular-cli related problem caused by removal of support import css modules in js code
and if i read it correctly
that is really a webpackage feature, not really a ecma feature or something like that
so should fullcalendar really work with that stuff? or should it just follow more the standards?
And not rely on webpack features?
but my question remains, what can the subproject "fullcalendar-angular" do to fix this?
so when is this case closed?
As far as i can see it is nothing in the source of this project, you can't really change anything here:
https://github.com/fullcalendar/fullcalendar-angular/tree/master/projects/fullcalendar
to fix this right?
As I used @angular-builders/custom-webpack I ignore it with
new IgnorePlugin({ resourceRegExp: /[\\/]\w+\.css$/, contextRegExp: /[\\/]@fullcalendar[\\/]\w+$/, }),
Dont work in runtime, because generate error 'Module not found'
Placed
sed -i "/import '\.\/main.css';/d" ./node_modules/@fullcalendar/{common,daygrid,timegrid}/main.js
in postinstall script
to fix this right?
I think yes, but this don't related to common project only, but all the plugins of fullcalendar also
I'm sorry for the silence here. Life got in the way, and also, the proper solution to this problem is difficult. FullCalendar v5 imports .css files as you all know, and the only way to solve it is to make FullCalendar NOT DO THAT anymore. This requires a breaking change (v6).
I've created a v6 beta release that no longer internally imports .css files. Instead, the JS injects the CSS.
HOWEVER, I've dropped the @fullcalendar/angular package from the release and instead I'm encouraging people to use the @fullcalendar/web-component package. I've made an example project that breaks down this technique. It's very easy to set up. Once it's set up, the API is exactly the same as before.
I will create a roadmap that outlines the high-level plan. Essentially, we plan to have Angular users use the Web Component for v6. This lessens our maintenance burden in the meantime. Then for v7, we plan to revive the Angular connector to do advanced features like custom template slots, which are impossible to do with a mere web component.
Please post feedback about the web component.
?
I'm sorry for the silence here. Life got in the way, and also, the proper solution to this problem is difficult. FullCalendar v5 imports .css files as you all know, and the only way to solve it is to make FullCalendar NOT DO THAT anymore. This requires a breaking change (v6).
I've created a v6 beta release that no longer internally imports .css files. Instead, the JS injects the CSS.
HOWEVER, I've dropped the
@fullcalendar/angularpackage from the release and instead I'm encouraging people to use the@fullcalendar/web-componentpackage. I've made an example project that breaks down this technique. It's very easy to set up. Once it's set up, the API is exactly the same as before.I will create a roadmap that outlines the high-level plan. Essentially, we plan to have Angular users use the Web Component for v6. This lessens our maintenance burden in the meantime. Then for v7, we plan to revive the Angular connector to do advanced features like custom template slots, which are impossible to do with a mere web component.
Please post feedback about the web component.
Hey and thanks for the example. But what about the other plugins (rrrule, interaction, list etc.)? Overall payed resource timeline. Ive got no chance to get it work and this library blocks the A14 update :-(
I was using @sha-N 's workaround successfully, but it no longer works with Angular 15 RC, just FYI.
I've released @fullcalendar/angular v5.11.3 which supports Angular 14. I've devised a dependable workaround for the CSS issue, described here: https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/angular14#workarounds
I've updated the docs to reflect.
We still have plans to make this absolutely seamless in the next major version of FullCalendar (whether we use a Web Component or upgrade the angular connector)
Hi @arshaw,
Angular 15 is released and this issue has come back to bite us :(
The workaround you posted recently is quite invasive and also cannot be used until the custom webpack builder is updated to support Angular 15.
Furthermore, as @uvesten mentioned, adding the styles to the angular.json file no longer works in Angular 15.
Just a question, Is there any further progress on FullCalendar 6? I really hope you and the team go with a upgraded Angular connector rather than using Web Components as we don't really fancy having to use CUSTOM_ELEMENTS_SCHEMA.
Many thanks in advance.
Regards.
Tarek
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.
Confirmed angular 15 doesn't allow us importing css from styles array in angular.json.
./node_modules/@fullcalendar/daygrid/main.css?ngGlobalStyle: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;
| }
Alright, the next beta has been released:
Hi @arshaw,
Thanks for releasing the new beta.
Just trying it out now. Have you change the signature for the Events and the Resources as a function?
The documentation states the following signature
- events: function(fetchInfo, successCallback, failureCallback).
- resources: function( fetchInfo, successCallback, failureCallback )
Typescript complains about the 3rd param.
Regards,
Tarek
Sorry this might look like a silly question, being the issue closed but still full-calendar is preventing migration from angular 13 to 15 and I got all the errors here mentioned:
This is what I get when trying to do so:
Collecting installed dependencies...
Found 42 dependencies.
Fetching dependency metadata from registry...
Package "@fullcalendar/angular" has an incompatible peer dependency to "@angular/common" (requires "9 - 13" (extended), would install "15.1.5").
Package "@fullcalendar/angular" has an incompatible peer dependency to "@angular/core" (requires "9 - 13" (extended), would install "15.1.5").
✖ Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
See "/private/var/folders/wz/nztfzxk57kz8zwx3l25rpl4h0000gn/T/ng-VzhSui/angular-errors.log" for further details."
Even though it's explained what is to change in the code from the previous version, it's not clear to me what I should first install/uninstall....should I first uninstall full calendar and then reinstall it from scratch?
I just launched again npm install @fullcalendar/core and I get all errors mentioned on top of this page(you may need an appropriate loader...) , then I am stuck: I can't upgrade to angular and now I can't even serve my application....
Any help is appreciated to guide me out of quicksand, thank you.
@nicolacardi, it sounds like you're on an old version of the @fullcalendar/angular connector. Please upgrade all fullcalendar-related packages. They'll support Angular 15.