Cypress-webpack preprocesor, alias doesnt work

Question

I use a vue-cli- without vue-cli-cypress (some problems with enviroments variables). Everywhere in the code, we use '@' to import some components and etc.

So I added cypress-pre-procesor. Like this:

const webpackPreprocessor = require('@cypress/webpack-preprocessor')
const path = require('path')
console.log(`${path.resolve()}/src`)

module.exports = (on) => {
  const options = {
    resolve: {
      alias : {
        "^@/(.*)$" : path.resolve('/src'),
      }
    }
  }
  on('file:preprocessor', webpackPreprocessor(options))
}

Then the console displayed a error message like this.

Error: Webpack Compilation Error
./tests/e2e/intergration/components/navigation/sidebar.js
Module not found: Error: Can't resolve '@locales/en.json' in 'D:\git\icecube\iceretail\icecube\assets\v2\tests\e2e\intergration\components\navigation'
resolve '@locales/en.json' in 'D:\git\icecube\iceretail\icecube\assets\v2\tests\e2e\intergration\components\navigation'
  Parsed request is a module
  using description file: D:\git\icecube\iceretail\icecube\assets\v2\package.json (relative path: ./tests/e2e/intergration/components/navigation)
    Field 'browser' doesn't contain a valid alias configuration
    Looked for and couldn't find the file at the following paths:
[D:\git\icecube\iceretail\icecube\assets\v2\tests\e2e\intergration\components\navigation\node_modules]
[D:\git\icecube\iceretail\icecube\assets\v2\tests\e2e\intergration\components\node_modules]
[D:\git\icecube\iceretail\icecube\assets\v2\tests\e2e\intergration\node_modules]
[D:\git\icecube\iceretail\icecube\assets\v2\tests\e2e\node_modules]
[D:\git\icecube\iceretail\icecube\assets\v2\tests\node_modules]
[D:\git\icecube\iceretail\icecube\assets\node_modules]
[D:\git\icecube\iceretail\icecube\node_modules]
[D:\git\icecube\iceretail\node_modules]
[D:\git\icecube\node_modules]
[D:\git\node_modules]
[D:\node_modules]
[D:\git\icecube\iceretail\icecube\assets\v2\node_modules\@locales\en.json]
[D:\git\icecube\iceretail\icecube\assets\v2\node_modules\@locales\en.json.wasm]
[D:\git\icecube\iceretail\icecube\assets\v2\node_modules\@locales\en.json.mjs]
[D:\git\icecube\iceretail\icecube\assets\v2\node_modules\@locales\en.json.js]
[D:\git\icecube\iceretail\icecube\assets\v2\node_modules\@locales\en.json.json]
 @ ./tests/e2e/intergration/components/navigation/sidebar.js 2:0-49 63:17-34 64:62-79

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

Why It checked node_modules? How to fix it?

Answer 1

Ok I found a solution.

First you have to add a plugin to reconfigure browserify(it something like a simple webpack-loader) and enable to load your babel-config not in browserify.

const browserify = require('@cypress/browserify-preprocessor')

module.exports = (on, config) => {
  const browserifyOptions = browserify.defaultOptions
  browserifyOptions.browserifyOptions.transform[1][1].babelrc = true
  on('file:preprocessor', browserify(browserifyOptions))
}

Then load a plugin resolvePlugin to your babel config and set aliases.

const resolvePlugin = [
  ["module-resolver", {
    "alias": {
      "@": "./src",
      "@datasets": "./tests/e2e/datasets/helpers"
    }
  }]
]

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/transform-runtime', ...resolvePlugin]
}