fix: map framework name to dependency that contains webpack

[ZachJW34]

User facing changelog

na

Additional details

When sourcing Webpack dependencies for @cypress/webpack-dev-server, we use the provided framework as the require.resolve searchRoot if provided. We need to map the provided framework to the corresponding dependency for this to make sense i.e. create-react-app -> react-scripts. This was working due to the recursive nature of require.resolve and our fallback to search projectRoot is we can't find the framework, but we want to start the search at the package that might contain webpack in case there are hoisting conflicts.

Steps to test

All system tests for @cypress/webpack-dev-server are green, and I've added some unit tests to the handlers to confirm the new behavior.

How has the user experience changed?

na, this should fix any bugs some users might have had if webpack wasn't hoisted to the root of their project's node_modules

PR Tasks

• Have tests been added/updated?
• Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?

[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.

[lmiller1990]

Nice catch. Any potential edge case/complexity when Nuxt 3 comes with webpack + vite? Just add an additional conditional?

[mike-plummer]

We could define this as type FrameworkWebpackMapper = { [Property in typeof ALL_FRAMEWORKS[number]]?: string } so the undefined entries aren't necessary for react & vue.

That said, I suppose it might be desired to have a dev actually look and think about this logic when we add new frameworks, so having the TS compiler complain if they don't explicitly add an entry for it might be good?

[ZachJW34]

That's what I was going for it. Whenever a new framework is added, this will enforce that whoever is adding the new framework considers how to properly link the framework name to the package that contains the relevant deps.

[ZachJW34]

@lmiller1990 I set up a Nuxt3 app with npx nuxi init nuxt-app. Not sure that will be the defacto way to create nuxt apps once Nuxt is stable but it got me going. As it stands, Nuxt uses vite by default and requires you to set:

export default defineNuxtConfig({
  builder: "webpack",
});

to use Webpack. This won't work out of the box, as it requires you to install @nuxt/webpack-builder. We would have to key off of this dependency in order to source it properly. Either a conditional or a more advanced flow for sourcing would be required, but that's a problem for a later date.

[ZachJW34]

While working through the snapshots, I realized our system tests weren't testing what we wanted them to. All of the dependencies (webpack, dev-server etc..) were being sourced from the root of the repo rather than the tmp project. This PR corrects that behavior, here is a before and after of the sources

Before
--------------------------------------------------------------------------------
{
  source: {
    framework: {
      importPath: '/Users/zachjw/work/cypress/system-tests/node_modules/react',
      packageJson: [Object]
    },
    webpack: {
      importPath: '/Users/zachjw/work/cypress/node_modules/webpack',
      packageJson: [Object],
      module: [Function],
      majorVersion: 4
    },
    webpackDevServer: {
      importPath: '/Users/zachjw/work/cypress/npm/webpack-dev-server/node_modules/webpack-dev-server',
      packageJson: [Object],
      module: [class Server],
      majorVersion: 4
    },
    htmlWebpackPlugin: {
      packageJson: [Object],
      majorVersion: 4,
      importPath: '/Users/zachjw/work/cypress/node_modules/html-webpack-plugin',
      module: [Function]
    }
  }
}

{
  source: {
    framework: {
      importPath: '/Users/zachjw/work/cypress/system-tests/node_modules/react',
      packageJson: [Object]
    },
    webpack: {
      importPath: '/Users/zachjw/work/cypress/node_modules/webpack',
      packageJson: [Object],
      module: [Function],
      majorVersion: 4
    },
    webpackDevServer: {
      importPath: '/Users/zachjw/work/cypress/npm/webpack-dev-server/node_modules/webpack-dev-server',
      packageJson: [Object],
      module: [class Server],
      majorVersion: 4
    },
    htmlWebpackPlugin: {
      packageJson: [Object],
      majorVersion: 4,
      importPath: '/Users/zachjw/work/cypress/node_modules/html-webpack-plugin',
      module: [Function]
    }
  }
}

{
  source: {
    framework: {
      importPath: '/Users/zachjw/work/cypress/system-tests/node_modules/react',
      packageJson: [Object]
    },
    webpack: {
      importPath: '/Users/zachjw/work/cypress/node_modules/webpack',
      packageJson: [Object],
      module: [Function],
      majorVersion: 4
    },
    webpackDevServer: {
      importPath: '/Users/zachjw/work/cypress/npm/webpack-dev-server/node_modules/webpack-dev-server',
      packageJson: [Object],
      module: [class Server],
      majorVersion: 4
    },
    htmlWebpackPlugin: {
      packageJson: [Object],
      majorVersion: 4,
      importPath: '/Users/zachjw/work/cypress/node_modules/html-webpack-plugin',
      module: [Function]
    }
  }
}

{
  source: {
    framework: {
      importPath: '/Users/zachjw/work/cypress/system-tests/node_modules/react',
      packageJson: [Object]
    },
    webpack: {
      importPath: '/Users/zachjw/work/cypress/node_modules/webpack',
      packageJson: [Object],
      module: [Function],
      majorVersion: 4
    },
    webpackDevServer: {
      importPath: '/Users/zachjw/work/cypress/npm/webpack-dev-server/node_modules/webpack-dev-server',
      packageJson: [Object],
      module: [class Server],
      majorVersion: 4
    },
    htmlWebpackPlugin: {
      packageJson: [Object],
      majorVersion: 4,
      importPath: '/Users/zachjw/work/cypress/node_modules/html-webpack-plugin',
      module: [Function]
    }
  }
}
--------------------------------------------------------------------

After:
--------------------------------------------------------------------
{
  source: {
    framework: null,
    webpack: {
      importPath: '/private/tmp/cy-system-tests-node-modules/webpack4_wds3-react/node_modules/webpack',
      packageJson: [Object],
      module: [Function],
      majorVersion: 4
    },
    webpackDevServer: {
      importPath: '/private/tmp/cy-system-tests-node-modules/webpack4_wds3-react/node_modules/webpack-dev-server',
      packageJson: [Object],
      module: [Function],
      majorVersion: 3
    },
    htmlWebpackPlugin: {
      importPath: '/Users/zachjw/work/cypress/npm/webpack-dev-server/node_modules/html-webpack-plugin-4',
      packageJson: [Object],
      module: [Function],
      majorVersion: 4
    }
  }
}

{
  source: {
    framework: null,
    webpack: {
      importPath: '/private/tmp/cy-system-tests-node-modules/webpack4_wds4-react/node_modules/webpack',
      packageJson: [Object],
      module: [Function],
      majorVersion: 4
    },
    webpackDevServer: {
      importPath: '/private/tmp/cy-system-tests-node-modules/webpack4_wds4-react/node_modules/webpack-dev-server',
      packageJson: [Object],
      module: [class Server],
      majorVersion: 4
    },
    htmlWebpackPlugin: {
      importPath: '/Users/zachjw/work/cypress/npm/webpack-dev-server/node_modules/html-webpack-plugin-4',
      packageJson: [Object],
      module: [Function],
      majorVersion: 4
    }
  }
}

{
  source: {
    framework: null,
    webpack: {
      importPath: '/private/tmp/cy-system-tests-node-modules/webpack5_wds3-react/node_modules/webpack',
      packageJson: [Object],
      module: [Function],
      majorVersion: 5
    },
    webpackDevServer: {
      importPath: '/private/tmp/cy-system-tests-node-modules/webpack5_wds3-react/node_modules/webpack-dev-server',
      packageJson: [Object],
      module: [Function],
      majorVersion: 3
    },
    htmlWebpackPlugin: {
      importPath: '/Users/zachjw/work/cypress/npm/webpack-dev-server/node_modules/html-webpack-plugin-5',
      packageJson: [Object],
      module: [Function],
      majorVersion: 5
    }
  }
}

{
  source: {
    framework: null,
    webpack: {
      importPath: '/private/tmp/cy-system-tests-node-modules/webpack5_wds4-react/node_modules/webpack',
      packageJson: [Object],
      module: [Function],
      majorVersion: 5
    },
    webpackDevServer: {
      importPath: '/private/tmp/cy-system-tests-node-modules/webpack5_wds4-react/node_modules/webpack-dev-server',
      packageJson: [Object],
      module: [class Server],
      majorVersion: 4
    },
    htmlWebpackPlugin: {
      importPath: '/Users/zachjw/work/cypress/npm/webpack-dev-server/node_modules/html-webpack-plugin-5',
      packageJson: [Object],
      module: [Function],
      majorVersion: 5
    }
  }
}

I also tweaked the webpack stdout replacers to remove dynamic data, such as port numbers and timings

[cypress]

---

Test summary

4375 • 0 • 51 • 0 • 0

---

Run details

Project	cypress
Status	Passed
Commit	c7115d6
Started	Jul 15, 2022 7:06 PM
Ended	Jul 15, 2022 7:18 PM
Duration	11:35 💡
OS	Linux Debian - 10.11
Browser	Firefox 98

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[lmiller1990]

@ZachJW34 good catch on the webpack + system tests problem. I had the EXACT same thing in the React 18 mega PR, it was very frustrating, I'm glad we are improving this.

✅

Agreed, let's deal with Nuxt separately, but it is coming soon, so we should figure out what to do.