question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Leaflet with Rails 6 default config

See original GitHub issue

I have a Rails 6 project using webpacker with the default config.

I’ve got a couple of problems. First of all when compiling the css with webpack application.css:

@import "leaflet/dist/leaflet.css";
ERROR in ./frontend/styles/application.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './images/layers-2x.png' in '/home/project/frontend/styles'

I couldn’t figure how to disable this mini-css-extract-plugin so in order to move forward I copied the files from leaflet/dist/images into frontend/styles/images. Not ideal.

Now the map is rendering OK, I can move around etc…

…except the markers aren’t displaying correctly. The URLs for them look like this: /packs/media/styles/images/marker-icon-2273e3d8ad9264b7daa5bdbf8e6b47f8.png%22)marker-icon-2x.png

From what I understand #6190 was supposed to fix this but it doesn’t seem to. Am I doing something wrong?

Versions:

"@rails/webpacker": "^4.0.7",                                                                                                                                                                            
"leaflet": "^1.5.1",

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
ghybscommented, Dec 27, 2020

Hi @ruurd,

I am sorry to read that you expected a ready-to-use content for Rails but could not find one. This is Open Source, so if you find something lacking, please contribute!

I am shocked by your language, even though I replied to you in good faith. Hence I had to delete your comment. Should you write again with bad manners, you will be blocked and/or reported.

I want to believe this was an accident, and that the attitude you shew is not at all representing the Rails community. So I still wish you a nice Holiday season! 🎄

4reactions
derekecommented, Oct 1, 2020

Hey @fwolfst I should have probably come back to update this issue with the solution/work around I ended up with. In your package.json add this to your scripts section:

    "postinstall": "cp node_modules/leaflet/dist public/leaflet -r"

Not ideal but it does the trick and I’ve not had any issues with it in the last year or so.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Leaflet with Webpack in Rails 6. L.timeline is not a function
There are a few issues with your setup: The 'leaflet.timeline' plugin assumes the leaflet module is available as the global variable 'L' ....
Read more >
File: README — Documentation for leaflet-rails (0.6.4)
To start using the leaflet-rails gem, follow the steps below (assuming you use the default asset pipeline):. First, add the following code to...
Read more >
Leafletjs with Stimulusjs on Rails 6 - Hotwire Discussion
Hi, Anybody integrated Leafletjs for maps with stimulusjs ? Is it good to have it with stimulusjs ? Please share the code(gitlab/github) repo...
Read more >
Configuring Rails Applications - Ruby on Rails Guides
Default is an empty array. Since Rails 6, it is not recommended to adjust this. See Autoloading and Reloading Constants. 3.2.5 config.
Read more >
Maps on Rails - Kindleman (UK)
Configure the default settings for your maps in leaflet.rb initialiser. Leaflet.tile_layer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found