Webpack - Require('Node_Modules/Leaflet/Leaflet.CSS')

Example of how to load static CSS files from node_modules using webpack?

For users who have encountered a similar problem, there are steps that I've done to get it working, I'm not sure that this equilibrium way.

1. npm install file-loader --save
2. add import 'leaflet/dist/leaflet.css'; in main app.js
3. change webpack.config.js by following way:

add css-loader to get rid of SyntaxError: Unexpected token . and next add file-loader and match files to get rid of Uncaught Error: Cannot find module "./images/layers.png":

module.exports = {
  entry: "./web/static/js/app.js",
  output: {
    path: "./priv/static/js",
    filename: "app.js"
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel'
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract(
        'style',
        'css' + '!sass?outputStyle=expanded&' + stylePathResolves
      )
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: 'file-loader'
    }]
  },
  plugins: [new ExtractTextPlugin("app.css")]
};

At the beginning I got this config from some example and it's not 100% clear why I've used ExtractTextPlugin to load scss and what the correlation is with css-loader, maybe to be more coherent should I use ExtractTextPlugin also in this part, maybe someone knows and can code review? But my solution is working and I can work further.

Webpack Refused to apply style from leaflet.css

Try to add it in the angular.json file in the styles section

"styles": [
    "styles.css",
    "./node_modules/leaflet/dist/leaflet.css"
],

You can find more info here: Adding CSS and JavaScript to an Angular CLI Project

How to fix error Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)

I found a way to fix it.

Steps to fix:

Open your package.json file and edit your browserslist as follows.

 "browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},

to

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

Once you've done this, delete the node_modules/.cache directory.

Then try npm install.

And npm start

Tadaaa!

References:

• ?? Operator results in "Unexpected Token" err when used in package #9468
• Module parse failed: Unexpected token (10:41) in @react-leaflet/core/esm/path.js #877

ERROR in ./node_modules/leaflet/dist/leaflet.css 3:0 You may need an appropriate loader to handle this file type

You try to load CSS file as a JS module.

This line is the problem: import 'leaflet/dist/leaflet.css';

Try this instead: import leaflet from 'leaflet'

Angular 10 - Leaflet - Webpack breaking URL to marker-icon.png

This is neither a clean solution, nor one that actually fixes the problem, it just circumvents it.

In the end, what you're trying to do is load these 2 image files. Those should come from the HTTP server that is distributing your frontend but that is pretty precisely what leaflet is breaking. Nothing is stopping you from loading these 2 image files from a different place, like the HTTP Server that serves your backend.

Thus, I have uploaded the 2 image files to my backend server and then replaced the defined DefaultIcon of Leaflet's Marker prototype with one whose URL points to my backend server. That fixed it for me.

let DefaultIcon = L.icon({
  iconUrl: `${Constants.wikiMediaUrl}/leaflet/marker-icon.png`,
  shadowUrl: `${Constants.wikiMediaUrl}/leaflet/marker-shadow.png`,
  iconSize: [24,36],
  iconAnchor: [12,36]
});

L.Marker.prototype.options.icon = DefaultIcon;

---

Related Topics