calcite.css Error: Module parse failed with custom webpack

thanasiskoubaros — Tue, 14 Oct 2025 07:45:53 GMT

I'm working on an angular project that uses @ArcGIS/map-components. When I upgraded to Angular 19, I received an error message stating that my project could not start. Error calcite.css:1:0 - Error: Module parse failed: Unexpected character '@' . I'm using a modified webpack to reduce bundle size and get rid of unnecessary modules, such as those related to 3D and that could be the issue. It still doesn't work even after I changed webpack.config.js

{ test: /\.css$/i, oneOf: [ { resourceQuery: /ngGlobalStyle/, use: ['style-loader','css-loader','postcss-loader'] }, { use: ['style-loader','css-loader','postcss-loader'] } ]}

./node_modules/@esri/calcite-components/dist/calcite/calcite.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. See https://webpack.js.org/concepts#loaders
> @layer{
| :not([calcite-hydrated]):is(calcite-accordion,calcite-accordion-item,calcite-action,calcite-action-bar,calcite-action-group,calcite-action-menu,calcite-action-pad,calcite-alert,calcite-autocomplete,calcite-autocomplete-item,calcite-autocomplete-item-group,calcite-avatar,calcite-block,calcite-block-group,calcite-block-section,calcite-button,calcite-card,calcite-card-group,calcite-carousel,calcite-carousel-item,calcite-checkbox,calcite-chip,calcite-chip-group,calc

Re: calcite.css Error: Module parse failed with custom webpack

ReneRubalcava — Tue, 14 Oct 2025 18:27:14 GMT

There was recently an issue on this in the calcite repo.

You can view the solution here: https://github.com/Esri/calcite-design-system/issues/12931#issuecomment-3366724689

If you're angular set up is close their example app, there are couple of spots in the angular json you can update.

topic calcite.css Error: Module parse failed with custom webpack in ArcGIS JavaScript Maps SDK Questions

calcite.css Error: Module parse failed with custom webpack

Re: calcite.css Error: Module parse failed with custom webpack