[7.0.1] Component testing not working with Next.js and future.webpack5 configuration #15864

edusig · 2021-04-07T21:21:06Z

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

The text was updated successfully, but these errors were encountered:

djsilcock · 2021-04-08T06:33:24Z

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.

JessicaSachs · 2021-04-12T19:38:11Z

Updating this issue to reflect that it's specific to nextjs with the future.webpack5 flag set.

edusig · 2021-04-13T12:17:25Z

@JessicaSachs Even with the future.webpack5 set as false it still won't work. You can't try it in the repo I created to reproduce the problem.

@djsilcock Thanks for the quick reply.

cypress-bot · 2021-04-13T14:17:21Z

The code for this is done in cypress-io/cypress#15885, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

hwhitworth10 · 2021-04-13T18:04:44Z

Working through this exact same issue. Is there an estimate on when it will be released? I am pushing to have this be the tool we use to test our components, but without an ETA the team may have me utilize something else. Thanks for the quick responses!

djsilcock · 2021-04-14T06:54:44Z

It occurred to me earlier that a better approach might be instead of trying to extract the nextjs config and the monkeypatched webpack, that it might be easier to use the actual next devserver instead. Will share some code later

lmiller1990 · 2021-04-16T05:43:57Z

Anything merged into master inside of the npm directory (so npm/react) is released automatically via semantic release. So if you install the latest version of @cypress/react, you will have the latest code.

I just installed it and can confirm the code is there: yarn add @cypress/react && cat node_modules/@cypress/react/plugins/next/index.js

const findNextWebpackConfig = require('./findNextWebpackConfig')

module.exports = (on, config) => {
  on('dev-server:start', async (options) => {
    const webpackConfig = await findNextWebpackConfig(config)

    // require('webpack') now points to nextjs bundled version
    const { startDevServer } = require('@cypress/webpack-dev-server')

    return startDevServer({ options, webpackConfig })
  })

  config.env.reactDevtools = true

  return config
}

Please install it and give it a try! Let us know if there is still any problems.

edusig · 2021-04-16T13:11:09Z

@lmiller1990 I updated the packages on my example repo (https://github.com/edusig/next-and-cypress-example) to the latest and now I'm getting another error:

Error [TypeError]: Cannot read property 'version' of undefined
    at Object.<anonymous> (/home/edusig/workspace/edusig/next-and-cypress-example/node_modules/@cypress/webpack-dev-server/node_modules/html-webpack-plugin/lib/file-watcher-api.js:7:67)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at Module.require (internal/modules/cjs/loader.js:959:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/edusig/workspace/edusig/next-and-cypress-example/node_modules/@cypress/webpack-dev-server/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:41:24)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at Module.require (internal/modules/cjs/loader.js:959:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/edusig/workspace/edusig/next-and-cypress-example/node_modules/@cypress/webpack-dev-server/node_modules/html-webpack-plugin/index.js:19:36)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
TypeError: Cannot read property 'version' of undefined
    at Object.<anonymous> (/home/edusig/workspace/edusig/next-and-cypress-example/node_modules/@cypress/webpack-dev-server/node_modules/html-webpack-plugin/lib/file-watcher-api.js:7:67)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at Module.require (internal/modules/cjs/loader.js:959:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/edusig/workspace/edusig/next-and-cypress-example/node_modules/@cypress/webpack-dev-server/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:41:24)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at Module.require (internal/modules/cjs/loader.js:959:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/edusig/workspace/edusig/next-and-cypress-example/node_modules/@cypress/webpack-dev-server/node_modules/html-webpack-plugin/index.js:19:36)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)

Packages versions:
cypress: 7.1.0
@cypress/react: 5.3.3
@cypress/webpack-dev-server: 1.1.3

I also tested downgrading the @cypress/webpack-dev-server to version 1.1.2 and re-installing html-webpack-plugin and it finally opened, but it stuck loading the first component test file.

itstheandre · 2021-04-18T18:47:41Z

I tried cloning @edusig code and moving around dependencies, making webpack 4, removing flags and i still cant get it to work :(

lmiller1990 · 2021-04-20T02:40:53Z

I reproduced the problem: #16078

The stack trace comes from in html-webpack-plugin:

const webpackMajorVersion = Number(require('webpack/package.json').version.split('.')[0]);

I will dig deeper.

Edit: this problem is unique to the cypress monorepo, since we hoist the dependencies to the root node_modules. html-webpack-plugin assumes that webpack is installed in the root of the project.

lmiller1990 · 2021-04-20T05:03:34Z

Ok, I think the problem is we have html-webpack-plugin@4 as a direct dependency. It's look inside node_modules/@cypress/webpack-dev-server/node_modules... for html-webpack-plugin and the associated webpack version, which is not there. I think we need to remove this hard dependency and just have webpack and html-webpack-plugin as peer dependencies. The user will need run something like this:

yarn add cypress @cypress/webpack-dev-server html-webpack-plugin@5 webpack@5`

As well as specifying webpack5: true in their next.config.js. I am still not entirely sure how next.js works; I don't see webpack installed in node_modules when I create a new nextjs project - where is the toolchain installed? I guess it's buried somwhere deep inside node_modules/next?

This is proving more complex than expected but I'm working through it and should have something soon.

lmiller1990 · 2021-04-21T06:33:50Z

Bring your own webpack is exactly what I'm going for. Nextjs seems kind of unique in that they bundle and ship their own webpack implementation.

I made this PR: #16108

Basically users need to have either webpack@4 or webpack@5 installed (and the relevant html-webpack-plugin). Those are listed as peerDependencies, with a range of 4-5. The other main change is to remove html-webpack-plugin from dependencies, so @cypress/webpack-dev-server won't try to install and use it's own one.

The only real downside here is we require quite a lot of peerDependencies.

webpack
html-webpack-plugin
@cypress/webpack-dev-server

I don't think this really a major problem. Most templates will specify their webpack and html-webpack-plugin, which are installed to node_modules. Nextjs is the exception, with its inline webpack.

I think this solution is a little better in terms of long term maintainability. We are also working on a yarn create cypress-tests scaffolder - this would be the place to check for the existence of next.config.js and install the relevant webpack and html-webpack-plugin versions.

djsilcock · 2021-04-21T17:53:45Z

I actually meant that you could supply webpack to webpack-devserver rather than have it require webpack itself. The webpack module is exposed to the webpack method in next.config.js such that you can use something like:

let webpackModule
nextConfig={
    future:{webpack5:true},
    webpack (config,{webpack}) {
        webpackModule=webpack
        return config
        }
    }
const nextWebpackConfig = await getNextJsBaseWebpackConfig(
config.projectRoot,
{
  buildId: `@cypress/react-${Math.random().toString()}`,
  config: nextConfig,
  dev: true,
  isServer: false,
  pagesDir: config.projectRoot,
  entrypoints: {},
  rewrites: { fallback: [], afterFiles: [], beforeFiles: [] },
},
)
//now webpackModule == require('webpack')

Norfeldt · 2021-04-22T11:57:52Z

Hope I'm not side-tracking this issue - but how do you get it to work with just the webpack version that NextJS is using in your application?

I have tried the cypress/plugins/index.js file you wrote (but with .ts) and it's not really working out for me #16136

cypress-bot · 2021-04-23T03:47:08Z

The code for this is done in cypress-io/cypress#16108, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

lmiller1990 · 2021-04-23T03:50:47Z

I managed to remove the hard requirement of html-webpack-plugin v4 here. #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.

nottyo · 2021-05-02T03:28:24Z

Next.js just released the new version 10.2 https://nextjs.org/blog/next-10-2 which enables webpack5 by default. Has anyone tried this version with Cypress component testing ?

edusig · 2021-05-03T15:42:41Z

@lmiller1990 and @nottyo I have just updated my example repo (https://github.com/edusig/next-and-cypress-example) and it is working perfectly. I also updated Next.js to v10.2.0 and there was no problem running the tests.

On other projects, which have a more complex Next.js/Babel/Cypress/Yarn workspaces configuration it seems to be working perfectly as well.

Thanks again for all the help and quick resolution :)

nottyo · 2021-05-04T05:57:18Z

@edusig Thanks I also write a blog post for this https://nottyo.medium.com/component-testing-next-js-application-with-cypress-28fa311adda6

lmiller1990 · 2021-05-05T02:55:07Z

There is a PR for detailed docs with information on how to use Cypress with both next.js + webpack 4 and 5 here: cypress-io/cypress-documentation#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.

djsilcock mentioned this issue Apr 8, 2021

fix: initialise nextjs webpack before importing devserver #15881

Closed

cypress-bot bot added the stage: work in progress label Apr 8, 2021

djsilcock mentioned this issue Apr 8, 2021

fix: get next config before requiring devserver #15885

Merged

5 tasks

JessicaSachs self-assigned this Apr 12, 2021

JessicaSachs added component testing npm: @cypress/react @cypress/react package issues labels Apr 12, 2021

JessicaSachs changed the title ~~[7.0.1] Component testing not working with Next.js plugin~~ [7.0.1] Component testing not working with Next.js and future.webpack5 configuration Apr 12, 2021

cypress-bot bot added stage: pending release and removed stage: work in progress labels Apr 13, 2021

cypress-bot bot added stage: review/qa and removed stage: pending release labels Apr 15, 2021

cypress-bot bot added stage: review/qa and removed stage: done labels Apr 16, 2021

itstheandre mentioned this issue Apr 19, 2021

@cypress/react recipes document nextjs example broken link #16054

Closed

lmiller1990 mentioned this issue Apr 20, 2021

fix: nextjs and webpack5 #16078

Closed

5 tasks

lmiller1990 assigned lmiller1990 and unassigned JessicaSachs Apr 20, 2021

cypress-bot bot added stage: needs information Not enough info to reproduce the issue stage: new issues and removed stage: in progress stage: needs information Not enough info to reproduce the issue labels Apr 21, 2021

lmiller1990 mentioned this issue Apr 21, 2021

fix(webpack-dev-server): remove hard dependency on html-webpack-plugin v4 #16108

Merged

2 tasks

cypress-bot bot added stage: in progress and removed stage: work in progress labels Apr 22, 2021

lmiller1990 closed this as completed in #16108 Apr 23, 2021

cypress-bot bot added stage: pending release and removed stage: review/qa labels Apr 23, 2021

lmiller1990 reopened this Apr 23, 2021

cypress-bot bot added stage: done and removed stage: pending release labels Apr 26, 2021

lmiller1990 mentioned this issue Apr 27, 2021

Better docs for CT specific frameworks (next.js, etc) cypress-io/cypress-documentation#3882

Closed

lmiller1990 closed this as completed May 5, 2021

agg23 mentioned this issue May 7, 2021

Remove html-webpack-plugin dependency #16398

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[7.0.1] Component testing not working with Next.js and future.webpack5 configuration #15864

[7.0.1] Component testing not working with Next.js and future.webpack5 configuration #15864

edusig commented Apr 7, 2021

djsilcock commented Apr 8, 2021 •

edited

Loading

JessicaSachs commented Apr 12, 2021

edusig commented Apr 13, 2021

cypress-bot bot commented Apr 13, 2021

hwhitworth10 commented Apr 13, 2021 •

edited

Loading

djsilcock commented Apr 14, 2021

lmiller1990 commented Apr 16, 2021

edusig commented Apr 16, 2021

itstheandre commented Apr 18, 2021

lmiller1990 commented Apr 20, 2021 •

edited

Loading

lmiller1990 commented Apr 20, 2021 •

edited

Loading

lmiller1990 commented Apr 21, 2021 •

edited

Loading

djsilcock commented Apr 21, 2021

Norfeldt commented Apr 22, 2021

cypress-bot bot commented Apr 23, 2021

lmiller1990 commented Apr 23, 2021 •

edited

Loading

nottyo commented May 2, 2021

edusig commented May 3, 2021

nottyo commented May 4, 2021

lmiller1990 commented May 5, 2021

[7.0.1] Component testing not working with Next.js and future.webpack5 configuration #15864

[7.0.1] Component testing not working with Next.js and future.webpack5 configuration #15864

Comments

edusig commented Apr 7, 2021

Current behavior

Desired behavior

Test code to reproduce

Versions

More information

djsilcock commented Apr 8, 2021 • edited Loading

JessicaSachs commented Apr 12, 2021

edusig commented Apr 13, 2021

cypress-bot bot commented Apr 13, 2021

hwhitworth10 commented Apr 13, 2021 • edited Loading

djsilcock commented Apr 14, 2021

lmiller1990 commented Apr 16, 2021

edusig commented Apr 16, 2021

itstheandre commented Apr 18, 2021

lmiller1990 commented Apr 20, 2021 • edited Loading

lmiller1990 commented Apr 20, 2021 • edited Loading

lmiller1990 commented Apr 21, 2021 • edited Loading

djsilcock commented Apr 21, 2021

Norfeldt commented Apr 22, 2021

cypress-bot bot commented Apr 23, 2021

lmiller1990 commented Apr 23, 2021 • edited Loading

nottyo commented May 2, 2021

edusig commented May 3, 2021

nottyo commented May 4, 2021

lmiller1990 commented May 5, 2021

djsilcock commented Apr 8, 2021 •

edited

Loading

hwhitworth10 commented Apr 13, 2021 •

edited

Loading

lmiller1990 commented Apr 20, 2021 •

edited

Loading

lmiller1990 commented Apr 20, 2021 •

edited

Loading

lmiller1990 commented Apr 21, 2021 •

edited

Loading

lmiller1990 commented Apr 23, 2021 •

edited

Loading