Next.js/Jest配置遇Swiper.js报错：SyntaxError: Unexpected token 'export'

原因 #

Swiper当前版本默认以ES模块（ESM）格式发布，而你的测试工具（如Jest）默认采用CommonJS（CJS）规范解析模块，无法识别ESM的export语法，导致报错。

针对Jest的解决方案 #

1. 根目录创建或修改jest.config.js，配置让Jest转译Swiper相关模块：

   module.exports = {
     // 保留原有其他配置
     transformIgnorePatterns: [
       'node_modules/(?!swiper|ssr-window|dom7)',
     ],
     transform: {
       '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
     },
   };
   

2. 安装必要的Babel依赖：

   pnpm add -D babel-jest @babel/core @babel/preset-env
   

3. 创建.babelrc配置文件：

   {
     "presets": [["@babel/preset-env", {"targets": {"node": "current"}}]]
   }
   

针对Vitest的解决方案 #

修改vitest.config.js（或vite.config.js），将Swiper相关模块设为内联依赖：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    // 保留原有其他配置
    deps: {
      inline: ['swiper', 'ssr-window', 'dom7'],
    },
  },
});

其他排查方向 #

• 若使用Jest 28+版本，可尝试在package.json中添加"type": "module"，同时将Jest配置文件改为jest.config.mjs，直接启用ESM模式解析。
• 不建议回退Swiper旧版本，优先适配ESM规范以获得后续更新支持。

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