Search code examples
typescriptvue.jsleafletnuxt.js

vue-Leaflet (Nuxt) produce error Unexpected character '�' when using PNG tiles

In my Nuxt 3 / vue 3 / vite project using vue-leaflet, when running :

npm run build

I have the following error

1: �PNG
IHDR2!w��PLTELiq3y�6�8��7��.k�3x�<��7��8��7��4��6~�4u�.l�6��0w�3x�6��- 
w�1t�.k�5~�6�2u�4{�6~�5|�5z�7��.l�-k�1t�5�2u�2u�1s�.l�/l�0q�.m�0p�.m�.l�2v�2t�1j�.l�-
[...]
 Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)
  at error (node_modules/rollup/dist/es/shared/rollup.js:1858:30)
  at Module.error (node_modules/rollup/dist/es/shared/rollup.js:12429:16)
  at Module.tryParse (node_modules/rollup/dist/es/shared/rollup.js:12806:25)
  at Module.setSource (node_modules/rollup/dist/es/shared/rollup.js:12711:24)
  at ModuleLoader.addModuleSource (node_modules/rollup/dist/es/shared/rollup.js:21959:20)

Here is the component :

<template>  
<div>      
<l-map ref="map" :zoom="8" :center="[47.41322, -1.219482]" :use-global-leaflet="false">
        <l-tile-layer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          layer-type="base"
          name="OpenStreetMap"
        ></l-tile-layer>
      </l-map>
</div>  
</template>
<script lang="ts" setup>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
</script>

The error disappear when removing the Layer tiles import :

dependencies used :

   "devDependencies": {
[...]
    "@types/leaflet": "^1.9.3",
    "@vue-leaflet/vue-leaflet": "^0.10.1",
    "leaflet": "^1.9.4",
    "nuxt": "^3.0.0",
[...]   
  }
Solution

  • This discussion pointed me in the right direction : https://github.com/nuxt/nuxt/issues/14071

    That looks like you probably need to add leaflet to your build.transpile array (as it's trying to import a .png file, which won't work without being transpiled).

    Had to add this to nuxt.config.js :

    transpile: ['leaflet', "@vue-leaflet/vue-leaflet"],