使用 Typescript 进行 Cypress 测试中的动态导入：ChunkLoadError：加载块 1 失败

Question

I'm trying to use dynamic imports in my cypress tests, like this const inputModule = await import('../../__tests__/testCases/baseInput');

But I'm getting this error: ChunkLoadError: Loading chunk 1 failed. (missing: http://localhost:3000/__cypress/iframes/integration/1.cases.spec.ts )

This is my webpack config:

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));
};

And this is my tsconfig.json

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

Answer 1

I had to add this to my tsconfig.json :

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

and this to my webpack config

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