不具合

laravelでleafletを使うとmarkerが二重になる

環境

laravel 8
laravel mix

原因

画像パスがおかしい

http://localhost/images/vendor/leaflet/dist/marker-icon.png?2b3e1faf89f9a4a4835397e7a43b4f77d%22)marker-shadow.png

対策

bootstrap.js

require('leaflet/dist/leaflet.js');
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png').default,
    iconUrl: require('leaflet/dist/images/marker-icon.png').default,
    shadowUrl: require('leaflet/dist/images/marker-shadow.png').default,
});

app.sass

@import '~leaflet/dist/leaflet.css'

補足

defaultがないと<img src="[object Module]" />なる
https://stackoverflow.com/questions/59070216/webpack-file-loader-outputs-object-module

参考

設定ファイルなど