Absolute imports does not resolve with NODE_PATH in 5+ #8481
Comments
|
I am having similar issue, I have a this folder structure: root webpack.config ts-config I've tried really many options but result is always, pretty much this
Could you please share a working configuration for using path aliases on the latest Cypress with built in support for TS? resources like this are outdated: https://glebbahmutov.com/blog/using-ts-aliases-in-cypress-tests/ |
|
Can you please prepare a repo with reproducible example? We have switched from browserify to webpack for bundling in v5, thus some of the resolution logic might have changed. |
|
Here is an example where is resolves correctly in 4.12.1 but not in 5.1.0. |
|
Having the same issue. |
|
Any update on this? Anyone have a workaround? I'm currently holding off on updating because I've got a large codebase which uses absolute imports and I'd prefer not to have to refactor the entire thing to get cypress tests to run. |
|
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: webpack/webpack#4479
See the workaround below for this. Reproducible example
import {icecone} from "duck";
it('works', () => {
icecone();
})
export const icecone = () => console.log("I take two");4.12.1
6.1.0
Resolution / WorkaroundExtend you
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)],
}
}
Pass in the webpack options to cypress. This requires use of const webpackPreprocessor = require('@cypress/webpack-preprocessor')
module.exports = (on) => {
const options = {
webpackOptions: require('../../webpack.config'),
watchOptions: {},
}
on('file:preprocessor', webpackPreprocessor(options))
} |
jennifer-shehane
changed the title
jennifer-shehane
added
the
stage: wontfix
|
Thank you Jennifer, I shall look into those options. |
|
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 is the working fix for me since I was using create-react-app.
The workaround for create-react-app/react-scripts 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));
}; |
|
Thanks for sharing @Nenry that worked very nicely for me. Up and running using create-react-app with absolute imports. |
|
Many thaks @jennifer-shehane for your help. Any clues ? |
|
@jmcollin78 I didn't run into this error when rerunning my example workaround above. Can you open a new issue with a reproducible example? It's likely something extra in your example that I don't have. Thanks! |
Current behavior:
When starting Cypress with
it is unable to resolve absolute imports
My code is
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
The text was updated successfully, but these errors were encountered: