Webpack Compilation Error

leo-coco commented 1 year ago

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?

lmiller1990 commented 1 year ago

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.

astone123 commented 1 year ago

Unfortunately we have to close this issue due to inactivity. Please comment if there is new information to provide concerning the original issue and we can reopen.

Magg1808 commented 1 year ago

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?

ZachJW34 commented 1 year ago

@Magg1808 could you provide more information on your setup? I scaffolded an Angular 15 application and imported a service into an e2e test and didn't have any problems. Is there a reproduction that I can clone and check out?

Magg1808 commented 1 year ago

Hi Zachary, sure, just let me know which settings to provide.

lmiller1990 commented 1 year ago

@Magg1808 angular.json and tsconfig.json and package.json would be a good place to start.

Magg1808 commented 1 year ago

I found out that the confidentiality agreement does not allow me to share the setup. Where can I look for a solution? Does your Cypress 12 work with compiler target set to ES2022 and webpack 5 at your place?

ZachJW34 commented 1 year ago

@Magg1808 here is a repo with Angular 15 and target: 'ES2022' with Cypress tests compiling normally. Can you clone the repo and see if it works for you? Feel free to fork it and make it look similar to how you have your project setup (without sharing anything confidential) so I can see how your setup might be influencing how the e2e tests are compiling.

Magg1808 commented 1 year ago

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

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

LukasKlement commented 1 year ago

@Magg1808 ES2021 is also working fine:

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

ZachJW34 commented 1 year ago

I was not able to reproduce this on the repo I provided here. Not sure where the tsconfig.json is located in your example, so please fork that repo (or create your own) and add a reproducible example so I can debug further.

dwhieb commented 1 year ago

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.

Magg1808 commented 1 year ago

Thanks, @LukasKlement. It works for me too.

lmiller1990 commented 1 year ago

@dwhieb what version of babel/webpack are you on? The default preprocessor uses Webpack v4 I think, pretty old - if you install webpack 5, that might fix it.

dwhieb commented 1 year ago

@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.

lmiller1990 commented 1 year ago

We haven't updated webpack in a good while; I'm surprised this randomly happened.

If you can share a minimal reproduction, happy to have a look.

Not a direct fix, but if you are using esbuild, worth considering using that for your preprocessor, too (vastly faster and more ergonomic than webpack). There seems to be 2 esbuild preprocessors, not sure which is most up to date:

https://github.com/bahmutov/cypress-esbuild-preprocessor
https://github.com/bahmutov/cypress-esbuild-preprocessor <- probably most up to date

I tried using esbuild for the preprocessor, it's around 30% faster on the Cypress test suite - definitely worth a try.

dwhieb commented 1 year ago

I'll see if I can make a repro and check out the preprocessor and report back! Many thanks.

dwhieb commented 1 year ago

After further investigating, it seems my issue had something to do with updates to esbuild and cypress-esbuild-preprocessor (which I was already using in my project but forgot about). The latest versions of each are currently incompatible. After pinning older versions of these, my problem went away.

flawnn commented 1 year ago

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.

I am using Vite and I also get a similar error. How should I update to webpack?

warrensplayer commented 1 year ago

@flawnn Please provide a reproducible example of the issue you're encountering. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.

warrensplayer commented 1 year ago

@flawnn If you are still having this issue and need help, please open a new issue with a reproducible example and link to this issue.

lmiller1990 commented 1 year ago

This is finally going to be fixed in core, probably Cy 13 #27438

kbuchinskiy commented 8 months ago

@warrensplayer we are facing the same issue for Cy13:

import { formatNumber } from '@/utils/index'; // <-- does not work
import { formatNumber } from '@/utils'; // <-- does not work
import { formatNumber } from '@/utils/filtres'; // <-- works

Here is out setup:

Cypress related dependencies:

{
"@cypress/vue": "^5.0.5",
"@types/cypress-dotenv": "^2.0.0",
//...
"cypress": "^13.1.0",
"cypress-dotenv": "^2.0.0",
"cypress-log-to-output": "^1.1.2",
"cypress-wait-until": "^2.0.1",
}

tsconfig.test.json


{
"compilerOptions": {
"baseUrl": ".",
"paths": {
  "shared-types": ["types"],
  "tests": ["tests"],
  "@/*": ["src/*"]
},
"target": "es2019",
"module": "esnext",
"moduleResolution": "node",
"jsx": "preserve",
"sourceMap": true,
"inlineSources": true,
"sourceRoot": "/",
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["vite-svg-loader", "vite/client", "@types/jest", "cypress", "cypress-wait-until"],
"isolatedModules": true,
"skipLibCheck": true
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"jest.config.js"
]
}

alanschiobairesdev commented 8 months ago

Here is a reproduction example https://github.com/schirrel/cypress-typescript-webpack-error/tree/main

@warrensplayer @ZachJW34 @jennifer-shehane i am trying to work with typescript and typealias this is a brand new project created today

SimplySayHi commented 6 months ago

I have a similar issue with NextJS 13.5.4 with SWC Compiler.

This is the project tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": ".",
    "paths": {
      "@atoms": ["src/components/atoms"],
      "@atoms/*": ["src/components/atoms/*"],
      "@molecules": ["src/components/molecules"],
      "@molecules/*": ["src/components/molecules/*"],
      "@organisms": ["src/components/organisms"],
      "@organisms/*": ["src/components/organisms/*"],
      "@stores": ["src/stores"],
      "@stores/*": ["src/stores/*"],
      "@layouts/*": ["src/layouts/*"],
      "@utils/*": ["src/utils/*"],
      "@data/*": ["src/data/*"],
      "@graphql/*": ["src/graphql/*"],
      "@type": ["src/types"],
      "@type/*": ["src/types/*"],
      "@hooks/*": ["src/hooks/*"]
    },
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "strictNullChecks": false,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "codegen.ts", "src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["cypress.config.ts", "cypress", "node_modules"]
}

This is the Cypress tsconfig.json

{
  "compilerOptions": {
    "types": ["cypress", "node"],
    "baseUrl": "../../"
  },
  "extends": "../../tsconfig.json",
  "include": ["**/*.ts"]
}

And the error I get is:

Error: Webpack Compilation Error
Module parse failed: Unexpected token (77:10)
File was processed with these loaders:
 * ../../../../../Library/Caches/Cypress/13.6.4/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.
| const showToast = (props, options) => {
|     const toastId = toast(null, options);
>     toast(<Toast closable={props.closable ?? true} {...props} id={toastId}/>, { id: toastId });
|     return toastId;
| };
    at Watching.handle [as handler] (/Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at /Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:303:9
    at Hook.eval [as callAsync] (eval at create (/Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at Watching._done (/Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:299:28)
    at /Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:213:21
    at Compiler.emitRecords (/Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:919:5)
    at /Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:191:22
    at /Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (/Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:882:27
    at /Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at alreadyWritten (/Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:714:8)
    at /Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:802:19
    at /Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/node_modules/graceful-fs/graceful-fs.js:123:16
    at /Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:123:16
    at /Users/vale/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

nicitaacom commented 6 months ago

Similar issue with Next 14

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next",
      },
    ],
    "paths": {
      "@/*": ["./*"],
    },
  },
  "include": ["cypress", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"],
}

Just created random e2e test

import { getURL } from "@/app/utils/getURL"

describe("template spec", () => {
  it("passes", () => {
    cy.visit(getURL())

    cy.get("[data-testid='cypress-navbar']").should("exist")
  })
})

And I got this

Error: Webpack Compilation Error
Module not found: Error: Can't resolve '@/app/utils/getURL' in '/home/kali/Documents/GitHub/29_ai-companion/cypress/e2e'
    at Watching.handle [as handler] (/home/kali/.cache/Cypress/13.6.6/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at /home/kali/.cache/Cypress/13.6.6/Cypress/resources/app/node_modules/webpack/lib/Watching.js:303:9

In fact getURL.ts exist app/utils/getURL.ts

//This function may be user on client side and server side
export const getURL = () => {
  // if you change port - change it here as well
  let url =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3029"
      : process.env.NEXT_PRODUCTION_URL ?? process.env.NEXT_PUBLIC_SITE_URL ?? process.env.NEXT_PUBLIC_VERCEL_URL

  url = url.includes("http") ? url : `https://${url}`
  url = url.charAt(url.length - 1) === "/" ? url : `${url}/`

  return url
}

SimplySayHi commented 6 months ago

Similar issue with Next 14

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next",
      },
    ],
    "paths": {
      "@/*": ["./*"],
    },
  },
  "include": ["cypress", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"],
}

Just created random e2e test

import { getURL } from "@/app/utils/getURL"

describe("template spec", () => {
  it("passes", () => {
    cy.visit(getURL())

    cy.get("[data-testid='cypress-navbar']").should("exist")
  })
})

And I got this

Error: Webpack Compilation Error
Module not found: Error: Can't resolve '@/app/utils/getURL' in '/home/kali/Documents/GitHub/29_ai-companion/cypress/e2e'
    at Watching.handle [as handler] (/home/kali/.cache/Cypress/13.6.6/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at /home/kali/.cache/Cypress/13.6.6/Cypress/resources/app/node_modules/webpack/lib/Watching.js:303:9

In fact getURL.ts exist app/utils/getURL.ts

//This function may be user on client side and server side
export const getURL = () => {
  // if you change port - change it here as well
  let url =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3029"
      : process.env.NEXT_PRODUCTION_URL ?? process.env.NEXT_PUBLIC_SITE_URL ?? process.env.NEXT_PUBLIC_VERCEL_URL

  url = url.includes("http") ? url : `https://${url}`
  url = url.charAt(url.length - 1) === "/" ? url : `${url}/`

  return url
}

I think here you are missing baseUrl option because it seems looking for app/utils/getURL inside cypress/e2e folder. Or maybe you need a tsconfig.json file inside cypress folder as described in the documentation and add field extends that points to your project tsconfig.json

nicitaacom commented 6 months ago

I think here you are missing baseUrl option because it seems looking for app/utils/getURL inside cypress/e2e folder.

May I kindly ask you about - where should I add baseUrl - cause I think that if I add it in wrong file it will not work or just work like base url when I do cypress test cy.visit('/fundamentals') will return cy.visit('http://localhost:3000/fundamentals') but I want in development - localhost in production - production url

JonathanJeune commented 5 months ago

Hello, I have a similar issue with cypress/vue since I have upgraded cypress to 13.6.6 version :

> Error: Webpack Compilation Error
> Module not found: Error: Can't resolve '@/composables/useApi' in '/Users/xxx/Projects/nnn/src/store'
>     at Watching.handle [as handler] (/Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
>     at /Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:303:9
>     at Hook.eval [as callAsync] (eval at create (/Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
>     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
>     at Watching._done (/Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:299:28)
>     at /Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:213:21
>     at Compiler.emitRecords (/Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:919:5)
>     at /Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:191:22
>     at /Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:885:14
>     at Hook.eval [as callAsync] (eval at create (/Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
>     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
>     at /Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:882:27
>     at /Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
>     at done (/Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
>     at alreadyWritten (/Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:714:8)
>     at /Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:802:19
>     at /Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/node_modules/graceful-fs/graceful-fs.js:123:16
>     at /Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:123:16
>     at /Users/xxx/Library/Caches/Cypress/13.6.6/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:123:16
>     at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3)

jsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": ["./node_modules/cypress", "cypress/**/*.js"]
}

cypress.config.js

const { defineConfig } = require("cypress");
const dotenv = require('dotenv')
const env = dotenv.config('./.env.local').parsed

module.exports = defineConfig({
  env: {
    ...env,
  },

  e2e: {
    specPattern: "src/tests/e2e/**/*.spec.js",
  },

  component: {
    specPattern: "src/tests/components/**/*.spec.js",
    devServer: {
      framework: "vue-cli",
      bundler: "webpack"
    },
  },
});

package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve & yarn svg-sprite",
    "build": "vue-cli-service build & yarn svg-sprite",
    "watch": "vue-cli-service build --mode development --watch & yarn svg-sprite",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "svg-sprite": "svg-sprite -d --dx --dest=./public/sprite/ ./src/assets/icons/*.svg"
  },
  "pre-commit": [
    "test:unit"
  ],
  "dependencies": {
    "@ungap/structured-clone": "^1.2.0",
    "@vueuse/core": "^10.5.0",
    "axios": "^1.5.1",
    "core-js": "^3.8.3",
    "dotenv": "^16.4.5",
    "moment": "^2.29.4",
    "object.groupby": "^1.0.1",
    "pinia": "^2.1.6",
    "register-service-worker": "^1.7.2",
    "reset-css": "^5.0.2",
    "sass-mq": "^6.0.0",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vue3-rich-accordion": "^0.0.7",
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@cypress/vue": "^6.0.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "^5.0.8",
    "@vue/eslint-config-standard": "^6.1.0",
    "@vue/test-utils": "^2.0.0-0",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "cypress": "13.6.6",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "jest-mock-axios": "^4.7.3",
    "path": "^0.12.7",
    "pre-commit": "^1.2.2",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "svg-sprite": "^2.0.2"
  }
}

Component testing is working well but e2e is not. Could someone can help me please ? Thanks 🙏

AutomationTesting-01 commented 1 month ago

Error: Webpack Compilation Error
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <reference types="cypress" />
| import { When,Then } from "@badeball/cypress-cucumber-preprocessor";
| import HomePage from "../../integration/examples/pageObjects/HomePage";
    at Watching.handle [as handler] (/Users/litanbehera/Documents/CypressAutomation4/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at /Users/litanbehera/Documents/CypressAutomation4/node_modules/webpack/lib/Watching.js:312:9
    at Hook.eval [as callAsync] (eval at create (/Users/litanbehera/Documents/CypressAutomation4/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/litanbehera/Documents/CypressAutomation4/node_modules/tapable/lib/Hook.js:18:14)
    at Watching._done (/Users/litanbehera/Documents/CypressAutomation4/node_modules/webpack/lib/Watching.js:309:28)
    at /Users/litanbehera/Documents/CypressAutomation4/node_modules/webpack/lib/Watching.js:224:21
    at Compiler.emitRecords (/Users/litanbehera/Documents/CypressAutomation4/node_modules/webpack/lib/Compiler.js:1048:5)
    at /Users/litanbehera/Documents/CypressAutomation4/node_modules/webpack/lib/Watching.js:200:22
    at /Users/litanbehera/Documents/CypressAutomation4/node_modules/webpack/lib/Compiler.js:1010:14
    at Hook.eval [as callAsync] (eval at create (/Users/litanbehera/Documents/CypressAutomation4/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/litanbehera/Documents/CypressAutomation4/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/litanbehera/Documents/CypressAutomation4/node_modules/webpack/lib/Compiler.js:1007:27
    at /Users/litanbehera/Documents/CypressAutomation4/node_modules/neo-async/async.js:2818:7
    at done (/Users/litanbehera/Documents/CypressAutomation4/node_modules/neo-async/async.js:3522:9)
    at Hook.eval [as callAsync] (eval at create (/Users/litanbehera/Documents/CypressAutomation4/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/litanbehera/Documents/CypressAutomation4/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/litanbehera/Documents/CypressAutomation4/node_modules/webpack/lib/Compiler.js:834:33
    at /Users/litanbehera/Documents/CypressAutomation4/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/litanbehera/Library/Caches/Cypress/13.13.2/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/litanbehera/Library/Caches/Cypress/13.13.2/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/litanbehera/Library/Caches/Cypress/13.13.2/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:192:23)

cypress-io / cypress