Absolute imports does not resolve with NODE_PATH in 5+

Current behavior:

When starting Cypress with

NODE_PATH=ui/src cypress open

it is unable to resolve absolute imports

Webpack Compilation Error
./cypress/integration/cart/utils.js
Module not found: Error: Can't resolve 'ducks/cart' in '/home/pong/e2e/cypress/integration/cart'
...

My code is

import { cartOperations } from "ducks/cart";
...

Desired behavior:

Imports resolve correctly. This worked in 4.12.1.

Test code to reproduce

Will create a minimal working example if needed and deemed to be an issue.

Versions

Cypress 5.1.0 Node 14.5.0 OS: Ubuntu

[jennifer-shehane]

NODE_PATH is not supported in webpack by default as it was in browserify. Webpack’s reasoning is that use of NODE_PATH is discouraged: https://github.com/webpack/webpack/issues/4479

NODE_PATH is still supported, but is less necessary now that the Node.js ecosystem has settled on a convention for locating dependent modules. Sometimes deployments that rely on NODE_PATH show surprising behavior when people are unaware that NODE_PATH must be set. Sometimes a module’s dependencies change, causing a different version (or even a different module) to be loaded as the NODE_PATH is searched.

It is strongly encouraged to place dependencies in the local node_modules folder. These will be loaded faster, and more reliably.

See the workaround below for this.

Reproducible example

NODE_PATH=ui/src cypress open

cypress/integration/spec.js

import {icecone} from "duck";

it('works', () => {
  icecone();
})

ui/src/duck/index.js

export const icecone = () => console.log("I take two");

4.12.1

6.1.0

Resolution / Workaround

Extend you webpack.config options resolve.modules to look for the NODE_PATH:

webpack.config.js

const cwd = process.cwd();
const path = require('path');

const nodePath = process.env.NODE_PATH || 'src';

module.exports = {
  resolve: {
    modules: ['node_modules', path.resolve(cwd, nodePath)],
  }
}

cypress/plugins/index.js

Pass in the webpack options to cypress. This requires use of @cypress/webpack-preprocessor: https://github.com/cypress-io/cypress/tree/master/npm/webpack-preprocessor#options

npm install --save-dev @cypress/webpack-preprocessor @babel/core @babel/preset-env babel-loader webpack

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

module.exports = (on) => {
  const options = {
    webpackOptions: require('../../webpack.config'),
    watchOptions: {},
  }

  on('file:preprocessor', webpackPreprocessor(options))
}

[Nenry]

Wanted to leave a comment for anyone that might run into this. I also ran into this issue while using jsconfig as recommended by create-react-app. (https://create-react-app.dev/docs/importing-a-component/). This error doesn’t occur in Cypress V4, but is present in V5 and V6.

This is the working fix for me since I was using create-react-app.

• No need to create the webpack.config

• Also note for some reason cypress does not like this type of import style after you use this workaround (I think it has to do something with findWebpack.cleanForCypress: export { default as SomeCommands } from "./SomeCommands"

• Just change it to regular import SomeCommands from "./SomeCommands"

The workaround for create-react-app/react-scripts Copy and paste from https://github.com/cypress-io/cypress/blob/master/npm/webpack-preprocessor/examples/react-app/cypress/plugins/index.js, but changed const webpackPreprocessor = require("@cypress/webpack-preprocessor")

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


module.exports = (on) => {
  const webpackOptions = findWebpack.getWebpackOptions();

  if (!webpackOptions) {
    throw new Error("Could not find Webpack in this project 😢");
  }

  const cleanOptions = {
    reactScripts: true
  };

  findWebpack.cleanForCypress(cleanOptions, webpackOptions);

  const options = {
    webpackOptions,
    watchOptions: {}
  };

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