Upgrade to map libre 6

build/webpack.config.js

@@ -3,6 +3,7 @@ const fs = require('fs');
 const webpack = require('webpack');
 const SymlinkWebpackPlugin = require('symlink-webpack-plugin');
 const { VueLoaderPlugin } = require('vue-loader');
+const CopyPlugin = require("copy-webpack-plugin");
 
 const ROOT = path.resolve(__dirname, '..');
 const SRC = path.resolve(ROOT, 'src');
@@ -58,6 +59,13 @@ module.exports = (env, argv) => {
 			rules: [{
 					test: /\.vue$/,
 					loader: 'vue-loader'
+				}, {
+					test: /\.mjs$/,
+					include: /node_modules\/maplibre-gl/,
+					parser: {
+						exprContextCritical: false,    // Silences expression context warnings [2]
+						unknownContextCritical: false  // Silences unknown context warnings
+					}
 				}, {
 					test: /\.js$/,
 					exclude: file => (/node_modules/.test(file) && !/\.vue\.js/.test(file)),
@@ -94,7 +102,8 @@ module.exports = (env, argv) => {
 					generator: {
 						filename: isDev ? 'assets/images/[name][ext]' : 'assets/images/[name].[contenthash:8][ext]'
 					}
-				}]
+				}
+			]
 		},
 		plugins: [
 			new SymlinkWebpackPlugin([
@@ -102,6 +111,12 @@ module.exports = (env, argv) => {
 				{ origin: '../resources/geo/', symlink: 'geo' },
 				{ origin: '../src/images/icons/', symlink: 'assets/images/icons' }
 			]),
+			new CopyPlugin({
+				patterns: [{ 
+					from: "node_modules/maplibre-gl/dist/maplibre-gl-(worker|shared).mjs",
+					to: "maplibre/[name][ext]" 
+				}]
+			}),
 			new webpack.DefinePlugin({
 				__VUE_OPTIONS_API__: 'true',
 				__VUE_PROD_DEVTOOLS__: 'false',
@@ -134,6 +149,10 @@ module.exports = (env, argv) => {
 				'@scripts': path.resolve(SRC, 'scripts'),
 				'@styles': path.resolve(SRC, 'styles')
 			}
+		},
+		stats: {
+			children: true,
+			errorDetails: true
 		}
 	};
 };

package.json

@@ -3,6 +3,7 @@
     "@babel/core": "^8.0.1",
     "@babel/preset-env": "^8.0.2",
     "babel-loader": "^10.0.0",
+    "copy-webpack-plugin": "^14.0.0",
     "symlink-webpack-plugin": "^1.1.0",
     "vue-loader": "^17.4.2",
     "webpack": "^5.99.7",
@@ -27,11 +28,11 @@
     "@uppy/xhr-upload": "^5.2.0",
     "autosize": "^6.0.1",
     "css-loader": "^7.1.2",
-    "maplibre-gl": "^5.24.0",
+    "maplibre-gl": "^6.0.0",
     "sass": "^1.97.2",
     "sass-loader": "^17.0.0",
     "simplebar-vue": "^2.3.3",
-    "vue": "^3.3.8",
+    "vue": "^3.5.40",
     "vue-style-loader": "^4.1.3"
   },
   "allowScripts": {

src/components/project.vue

@@ -1,6 +1,7 @@
 <script>
+import { Map, Marker, LngLatBounds, LngLat, Popup, ScaleControl, NavigationControl, setWorkerUrl } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { Map, Marker, LngLatBounds, LngLat, Popup, ScaleControl, NavigationControl } from 'maplibre-gl';
+
 import { createApp } from 'vue';
 
 import Lightbox from '@scripts/lightbox';
@@ -11,6 +12,8 @@ import ProjectPopup from '@components/projectPopup';
 import ProjectFeed from '@components/projectFeed';
 import ProjectSettings from '@components/projectSettings';
 
+setWorkerUrl('maplibre/maplibre-gl-worker.mjs');
+
 class GroupedScaleControl {
 	constructor(options) {
 		this.scale = new ScaleControl(options);