Whitelist or blacklist of modules?

[xycabcd]

To prevent importing project tools from node_modules, I would like to only allow modules defined in dependencies, or disallow any modules defined in devDependencies. How should I achieve that?

[Pramodh369]

You can achieve this in two main ways depending on whether you want to catch it during linting (which is the standard, fastest approach) or directly during the Vite build/dev process.

Option 1: The Linting Approach
The cleanest way to enforce this is using ESLint via eslint-plugin-import. It catches the error instantly in your IDE before Vite even runs.You can use the no-extraneous-dependencies rule to strictly forbid importing packages that aren't explicitly defined in your production dependencies

// eslint.config.js (Flat Config)
import importPlugin from 'eslint-plugin-import';

export default [
{
plugins: {
import: importPlugin,
},
rules: {
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: false, // Disallows devDependencies in your app code
optionalDependencies: false,
peerDependencies: false,
}
],
},
},
];

Option 2: The Vite Plugin Approach
If you want Vite to actively block the build or throw an error during vite dev, you can write a tiny custom plugin in vite.config.js to validate imports against your package.json:

import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';

function restrictDependenciesPlugin() {
// Load package.json dependencies once at startup
const pkgPath = path.resolve(process.cwd(), 'package.json');
const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
const allowedDeps = new Set(Object.keys(pkg.dependencies || {}));

return {
name: 'restrict-dependencies',
resolveId(source) {
// Skip relative/absolute project imports and native node modules
if (source.startsWith('.') || source.startsWith('/') || path.isAbsolute(source) || source.startsWith('node:')) {
return null;
}

  // Extract base package name (e.g., 'lodash/get' -> 'lodash', '@scope/pkg/foo' -> '@scope/pkg')
  const parts = source.split('/');
  const pkgName = source.startsWith('@') ? `${parts[0]}/${parts[1]}` : parts[0];

  // If it's from node_modules but not in dependencies, block it
  if (!allowedDeps.has(pkgName)) {
    throw new Error(
      `[Security] Importing "${pkgName}" is blocked. It must be listed in "dependencies", not "devDependencies".`
    );
  }
  
  return null;
}

};
}

export default defineConfig({
plugins: [restrictDependenciesPlugin()],
});

[chrisjcthomas]

To enforce that only production dependencies (listed in dependencies) are imported into your application source files—while preventing import leaks of devDependencies (like testing libraries or dev tools)—you can use one of the following approaches:

1. ESLint (Recommended & Industry Standard)

The standard way to restrict imports is using ESLint with eslint-plugin-import. The import/no-extraneous-dependencies rule checks that all imports are listed in dependencies and will flag any import of a devDependency.

You can configure it in your eslint.config.js (or .eslintrc.json) to allow devDependencies only in specific files like tests and configuration modules:

// eslint.config.js
import importPlugin from 'eslint-plugin-import';

export default [
  {
    plugins: {
      import: importPlugin
    },
    rules: {
      'import/no-extraneous-dependencies': [
        'error',
        {
          devDependencies: [
            '**/*.test.ts',
            '**/*.spec.ts',
            'vite.config.ts',
            'vitest.config.ts'
          ],
          optionalDependencies: false,
          peerDependencies: false
        }
      ]
    }
  }
];

2. Custom Vite Build-Time Plugin

If you want the Vite build itself to fail immediately upon encountering a forbidden import, you can write a simple custom Vite resolver plugin:

// vite.config.ts
import { defineConfig } from 'vite';
import { readFileSync } from 'fs';
import { resolve } from 'path';

function restrictImportsPlugin() {
  const pkg = JSON.parse(readFileSync(resolve(process.cwd(), 'package.json'), 'utf-8'));
  const allowedImports = new Set([
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
  ]);

  return {
    name: 'vite-plugin-restrict-imports',
    resolveId(source, importer) {
      // Ignore relative, absolute, and virtual module paths
      if (source.startsWith('.') || source.startsWith('/') || source.startsWith('\\') || source.includes('\x00')) {
        return null;
      }

      // Extract root package name (e.g., "lodash/map" -> "lodash")
      const match = source.match(/^([^@/]+|@[^/]+/[^/]+)/);
      const pkgName = match ? match[1] : source;

      // Allow node built-ins
      if (pkgName.startsWith('node:') || ['fs', 'path', 'os', 'crypto'].includes(pkgName)) {
        return null;
      }

      if (!allowedImports.has(pkgName)) {
        throw new Error(
          `Forbidden import: "${source}" is imported in ${importer} but is not listed in package.json dependencies.`
        );
      }
      return null;
    }
  };
}

export default defineConfig({
  plugins: [restrictImportsPlugin()]
});

[RuntimeTerror001]

Vite itself doesn't distinguish between dependencies and devDependencies when resolving imports. If you want to prevent application code from importing packages that are only meant for development, the recommended approach is to enforce it with a linter rather than the bundler.

For example, eslint-plugin-import provides the import/no-extraneous-dependencies rule, which can be configured to disallow imports from devDependencies in your source files while still allowing them in config files, tests, etc.

This keeps the check explicit and catches violations early without affecting Vite's module resolution.

[DucMinhNe]

There's no built-in Vite option for this, but it's a few lines as a small plugin. A resolveId hook with enforce: 'pre' sees every bare specifier before Vite resolves it into node_modules, so you can compare the package name against your dependencies allowlist and throw if it isn't there. Because resolveId is a universal hook, the same plugin enforces the rule in both the dev server and the production build.

// vite.config.js
import { readFileSync } from 'node:fs'
import { builtinModules } from 'node:module'

const pkg = JSON.parse(readFileSync('./package.json', 'utf-8'))
const allowed = new Set(Object.keys(pkg.dependencies || {}))
const builtins = new Set([
  ...builtinModules,
  ...builtinModules.map((m) => 'node:' + m),
])

const isBare = (id) => !id.startsWith('.') && !id.startsWith('/') && !id.startsWith('\0')
const pkgNameOf = (id) => {
  const p = id.split('/')
  return id.startsWith('@') ? p.slice(0, 2).join('/') : p[0]
}

function allowlistDeps() {
  return {
    name: 'allowlist-deps',
    enforce: 'pre',
    resolveId(source) {
      // skip relative/absolute, virtual ids and `pkg:`-style ids
      if (!isBare(source) || source.includes(':')) return null
      const name = pkgNameOf(source)
      // allow node builtins and vite's own internal imports
      if (builtins.has(name) || name === 'vite') return null
      if (!allowed.has(name)) {
        throw new Error(
          `[allowlist-deps] Import of "${source}" is not allowed. ` +
          `"${name}" is not listed in "dependencies" of package.json.`
        )
      }
      return null // let Vite resolve it normally
    },
  }
}

export default { plugins: [allowlistDeps()] }

This gives you exactly the "only allow modules in dependencies" behavior you described — anything in devDependencies (or not declared at all) throws. To flip it into a blacklist instead, swap the Set for your disallowed names and invert the check.

A couple of notes from testing this on Vite 8:

• Return null on the allowed paths so Vite still does its normal resolution; only throw to block. The thrown error fails the dev transformRequest and the build, with your message pointing at the offending import.
• The name === 'vite' (and the source.includes(':') skip) guards are there so internal imports like vite/modulepreload-polyfill and virtual:/\0-prefixed ids that get injected during the build aren't accidentally blocked. Add any other framework-internal packages you use to the allow checks if you see false positives.
• pkgNameOf handles scoped packages (@scope/name) and subpath imports (lodash/merge) by collapsing them to the package name before the lookup.

[fournarin]

Control module pre-bundling in Vite:

export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'heavy-pkg'],   // force prebundle
    exclude: ['your-local-linked-pkg'],    // skip prebundle
  },
  ssr: {
    noExternal: ['package-that-must-be-bundled'],
    external: ['native-only-module'],
  },
})

Use resolve.dedupe for duplicate React etc.