Do not resolve import for a certain dependency in dev server

[cdauth]

I am writing a Leaflet plugin. My plugin imports Leaflet as import * as L from "leaflet". My library includes a test HTML page that embeds a Leaflet map with my plugin.

I need to test my plugin with Leaflet 1 and Leaflet 2. I would like to duplicate as little code as possible to achieve this.

My idea was that I could create a dynamic import map in my test page that resolves "leaflet" to either Leaflet 1 or Leaflet 2 from esm.sh, depending on a query parameter that the test page is opened with. However, this would require Vite to leave the "leaflet" in all imports of Leaflet untouched. Through build.rollupOptions.external I can configure this for the production bundle, but not for the dev server.

Is there a way to mark dependencies as external for the dev server? Or are there any alternative approaches to achieve this?

[CharlieJamesGwapo]

build.rollupOptions.external only applies to the production build. For the dev server the cleanest way is a tiny plugin that marks the dependency external in resolveId, combined with optimizeDeps.exclude so Vite does not pre-bundle it:

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    {
      name: "externalize-leaflet",
      enforce: "pre",
      resolveId(source) {
        if (source === "leaflet") {
          return { id: "leaflet", external: true };
        }
      },
    },
  ],
  optimizeDeps: {
    exclude: ["leaflet"],
  },
});

With this in place Vite leaves the bare "leaflet" specifier alone in the transformed module graph in both dev and build, so the import map you put on the test page is what actually resolves it (to Leaflet 1 or Leaflet 2 from esm.sh based on your query parameter).

If you ever want to externalize a wider set, vite-plugin-externalize-deps does effectively the same thing for an arbitrary list.

[harshagarwalnyu]

Building on the plugin approach above — here's how to make the Leaflet version dynamic based on a query parameter, which is the part of your original question not yet covered.

The plugin above hard-codes leaflet as external, leaving the browser to resolve it via import map. To vary which version the import map points to based on a query parameter, inject the import map dynamically in your index.html:

<!-- index.html -->
<script>
  const version = new URLSearchParams(location.search).get('leaflet') || '2';
  const map = document.createElement('script');
  map.type = 'importmap';
  map.textContent = JSON.stringify({
    imports: {
      leaflet: `https://esm.sh/leaflet@${version}/dist/leaflet-src.esm.js`
    }
  });
  document.currentScript.after(map);
</script>

// vite.config.ts
export default defineConfig({
  plugins: [
    {
      name: 'externalize-leaflet',
      enforce: 'pre',
      resolveId(source) {
        if (source === 'leaflet') return { id: 'leaflet', external: true }
      },
    },
  ],
  optimizeDeps: { exclude: ['leaflet'] },
})

Then:

• http://localhost:5173/?leaflet=1 → resolves leaflet to Leaflet 1 from esm.sh
• http://localhost:5173/?leaflet=2 → resolves leaflet to Leaflet 2 from esm.sh

The import map must be injected before the module graph is evaluated, which is why the inline script inserts it synchronously. Works in both dev (Vite leaves the bare specifier alone) and production build (external in rollup options).

[DaCameraGirl]

The two approaches in the comments are both valid — here's how to combine them for the cleanest solution for your use case.

Step 1: Externalize leaflet in the dev server

A small custom plugin + optimizeDeps.exclude is the right tool:

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    exclude: ['leaflet'], // prevent Vite from pre-bundling it
  },
  plugins: [
    {
      name: 'externalize-leaflet',
      enforce: 'pre',
      resolveId(source) {
        if (source === 'leaflet') {
          return { id: 'leaflet', external: true }; // leave bare specifier untouched
        }
      },
    },
  ],
  build: {
    rollupOptions: {
      external: ['leaflet'], // already works in prod, keeps parity
    },
  },
});

Step 2: Inject the import map per-version via index.html

With leaflet now bare in the dev output, the browser's import map resolver takes over. Inject the map dynamically based on the query param:

<!-- test/index.html -->
<script>
  const version = new URLSearchParams(location.search).get('leaflet') || '2';
  const map = document.createElement('script');
  map.type = 'importmap';
  map.textContent = JSON.stringify({
    imports: {
      leaflet: `https://esm.sh/leaflet@${version}/dist/leaflet-src.esm.js`
    }
  });
  // Must be inserted before any module scripts
  document.currentScript.after(map);
</script>
<script type="module" src="./main.js"></script>

Then test with:

• http://localhost:5173/ → Leaflet 2 (default)
• http://localhost:5173/?leaflet=1 → Leaflet 1

Why this works

Vite's resolveId hook returning external: true tells the dev server to emit the bare import ... from 'leaflet' specifier without resolving it. optimizeDeps.exclude ensures the pre-bundler doesn't touch it either. The browser then sees the bare specifier and looks it up in the import map, which you've already configured to point at the right esm.sh URL for each Leaflet version.

This approach requires zero code duplication and works identically in dev and production build modes.

[DaCameraGirl]

Yes, you can keep leaflet external in the dev server using a combination of optimizeDeps.exclude and a custom Vite plugin's resolveId hook. Here's the complete solution:

Solution: Custom Plugin + optimizeDeps

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  // 1. Prevent Vite's pre-bundler from processing leaflet
  optimizeDeps: {
    exclude: ['leaflet'],
  },
  // 2. For production: keep leaflet external in the rollup bundle
  build: {
    rollupOptions: {
      external: ['leaflet'],
    },
  },
  plugins: [
    {
      name: 'externalize-leaflet',
      enforce: 'pre',
      // 3. In the dev server: intercept the import and mark it external
      resolveId(source) {
        if (source === 'leaflet') {
          return { id: 'leaflet', external: true }
        }
      },
    },
  ],
})

How It Works

• optimizeDeps.exclude — Tells Vite's pre-bundler (esbuild) not to process leaflet. Without this, Vite will try to pre-bundle the package and your resolveId override gets bypassed.
• resolveId returning { external: true } — During module resolution in the dev server, Vite will emit the bare specifier import * as L from 'leaflet' as-is, without rewriting it to a file path. This means the browser will handle resolution — perfect for an import map.
• build.rollupOptions.external — Keeps parity for production builds.

Your Test Page with Import Map

With this setup, your test page can use an import map to swap between Leaflet versions:

<!DOCTYPE html>
<html>
<head>
  <!-- Swap this URL to test Leaflet v1 vs v2 -->
  <script type="importmap">
  {
    "imports": {
      "leaflet": "https://esm.sh/leaflet@1.9.4"
    }
  }
  </script>
</head>
<body>
  <div id="map" style="height: 400px"></div>
  <script type="module" src="/src/test-page.ts"></script>
</body>
</html>

For Leaflet v2: change the URL to https://esm.sh/leaflet@2.0.0 (or whatever the v2 ESM URL is). Zero code duplication.

Important: Import Map Browser Support

Import maps are supported in all modern browsers. If you need to support older browsers in your test environment, add the es-module-shims polyfill:

<script async src="https://ga.jspm.io/npm:es-module-shims@1.8.0/dist/es-module-shims.js"></script>

(This must appear before the <script type="importmap"> tag.)

Alternative: Query Param Driven Dynamic Import

If you don't want to rely on import maps, you can make the test page dynamically import based on a query param:

// test-page.ts
const version = new URLSearchParams(location.search).get('v') ?? '1'
const leafletUrl = version === '2'
  ? 'https://esm.sh/leaflet@2.0.0'
  : 'https://esm.sh/leaflet@1.9.4'

const L = await import(/* @vite-ignore */ leafletUrl)
// use L...

The /* @vite-ignore */ comment suppresses Vite's static analysis warning on the dynamic URL.