cypress: Webpack Compilation Error

Current behavior

I just added Cypress on an existing project, using vue and typescript.

Error: Webpack Compilation Error
./cypress/e2e/1-getting-started/test.ts 2:7
Module parse failed: Unexpected token (2:7)
File was processed with these loaders:
 * ../../../Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| export class Test {
>     id = '1';
| }
| 
 @ ./cypress/e2e/1-getting-started/todo.cy.js 4:12-29

Desired behavior

I should be able to run the test without errors.

Test code to reproduce

Test.ts

export class Test {
  id = '1';
}

import { Test } from './test';

describe('example to-do app', () => {
  it('should run', async () => {
    const test = new Test();
  });
});

Cypress Version

12.2.0

Node version

16.10.0

Operating System

macOs

Debug Logs

ChromeChrome 108

1920x1080
Error: Webpack Compilation Error
./cypress/e2e/1-getting-started/test.ts 2:7
Module parse failed: Unexpected token (2:7)
File was processed with these loaders:
 * ../../../Library/Caches/Cypress/12.2.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| export class Test {
>     id = '1';
| }
|

Question

What am I missing? How could we import a typescript file without creating issues?

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 9
Comments: 29 (11 by maintainers)

Most upvoted comments

Hello there, I ran into the same problem after updating Angular to the latest version v15 and all packages. The new Angular forces the target to be set to es2022 and this unfortunately causes problems with compilation and thus running the tests.

Error: Webpack Compilation Error
Module parse failed: Unexpected token (11:11)
File was processed with these loaders:
 * ../../../../AppData/Local/Cypress/Cache/12.3.0/Cypress/resources/app/node_modules/@packages/server/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { ServicesPage } from './services-page';

Do you know any solution to this problem without changing the compile target or will such a solution come up?

Magg1808 on Jan 19, 2023

Thank you. I ran the tests by adding these compiler options to package.json in the e2e folder:

 "compilerOptions": {
    "lib": ["ES2018"],
    "target": "ES2018"
  },

Magg1808 on Jan 24, 2023

This syntax is called a class property and it looks like it’s not supported out-of-the-box with webpack 4.

Can you

try updating to webpack 5?
or you can update tsconfig.json. Try setting target: 'es5' or target: 'es6'. That will change the syntax to be compatible with webpack 4.

lmiller1990 on Dec 28, 2022

@Magg1808 ES2021 is also working fine:

"compilerOptions": {
    "lib": ["ES2021"],
    "target": "ES2021"
  }

LukasKlement on Jan 28, 2023

@lmiller1990 I’m not using webpack in this project (I’m using esbuild), so yeah, presumably it’s just defaulting to v4.

It would be nice if I didn’t have to install webpack in my project to make Cypress work though. And I think (?) this is a regression, since I wasn’t encountering this issue prior to Cypress v12.

dwhieb on Feb 7, 2023

I’m having this same issue without typescript, using Cypress@12.4.1 (also had the issue on v12.1.0). My spec file imports a module which uses a public class field, and Cypress throws a “Webpack Compilation Error” at that point in the file when it tries to load.

When I copy the same file into my project root and import it, it works just fine.

import moduleName from '@org/moduleName' // <- fails
import moduleName from 'node_modules/@org/moduleName/index.js' // <- fails
import moduleName from './moduleName.js' // <- works fine

So it doesn’t seem like this is a typescript config issue per se, but rather something to do with how Cypress/webpack is interpreting files loaded from another module (a folder with a package.json file). I should note that the imported module also doesn’t use typescript, and imports fine in other projects.

dwhieb on Jan 31, 2023