使用Cypress和NX运行React应用E2E测试时Webpack编译报错

问题分析 #

你遇到的错误核心是：Cypress内置Webpack结合NX预设配置后，ts-loader无法正确处理从JSON模块使用export * as的语法。JSON模块的导出逻辑和常规TS/JS模块存在差异，当前loader的处理规则不支持这种导出写法。

解决方案 #

1. 调整导出方式（最简单直接） #

替换export * as dsls from './dsls'为兼容写法，直接导入JSON文件后导出：

// 假设dsls是默认导出的JSON文件
import dsls from './dsls.json';
export { dsls };

这种写法避开了export * as的语法兼容性问题，同时明确处理JSON模块的导入逻辑。

2. 自定义Cypress Webpack配置 #

如果必须保留export * as语法，可以在Cypress配置文件中扩展Webpack规则，确保JSON模块被正确识别为ES模块：
在dashboard-e2e/cypress.config.ts中修改配置：

import { defineConfig } from 'cypress';
import { nxPreset } from '@nx/cypress/plugins/cypress-preset';

export default defineConfig({
  e2e: {
    ...nxPreset,
    webpackConfig: {
      module: {
        rules: [
          // 让Webpack原生处理JSON模块的ES导出
          {
            test: /\.json$/,
            type: 'json',
          },
          // 配置ts-loader支持ESNext语法
          {
            test: /\.(ts|tsx)$/,
            loader: 'ts-loader',
            options: {
              compilerOptions: {
                module: 'esnext',
                allowSyntheticDefaultImports: true,
              },
            },
          },
        ],
      },
      resolve: {
        extensions: ['.ts', '.tsx', '.json'],
      },
    },
  },
});

通过type: 'json'让Webpack原生处理JSON模块的ES导出，同时配置ts-loader支持esnext模块语法，确保export * as能被正确解析。

3. 升级依赖版本 #

你使用的Cypress 11.2.0属于较旧版本，可能存在和NX的兼容性问题。尝试升级Cypress到12.x及以上版本，同时同步升级@nx/cypress插件——新版本工具链通常会修复这类Webpack配置的兼容性问题。

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