cypress: [7.0.1] Component testing not working with Next.js and future.webpack5 configuration
Current behavior
Cypress open-ct and run-ct both get stuck while using:
Nextjs: 10.1.3
React: 17.0.2
Cypress: 7.0.1
Webpack: 5.30.0
my next.config.js file:
module.exports = {
future: {
webpack5: true,
},
};
cypress/plugins/index.js file:
module.exports = (on, config) => {
require("@cypress/react/plugins/next")(on, config);
return config;
};
Desired behavior
It should run normally
Test code to reproduce
I have forked this repo and updated the packages and configurations here -> https://github.com/edusig/next-and-cypress-example
Versions
Cypress: 7.0.1 Last working Cypress version: 6.5.0 OS: Manjaro Linux
More information
- The integration tests are working properly.
- I have read and followed this cypress blog post and the documentation migration guide
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 24 (16 by maintainers)
There is a PR for detailed docs with information on how to use Cypress with both next.js + webpack 4 and 5 here: https://github.com/cypress-io/cypress-documentation/pull/3883
Incredibly good blog post @nottyo!
Seems this is working fine now - I’m sure we will find some edge cases for more complex configurations, if so, please open a discussion.
I managed to remove the hard requirement of html-webpack-plugin v4 here. https://github.com/cypress-io/cypress/pull/16108
This should fix the problem - all you’ll need to do now is install webpack 5 and html-webpack-plugin 5 and it should work. This should minimize the framework specific concerns from leaking too deeply into Cypress.
The above code will go out in the next release. Thanks everyone so far - it’s entirely possible that some edge cases are not covered still (nextjs ecosystem is huge), but keep the bug reports coming 👍
I started to use nextjs a little from this - it’s really neat, and the DX experience is great! Let’s keep this issue open until the code is in the wild and confirmed to be working as expected.
Holy crap nice job figuring out how this all works! I’ll definitely reference this as I work through the issue. I think I am pretty close to getting this to “just work”. The only downside is we’ll need to ask the user to install a specific webpack version based on their next version - so we are kind of “doubling up” on the webpack installation (one bundled, one not).
I think if we can keep everything as non-framework-specific as possible it will pay itself off down the track, but good to know there is an alternative if things get too messy and maintenance might become difficult. I think the adapters should be as thin and simple as possible
I’ll keep everyone updated in this issue with my findings.
Ok, I think the problem is we have
html-webpack-plugin@4as a direct dependency. It’s look insidenode_modules/@cypress/webpack-dev-server/node_modules...forhtml-webpack-pluginand the associatedwebpackversion, which is not there. I think we need to remove this hard dependency and just havewebpackandhtml-webpack-pluginas peer dependencies. The user will need run something like this:As well as specifying
webpack5: truein theirnext.config.js. I am still not entirely sure how next.js works; I don’t seewebpackinstalled innode_moduleswhen I create a new nextjs project - where is the toolchain installed? I guess it’s buried somwhere deep insidenode_modules/next?This is proving more complex than expected but I’m working through it and should have something soon.
I had this same issue - initially fails as can’t find webpack. If webpack is added as dependency then it fails as you describe but with debugging on shows a ‘compilation must be an instance of Compilation’ error. Essentially the problem is that next bundles its own version of webpack so there are two versions in play at once. However it adds a require hook so it is possible to use the next vendored webpack as long as the next config is run before the webpack devserver is set up. Will put in a PR to fix later when I get to my PC.