使用 Typescript 在 Cypress 测试中动态导入：ChunkLoadError: Loading chunk 1 failed答案

【问题标题】：Dynamic imports in Cypress tests using Typescript: ChunkLoadError: Loading chunk 1 failed使用 Typescript 在 Cypress 测试中动态导入：ChunkLoadError: Loading chunk 1 failed
【发布时间】：2020-06-17 06:57:12
【问题描述】：

我正在尝试在我的 cypress 测试中使用动态导入，例如 const inputModule = await import('../../__tests__/testCases/baseInput');

但是我收到了这个错误： ChunkLoadError：加载块 1 失败。（缺失：http://localhost:3000/__cypress/iframes/integration/1.cases.spec.ts）

这是我的 webpack 配置：


module.exports = on => {
  const options = {
    webpackOptions: {
      resolve: {
        extensions: ['.ts', '.tsx', '.js'],
      },
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            loader: 'ts-loader',
            options: { transpileOnly: true },
          },
        ],
      },
    },
  };
  on('file:preprocessor', wp(options));
};

这是我的 tsconfig.json

{
  "extends": "../tsconfig.json",
  "include": ["cypress/**/*.ts", "**/*.ts", "**/*.js"],
  "exclude": [],
}

【问题讨论】：

标签： javascript typescript webpack cypress ts-loader

【解决方案1】：

我必须将此添加到我的tsconfig.json：

"compilerOptions": {
    "module": "CommonJS",
  }

这是我的 webpack 配置

output: {
        fileName: 'bundle.js',
        chunkFileName: '[name].bundle.js',
      }

【讨论】：