vector tiles in Leaflet with Vite fails

[ndrean]

I use https://docs.maptiler.com/leaflet/examples/vector-tiles-in-leaflet-js/

My package.json:

{
  "@maptiler/leaflet-maptilersdk": "^4.0.2",
  "@maptiler/sdk": "^3.0.0",
  "events": "^3.3.0",
  "leaflet": "^1.9.4",
}

export async function initMap() {
  const { default: L } = await import("leaflet");
  const { MaptilerLayer } = await import("@maptiler/leaflet-maptilersdk");
  const map = L.map("map", { renderer: L.canvas() });
  map.setView([0, 0], 1);

  const mtLayer = new MaptilerLayer({
    //   // Get your free API key at https://cloud.maptiler.com
    apiKey: "blabla",
  });
  mtLayer.addTo(map)
}

I use Vite:

I tried:

import nodePolyfills from "rollup-plugin-polyfill-node";

[...]
rollupOptions: {
  plugins: [nodePolyfills()],
}

This does not compile, fails with:

[vite-plugin-pwa:build] node_modules/.pnpm/@[email protected]/node_modules/@maptiler/sdk/dist/maptiler-sdk.mjs (11:7): "default" is not exported by "node_modules/.pnpm/[email protected]/node_modules/events/events.js", imported by "node_modules/.pnpm/@[email protected]/node_modules/@maptiler/sdk/dist/maptiler-sdk.mjs".
file: /Users/nevendrean/code/elixir/solidyjs/assets/node_modules/.pnpm/@[email protected]/node_modules/@maptiler/sdk/dist/maptiler-sdk.mjs:11:7

 9: import { Language as za, getLanguageInfoFromCode as Er, config as Rt, MapStyle as qe, mapStylePresetList as $t, expan...
10: import { MapStyle as Gu, MapStyleVariant as Hu, ReferenceMapStyle as Ku, ServiceError as Wu, areSameLanguages as Zu, ...
11: import ja from "events";
           ^
12: import { v4 as Na } from "uuid";
13: import { Base64 as Fa } from "js-base64";

[sebstryczek]

Hi @ndrean!

We are sorry to hear that.
Could you please prepare a minimal example project which presents the issue and share it with me?

I understand that you use:

• latest versions of MapTiler SDK and MapTiler Layer for Leaflet - which is nice;
• Vite - ok;
• pnpm as your package manager - ok.
  I created a fresh project using this setup ☝️ and so far I wasn't able to reproduce the error.

Could you please share also your devDependencies versions?
Do you have anything else in your Vite config?

BTW. Adding events as dependency shouldn't be really needed but it is also not a problem.

[ndrean]

@sebstryczek Thanks for your response.

I indeed think that my config is the problem, not your package. However, except when calling const { MaptilerLayer } = await import("@maptiler/leaflet-maptilersdk"), everything runs well.
To give some context, it is a Phoenix LiveView webapp. One page has a Leaflet map and I wanted to explore vector tiles instead of raster tiles as I wanted this page to work offline, so minimize the size of cacheable/cached tiles.

You understand it is difficult to prepare a minimal example as you might not be able to run it as you probably don't have Erlang/Elixir installed. Perhaps a Docker image? Not even sure it will help.

My package.json:

{
  "name": "assets",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "type": "module",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@maptiler/leaflet-maptilersdk": "^4.0.2",
    "@maptiler/sdk": "^3.0.1",
    "leaflet": "^1.9.4",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view",
    "solid": "link:virtual:pwa-register/solid",
    "solid-js": "^1.9.3",
    "workbox-routing": "^7.3.0",
    "workbox-strategies": "^7.3.0",
    "workbox-window": "^7.3.0",
    "y-indexeddb": "^9.0.12",
    "yjs": "^13.6.21"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.9",
    "autoprefixer": "^10.4.20",
    "esbuild": "^0.24.2",
    "esbuild-plugin-solid": "^0.6.0",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.17",
    "vite": "^6.0.5",
    "vite-plugin-pwa": "^0.21.1",
    "vite-plugin-solid": "^2.11.0",
    "vite-plugin-wasm": "^3.4.1",
    "workbox-precaching": "^7.3.0"
  },
}

Not sure if this helps, but here is my Vite config:

My Vite config

import { VitePWA } from "vite-plugin-pwa";
import { defineConfig, loadEnv } from "vite";
import solidPlugin from "vite-plugin-solid";
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";
import wasm from "vite-plugin-wasm";
import path from "path";
import tailwindcss from "@tailwindcss/vite";

const manifestOpts = {...}

const buildOps = {
  outDir: "../priv/static/",
  emptyOutDir: false,
  target: ["esnext"],
  manifest: false,
  rollupOptions: {
    input: [
      "js/app.js",
      ...
    ],
    output: {
      assetFileNames: "assets/[name][extname]",
      chunkFileNames: "assets/[name].js",
      entryFileNames: "assets/[name].js",
    },
  },
  commonjsOptions: {
    exclude: [],
    include: ["vendor/topbar.cjs"],
  },
};



const devOps = {
  enabled: true,
  type: "module",
};

const PWAOpts = {
  devOptions: devOps,
  registerType: "autoUpdate",
  filename: "sw.js",
  strategies: "generateSW",
  includeAssets: ["favicon.ico", "robots.txt"],
  manifest: manifestOpts,
  outDir: "../priv/static/",
  manifestFilename: "manifest.webmanifest",
  injectRegister: "auto", // Automatically inject the SW registration script
  injectManifest: {
    injectionPoint: undefined,
  },
  workbox: {
    //   navigationPreload: true, // <----???
    globDirectory: path.resolve(__dirname, "../priv/static/"),
    globPatterns: [
      "assets/**/*.{js,jsx,css,ico, wasm}",
      "images/**/*.{png,jpg,svg,webp}",
    ],
    swDest: "../priv/static/sw.js",
    navigateFallback: null, // Do not fallback to index.html !!!!!!!!!
    inlineWorkboxRuntime: true, // Inline the Workbox runtime into the service worker. You can't serve timestamped URLs with Phoenix
    additionalManifestEntries: [
      { url: "/", revision: null },
      { url: "/map", revision: null },
    ],
    runtimeCaching: [...],
    clientsClaim: true, // take control of all open pages as soon as the service worker activates
    skipWaiting: true, // New service worker versions activate immediately
    // Without these settings, you might have some pages using old service worker versions
    // while others use new ones, which could lead to inconsistent behavior in your offline capabilities.
  },
};

const CSSSOpts = {
  postcss: {
    plugins: [tailwindcss, autoprefixer],
  },
};

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  if (command != "build") {
    process.stdin.on("close", () => {
      process.exit(0);
    });

    process.stdin.resume();
  }

  return {
    base: "/",
    plugins: [wasm(), solidPlugin(), VitePWA(PWAOpts)],
    resolve: {
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", "wasm"],
    },
    publicDir: false,
    build: buildOps,
    css: CSSSOpts,
    define: {
      __APP_ENV__: env.APP_ENV,
    },
  };
});

[sebstryczek]

Hey @ndrean! Thank you for your response!

So, I think, the issue is caused by:

  commonjsOptions: {
    include: [
       ...
    ],
  },

If I set include to null Vite builds the app but if I set it to [] building process fails with exactly the same error you showed. I think that Vite includes node_modules there as default and if we want to add anything else we also have to put node_modules there.

So this should work:

    include: [
        /node_modules/,
        "vendor/topbar.cjs"
    ],

This is because we externalised the events package from the bundle assuming that it will be included to the build of the actual app.