Select to view content in your preferred language

calcite.css Error: Module parse failed ArcGIS Core v5.0

448
1
Jump to solution
03-05-2026 04:02 PM
ColbyMorris
Emerging Contributor

I am getting the following error:

./node_modules/@arcgis/core/node_modules/@esri/calcite-components/dist/cdn/main.css:1:0 - Error: Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

This issue has been presented in other threads. However, I still seem to get the issue in v5.0. I am confused as to what the issue is. I have followed multiple solution threads and nothing works.

I have read through the PRs in this github PR and it doesnt solve my solution

Version 3.3.0 distributes a file with invalid CSS that breaks Angular testing (`ng test`). Also affe...

I followed the Potential Solutions in the above link.

I first updated to angular 21. Surely if angular 20 could fix the parsing error. Then Angular 21 should be no different. This still didn't build the calcite-component.

next I built a custom WebPack where we compiled the .main.css using postCSS. This "Solved" the one issue with calcite-component.main.css But then the light.theme.css had issues building.

Is anyone else still having these issues building their angular apps?

0 Kudos
1 Solution

Accepted Solutions
ColbyMorris
Emerging Contributor

Well, of course right after I posted this, I found my issue.

The PostCSS: postcss-loader did work as intended

However, I left the following in angular.json

            "styles": [
                 "node_modules/bootstrap/dist/css/bootstrap.css",
                 "node_modules/@arcgis/core/assets/esri/themes/light/main.css",
            ],
 
Which broke the build.
 
So, by removing these the build worked.
 

View solution in original post

0 Kudos
1 Reply
ColbyMorris
Emerging Contributor

Well, of course right after I posted this, I found my issue.

The PostCSS: postcss-loader did work as intended

However, I left the following in angular.json

            "styles": [
                 "node_modules/bootstrap/dist/css/bootstrap.css",
                 "node_modules/@arcgis/core/assets/esri/themes/light/main.css",
            ],
 
Which broke the build.
 
So, by removing these the build worked.
 
0 Kudos