fix: get next config before requiring devserver

[djsilcock]

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

User facing changelog

Uses nextjs instance of webpack for webpack devserver

Additional details

NextJs uses its own bundled version of webpack instead of having it as a [peer] dependency, and adds a require hook such that calls to require('webpack') resolve to this bundled version. This moves the require('@cypress/webpack-dev-server') to after the next webpack hook has been set up, so the webpack setup proceeds as planned.
Note that projects should not require to list webpack as a dependency for this plugin to work

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• Has the original issue or this PR been tagged with a release in ZenHub?
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?
• Have new configuration options been added to the cypress.schema.json?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[CLAassistant]

All committers have signed the CLA.

[adambrgmn]

Thanks for this, this takes at least me much closer to the goal! I just want to point out though that it still seems to be issues when setting future.webpack5 = true in next.config.js.

With these changes a project with next@10.1.2 and future.webpack5 = false (and deps webpack@4 and html-webpack-plugin@4) starts fine.

But if I change to future.webpack5 = true and upgrade webpack and html-webpack-plugin to v5 it fails.

It starts Cypress properly. But I get an infinite loading indicator and in the console I see these two errors:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:58724/[my_absolute_folder_path]/node_modules/_cypress/webpack-dev-server/dist/browser.js

Uncaught (in promise) Error: Problem communicating active modules to the server: undefined undefined:undefined:undefined undefined
    at eval (webpack-internal:///./node_modules/next/dist/compiled/webpack/lazy-compilation-web.js?http%3A%2F%2Flocalhost%3A58723%2Flazy-compilation-using-:35)
    at Set.forEach (<anonymous>)
    at EventSource.activeEventSource.onerror (webpack-internal:///./node_modules/next/dist/compiled/webpack/lazy-compilation-web.js?http%3A%2F%2Flocalhost%3A58723%2Flazy-compilation-using-:33)

As mentioned it might be unrelated but just wanted to point it out.

For reference here's my test file:

import { mount } from '@cypress/react';
import { useState } from 'react';

const Button: React.FC<any> = (props) => <button {...props} />;

const TestComponent = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Button onClick={() => setCount(count - 1)}>-</Button>
      <output>{count}</output>
      <Button onClick={() => setCount(count + 1)}>+</Button>
    </div>
  );
};

it('invokes onClick handlers', () => {
  mount(<TestComponent />);
  cy.findByRole('status').should('have.text', '0');

  cy.findByRole('button', { name: '+' }).click();
  cy.findByRole('status').should('have.text', '1');

  cy.findByRole('button', { name: '-' }).click();
  cy.findByRole('status').should('have.text', '0');
});

[JessicaSachs]

The lazy compilation issue should be fixed soon. As should the requirement to install html-webpack-plugin. We had to fork/import lazy-compile-webpack-plugin because it wasn't being maintained... however... that plugin should only be valid if you're using webpack 4. Webpack 5 has lazy compilation built in under a feature flag here

Can you send me an example repository @adambrgmn and I can test this PR against the latest versions of each? We're also putting together some system tests so make sure we test against a matrix of project configurations. That will help ensure we don't regress with these build setups.

[JessicaSachs]

Yeah our nextjs configuration is not working because, like you saw @adambrgmn, our browser.js entrypoint isn't being hosted by next. I'm not sure why browser.js isn't being hosted... we mark it as an entry here.

I'm going to merge this PR in @djsilcock because it doesn't regress.