When trying to build or run tests in my Angular v18 application using Leaflet, I get the following error, serving works:
./node_modules/leaflet/dist/leaflet.css:3:0 - Error: Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See
| /* required styles */
|
> .leaflet-pane,
| .leaflet-tile,
| .leaflet-marker-icon,
I tried installing css loader and style loader, and tried adjusting webpack.config.js + added the css files to angular.json
angular.json:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/fieldsightsolutions-frontend",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
},
{
"glob": "**/*",
"input": "./node_modules/leaflet/dist/images"
},
{
"glob": "**/*",
"input": "./node_modules/leaflet-draw/dist/images"
}
],
"styles": [
"src/styles.css",
"node_modules/leaflet/dist/leaflet.css",
"node_modules/leaflet-search/dist/leaflet-search.min.css",
"node_modules/leaflet-control-geocoder/dist/Control.Geocoder.css",
"node_modules/leaflet-geosearch/dist/geosearch.css",
"node_modules/leaflet-draw/dist/leaflet.draw.css",
"src/app/pages/map/mapponent.css"
],
webpack.config.js:
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
'postcss-loader',
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},