Vite如何将具名导出的包别名映射至默认导出？

If you don't want to manually wrap invariant to bridge the named/default export gap, here are several practical alternatives:

1. Inline Alias Resolver (Lightweight Fix) #

Instead of a basic string alias, use a data URI module to convert the CommonJS default export to a named export matching @react-dnd/invariant's expected format:

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

export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@react-dnd/invariant',
        replacement: 'data:text/javascript,export const invariant = require("invariant").default;'
      }
    ]
  }
});

This tiny inline module acts as an on-the-fly bridge without needing a separate file.

2. Rollup Plugin for Import Rewriting #

Use @rollup/plugin-replace to swap named import statements with default ones before alias resolution:

// vite.config.js
import { defineConfig } from 'vite';
import replace from '@rollup/plugin-replace';

export default defineConfig({
  plugins: [
    replace({
      preventAssignment: true,
      'import { invariant } from "@react-dnd/invariant"': 'import invariant from "invariant"'
    })
  ],
  resolve: {
    alias: {
      '@react-dnd/invariant': 'invariant'
    }
  }
});

For cases where import patterns vary (like destructuring with renames), a custom Rollup plugin that parses the AST would be more reliable, but this works for straightforward imports.

3. Pre-Bundle @react-dnd/invariant with Export Adjustments #

Configure Vite's dependency pre-bundling to modify @react-dnd/invariant's export style during the optimize step:

// vite.config.js
import { defineConfig } from 'vite';
import fs from 'fs/promises';

export default defineConfig({
  optimizeDeps: {
    include: ['@react-dnd/invariant'],
    esbuildOptions: {
      plugins: [
        {
          name: 'rewire-invariant-export',
          setup(build) {
            build.onLoad({ filter: /@react-dnd\/invariant\/.*\.js$/ }, async args => {
              let content = await fs.readFile(args.path, 'utf8');
              // Convert @react-dnd/invariant's named export to default to match the native package
              content = content.replace('export const invariant', 'export default invariant');
              return { contents: content, loader: 'js' };
            });
          }
        }
      ]
    }
  }
});

This tweaks the source code of @react-dnd/invariant during pre-bundling so it uses the same export type as the native invariant package.

4. Global Import Transformation with Esbuild #

Use esbuild's transform plugins to rewrite all relevant import statements across your codebase:

// vite.config.js
import { defineConfig } from 'vite';
import fs from 'fs/promises';

export default defineConfig({
  esbuild: {
    transformOptions: {
      plugins: [
        {
          name: 'fix-invariant-imports',
          setup(build) {
            build.onLoad({ filter: /\.jsx?$/ }, async args => {
              let code = await fs.readFile(args.path, 'utf8');
              // Replace all named imports from @react-dnd/invariant with default imports from invariant
              code = code.replace(/import { invariant } from "@react-dnd\/invariant"/g, 'import invariant from "invariant"');
              return { code };
            });
          }
        }
      ]
    }
  },
  resolve: {
    alias: {
      '@react-dnd/invariant': 'invariant'
    }
  }
});

The inline alias resolver (option 1) is the simplest and most direct fix for this specific scenario.

内容的提问来源于stack exchange，提问作者AncientSwordRage