'Module parse failed: Unexpected token in Cypress for Vue

I am trying to run a simple test in Cypress (./cypress/integration/simple.spec.ts)

import { sayHelloTo } from "../../src/demo";

describe("Simple", () => {
  before(() => {
    cy.log(sayHelloTo("Carl"));
  });

  it("Demo", () => {
    expect(true).equal(true);
  });
});

I want to import and use scripts from my ./src folder. This particular test uses the helper script ./src/demo.ts:

export function sayHelloTo(person: string): string {
  return "Hello " + person;
}

export class DemoClass {
  static myConst = 10;
}

When I run the test, Cypress throws the following error message:

Error: Webpack Compilation Error
./src/demo.ts 5:19
Module parse failed: Unexpected token (5:19)
File was processed with these loaders:
 * ../../../../Library/Caches/Cypress/9.6.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 DemoClass {
>     static myConst = 10;
| }
| 
 @ ./cypress/integration/simple.spec.ts 1:0-44 4:15-25

Interestingly, if I comment out the class stuff (lines 5-7) in demo.ts, no error is thrown.

Webpack for Cypress is configured in ./cypress/plugins/index.js like so (taken from here):

const { startDevServer } = require("@cypress/webpack-dev-server");
const webpackConfig = require("@vue/cli-service/webpack.config");

module.exports = (on, config) => {
  on("dev-server:start", (options) => {
    return startDevServer({
      options,
      webpackConfig,
    });
  });
};

It seems like the TypeScript loader is not configured correctly but I can't interfere with it, since it is automatically loaded from the vue cli service (btw. vue-cli-service serve works perfectly fine).

This is my config file for TypeScript (./cypress/tsconfig.json):

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext", "dom"],
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "types": ["cypress"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["../src/*"]
    }
  },
  "include": ["**/*.ts"]
}

These are the dependencies from ./package.json:

{
  "dependencies": {
    "axios": "^0.27.2",
    "body-parser": "^1.20.0",
    "consul": "^0.40.0",
    "core-js": "^3.22.2",
    "express": "^4.18.0",
    "express-pino-logger": "^7.0.0",
    "mime-types": "^2.1.35",
    "path": "^0.12.7",
    "pinia": "^2.0.13",
    "pino": "^7.11.0",
    "rxjs": "^7.5.5",
    "vue": "^3.2.33",
    "vue-currency-input": "^2.4.0",
    "vue-i18n": "^9.1.9",
    "vue-router": "^4.0.14",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@cypress/vue": "^3.1.0",
    "@cypress/webpack-dev-server": "^1.8.4",
    "@cypress/webpack-preprocessor": "^5.11.1",
    "@types/consul": "^0.40.0",
    "@types/express": "^4.17.13",
    "@types/express-pino-logger": "^4.0.3",
    "@types/jest": "^27.4.1",
    "@types/mime-types": "^2.1.1",
    "@types/node": "^17.0.29",
    "@typescript-eslint/eslint-plugin": "^5.21.0",
    "@typescript-eslint/parser": "^5.21.0",
    "@vue/cli-plugin-babel": "^5.0.4",
    "@vue/cli-plugin-e2e-cypress": "^5.0.4",
    "@vue/cli-plugin-eslint": "^5.0.4",
    "@vue/cli-plugin-router": "^5.0.4",
    "@vue/cli-plugin-typescript": "^5.0.4",
    "@vue/cli-plugin-unit-jest": "^5.0.4",
    "@vue/cli-service": "^5.0.4",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/test-utils": "^2.0.0-rc.21",
    "clean-webpack-plugin": "^4.0.0",
    "cypress": "^9.6.0",
    "eslint": "^8.14.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.1",
    "lint-staged": "^12.4.1",
    "prettier": "^2.6.2",
    "sass": "^1.51.0",
    "sass-loader": "^12.6.0",
    "typescript": "^4.6.3",
    "vue-template-compiler": "^2.6.14",
    "webpack-cli": "^4.9.2",
    "webpack-node-externals": "^3.0.0"
  }
}

Any help would be very much appreciated!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source