Angular and leaflet-side-by-side

[balijepalli]

Angular 15+

Getting the following error `#18 250.6 ./node_modules/leaflet-side-by-side/layout.css:1:0 - Error: Module parse failed: Unexpected token (1:0)

18 250.6 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

18 250.6 > .leaflet-sbs-range {

18 250.6 | position: absolute;

18 250.6 | top: 50%;

18 250.6

18 250.6 ./node_modules/leaflet-side-by-side/range.css:1:0 - Error: Module parse failed: Unexpected token (1:0)

18 250.6 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

18 250.6 > .leaflet-sbs-range {

18 250.6 | -webkit-appearance: none;

18 250.6 | display: inline-block!important;

`

[balijepalli]

The issue got resolved with the help web pack and loaders

[Aechee]

HI @balijepalli , can you tell me how did you resolve this issue?

[balijepalli]

Used webpack

[Blackmesa-Canteen]

Used webpack. I am using Angular + Nx

extra-webpack.config.js

// extra-webpack.config.js
module.exports = (config, context) => {
  // Add a rule specifically for the leaflet-side-by-side CSS files
  config.module.rules.push({
    test: /node_modules\/leaflet-side-by-side\/.*\.css$/,
    use: ['style-loader', 'css-loader'],
  });

  // Ensure other CSS files are processed by the default rule
  const cssRule = config.module.rules.find(rule => rule.test && rule.test.toString().includes('css'));
  if (cssRule) {
    cssRule.exclude = /node_modules\/leaflet-side-by-side\/.*\.css$/;
  }

  return config;
};

Then, in project.json

"targets": {
    "build": {
      "executor": "@nrwl/angular:webpack-browser",
      "outputs": ["{options.outputPath}"],
      "options": {
        "customWebpackConfig": {
          "path": "/apps/webapp/extra-webpack.config.js"
        },

        ...

        "serve": {
      "executor": "@nrwl/angular:webpack-dev-server",
      "configurations": {
        "production": {
          "browserTarget": "webapp:build:production"
        },
        "development": {
          "browserTarget": "webapp:build:development"
        }
      },
      "defaultConfiguration": "development"
    },

    ...