Cypress配置报错：使用import引入插件而非const时出现函数调用错误

你遇到的问题核心是@bahmutov/cypress-esbuild-preprocessor采用CommonJS规范导出，TypeScript的ES模块默认导入语法无法正确识别它的导出结构。下面是两种适配TypeScript的解决方法：

方法一：使用TypeScript专属的CommonJS导入语法 #

直接用import = require()语法导入，这种方式能完美兼容CommonJS模块：

import cypress_esbuild_preprocessor = require('@bahmutov/cypress-esbuild-preprocessor');
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on('file:preprocessor', cypress_esbuild_preprocessor());
    },
  },
});

方法二：通过命名导入访问default属性 #

如果更倾向ES模块的import * as写法，可以通过模块的default属性获取预处理器函数：

import * as cypress_esbuild_preprocessor from '@bahmutov/cypress-esbuild-preprocessor';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on('file:preprocessor', cypress_esbuild_preprocessor.default());
    },
  },
});

另外，建议检查你的tsconfig.json，将moduleResolution设置为node16或nodenext，这能让TypeScript更准确地处理ES模块与CommonJS模块的互操作。

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