Bug with nuxt 3

[dbelouslv]

Uncaught (in promise) SyntaxError: The requested module '/_nuxt/@fs/C:/Projects/MyProject/src/PublicSite/client-app/node_modules/xml-utils/find-tags-by-name.js?v=e6956880' does not provide an export named 'default' (at geotiffimage.js:4:8)

I tried to use this code:

<ClientOnly>
     <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" class="map">
         <ol-view :center="center"
                  :rotation="rotation"
                  :zoom="zoom"
                  :projection="projection" />
         <ol-tile-layer>
             <ol-source-osm />
         </ol-tile-layer>

         <ol-vector-layer>
             <ol-source-vector :features="geoJsonFeatures" :format="geoJson" />
             <ol-style>
                 <ol-style-icon :src="markerIcon" :scale="0.8"></ol-style-icon>
             </ol-style>
         </ol-vector-layer>
     </ol-map>
 </ClientOnly>
 
 const geoJsonFeatures = computed(() => {
     const features = getFilteredApplicatorsList()
         .filter(applicator => !isNaN(parseFloat(applicator.applicatorLat!)) && !isNaN(parseFloat(applicator.applicatorLong!)))
         .map((applicator, i) => {
             return {
                 type: "Feature",
                 properties: {},
                 geometry: {
                     type: "Point",
                     coordinates: [parseFloat(applicator.applicatorLong), parseFloat(applicator.applicatorLat)],
                 }
             };
         });

     return geoJson.readFeatures({
         type: "FeatureCollection",
         features
     });
 }); 

[constantinius]

@DanielJDufour Could you maybe take a look at this?

[DanielJDufour]

Looking at this now. Thank you for flagging this!

[DanielJDufour]

@dbelouslv a few questions to help troubleshoot:

• what package manager are you using? npm? pnpm? yarn?
• could you provide your package.json or a list of other relevant dependencies? ol?

I created a very small minimal test example using Nuxt and geotiff.js, which didn't seem to have any issues:
https://github.com/GeoTIFF/geotiffjs-nuxt-test/blob/main/geotiffjs-nuxt-test/app.vue

My hunch is that the issue is with the interaction among openlayers, geotiff.js and other dependencies. I'm happy to help debug this further! Looking forward to your answers to the questions above!

Thank you again for flagging this issue. Fixing this together we will help a lot of people who want to use OpenLayers and geotiff.js with Nuxt! :-)

[dbelouslv]

Thank you for your response!

My package.json:

"dependencies": {
  "@bootstrap-vue-next/nuxt": "^0.24.21",
  "@nuxt/devtools": "1.3.9",
  "@nuxt/image": "^1.8.0",
  "@nuxtjs/google-fonts": "^3.2.0",
  "@pinia/nuxt": "0.5.1",
  "@splidejs/vue-splide": "0.6.12",
  "@types/grecaptcha": "^3.0.9",
  "@types/js-cookie": "^3.0.6",
  "@types/stripe-v3": "^3.1.33",
  "@vueform/multiselect": "^2.6.8",
  "@vuelidate/core": "^2.0.3",
  "@vuelidate/validators": "^2.0.4",
  "bootstrap": "5.3.3",
  "bootstrap-vue-next": "^0.24.21",
  "js-cookie": "^3.0.5",
  "lodash": "^4.17.21",
  "moment": "^2.30.1",
  "nuxt": "^3.13.2",
  "nuxt-booster": "^3.1.5",
  "nuxt-bus": "^0.9.3",
  "nuxt-icons": "^3.2.1",
  "nuxt-proxy-request": "^1.10.0",
  "nuxt-security": "^2.0.0",
  "pinia": "^2.1.7",
  "qs": "^6.12.3",
  "vue": "^3.5.8",
  "vue-tel-input": "9.1.3",
  "vue-toastification": "^2.0.0-rc.5",
  "ol": "latest",
  "vue3-openlayers": "latest"
},
"devDependencies": {
  "@fortawesome/free-brands-svg-icons": "^6.6.0",
  "@fortawesome/free-solid-svg-icons": "^6.6.0",
  "@types/gtag.js": "^0.0.20",
  "@types/lodash": "^4.17.7",
  "@types/qs": "6.9.15",
  "@vesp/nuxt-fontawesome": "^1.0.4",
  "cross-env": "^7.0.3",
  "eslint": "9.6.0",
  "nuxt-3-intercom": "^1.1.2",
  "pinia-plugin-persistedstate": "^3.2.1",
  "prettier": "3.3.2",
  "sass": "1.77.6",
  "sass-loader": "14.2.1"
}

The code:

<ClientOnly>
     <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" class="map">
         <ol-view :center="center"
                  :rotation="rotation"
                  :zoom="zoom"
                  :projection="projection" />
         <ol-tile-layer>
             <ol-source-osm />
         </ol-tile-layer>

         <ol-vector-layer>
             <ol-source-vector :features="geoJsonFeatures" :format="geoJson" />
             <ol-style>
                 <ol-style-icon :src="markerIcon" :scale="0.8"></ol-style-icon>
             </ol-style>
         </ol-vector-layer>
     </ol-map>
 </ClientOnly>

import { GeoJSON } from "ol/format";

    const center = ref([-84.570812, 33.907047]);
    const projection = ref('EPSG:4326');
    const zoom = ref(5.75);
    const rotation = ref(0);
    const markerIcon = ref('/images/partnership/map-pin.webp');
    const geoJson = new GeoJSON();
    
    const geoJsonFeatures = computed(() => {
    const features = getFilteredApplicatorsList()
        .filter(applicator => !isNaN(parseFloat(applicator.applicatorLat!)) && !isNaN(parseFloat(applicator.applicatorLong!)))
        .map((applicator, i) => {
            return {
                type: "Feature",
                properties: {},
                geometry: {
                    type: "Point",
                    coordinates: [parseFloat(applicator.applicatorLong), parseFloat(applicator.applicatorLat)],
                }
            };
        });

    return markRaw(geoJson.readFeatures({
        type: "FeatureCollection",
        features,
    }));
});

I can show NUXT.config if it is needed