Webpack error during vuejs with cypress for e2e test

I am sorry for my bad English skill. I try to write e2e test for vuejs. I am using cypress for that. But there is a problem. This problem is a webpack error. The error occurs after import a thirdy package.

My cypress test:

      import { faker } from '@faker-js/faker';

      const username = faker.internet.userName();
      const password = faker.internet.password();
      it('form elements should be correct', () => {
        cy.get(userLoginElement.username).type(username).should('have.value', username);
        cy.get(userLoginElement.password).type(password).should('have.value', password);
        cy.get(userLoginElement.loginButton).should('exist');
      });

My cypress.json file:

{
  "pluginsFile": "tests/e2e/plugins/index.js",
  "baseUrl": "http://127.0.0.1:8080"
}

My plugin file of cypress

 module.exports = (on, config) => {
  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js'
  })
}

My versions of the packages:

"faker": "^6.6.6",
 "@vue/cli-plugin-e2e-cypress": "~5.0.0",
 "@vue/cli-plugin-unit-jest": "~5.0.0",
"cypress": "^8.3.0",

Throw below error after running vue-cli-service test:e2e

Error: Webpack Compilation Error
./node_modules/@faker-js/faker/dist/esm/chunk-4J2PVEV7.mjs 1:1430
Module parse failed: Unexpected token (1:1430)
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

May it be the version that reasons of the error ?

Edit:

There is a thread opened for this problem. Here

It looks like the latest version of faker-js will not work with Cypress.

Notice the Cypress documentation here shows an old way of importing the faker library:

import faker from "faker" // NOTE - no longer valid for recent versions of faker-js

The latest version of @faker-js/faker is @7.2.0, if you down-grade to @6.3.0 the spec will work.

npm remove @faker-js/faker 
npm install @faker-js/faker@6.3.0 --save-dev

or with yarn

yarn remove @faker-js/faker 
yarn add @faker-js/faker@6.3.0 -D

Test

import { faker } from '@faker-js/faker';     // import is ok with version @6.3.0

---

Plugin to resolve for @faker-js/faker@7.2.0 (Cypress v9 cconfig)

This addition for cypress/plugins/index.js will allow the latest version of faker to work.

const webpackPreprocessor = require("@cypress/webpack-preprocessor");

module.exports = (on) => {
  const options = webpackPreprocessor.defaultOptions;
  options.webpackOptions.module.rules[0].exclude = {
    and: [/node_modules/],
    not: [/@faker-js/],
  };
  options.webpackOptions.resolve = {
    alias: {
      "@faker-js/faker": require.resolve("@faker-js/faker"),
    },
  };

  on("file:preprocessor", webpackPreprocessor(options));

  // original content

  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js'
  })
}

---

Update for Cypress version 10+ configuration

Note the Cypress docs around webpack-preprocessor still have the old configuration.

import { defineConfig } from 'cypress'
const webpackPreprocessor = require("@cypress/webpack-preprocessor");

const options = webpackPreprocessor.defaultOptions;
options.webpackOptions.module.rules[0].exclude = {
  and: [/node_modules/],
  not: [/@faker-js/],
};
options.webpackOptions.resolve = {
  alias: {
    "@faker-js/faker": require.resolve("@faker-js/faker"),
  },
};

export default defineConfig({

  e2e: {
    setupNodeEvents(on, config) {
      on("file:preprocessor", webpackPreprocessor(options));
    },
  },
})