Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Upgrade Webpack to v5 for @nrwl/cypress

See original GitHub issue

Description

Right now @nrwl/cypress using Webpack v4. But Angular is using Webpack v5. Can we upgrade to v5 for this project? There are the required libraries: https://github.com/tieppt/nx-micro-frontends/blob/62a0c5ab20489fc0d7bd50710fc6ae097418f137/package-lock.json#L2822-L2840

Motivation

Consistent with other libraries. And @cypress/webpack-preprocessor v5.9.1 also supported Webpack v5

https://github.com/cypress-io/cypress/blob/master/npm/webpack-preprocessor/CHANGELOG.md#cypresswebpack-preprocessor-v591-2021-06-24

Suggested Implementation

Upgrade @cypress/webpack-preprocessor to v5.9.1 and webpack to v5

Alternate Implementations

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:8 (4 by maintainers)

Top GitHub Comments

2reactions

tiepptcommented, Aug 28, 2021

Thanks, @FrozenPandaz! @tyler-morrison yes I have. But nx/cypress using @cypress/webpack-preprocessor v4.1.5, not v5, so this lib is not happy with Webpack 5. And nx/cypress required Webpack v4 also. So I need to explicitly install Webpack v5.

"@nrwl/cypress": {
      "version": "12.7.1",
      "resolved": "https://registry.npmjs.org/@nrwl/cypress/-/cypress-12.7.1.tgz",
      "integrity": "sha512-xr8CKrmg0UashIT1WgFygKzz1uj6CbL3CPh+FDzrau0mZwT5QtBMiOh+00B7ox26RhO+w9pH6obCJGOJuamuiQ==",
      "requires": {
        "@cypress/webpack-preprocessor": "4.1.5",
        "@nrwl/devkit": "12.7.1",
        "@nrwl/linter": "12.7.1",
        "@nrwl/workspace": "12.7.1",
        "chalk": "4.1.0",
        "fork-ts-checker-webpack-plugin": "6.2.10",
        "rxjs": "^6.5.4",
        "ts-loader": "5.4.5",
        "tsconfig-paths-webpack-plugin": "3.4.1",
        "tslib": "^2.0.0",
        "webpack": "4.46.0",
        "webpack-node-externals": "1.7.2",
        "yargs-parser": "20.0.0"
      },

1reaction

tyler-morrisoncommented, Aug 28, 2021

But nx/cypress using @cypress/webpack-preprocessor v4.1.5, not v5, so this lib is not happy with Webpack 5. And nx/cypress required Webpack v4 also. So I need to explicitly install Webpack v5

Ah! I follow you now. Yes, I do believe we need to update this dependency. @FrozenPandaz would you mind re-opening this issue? I’d be happy to create a quick PR.

@tieppt in the meantime, I believe you can force Webpack v5 via the resolutions object in your root package.json. Yarn or NPM might throw a warning, but it should be a suitable workaround.

Top Results From Across the Web

Webpack 5 Migration - Nx

This page is for Nx 13 migration to Webpack 5, and is no longer ... We highly suggest you upgrade as soon as...

Migration Guide | Cypress Documentation

Migrating to Cypress 12.0 This guide details the changes and how to change your code to migrate to Cypress version 12.0.

To v5 from v4 - webpack

Upgrade webpack 4 and its plugins/loaders · Upgrade webpack 4 to the latest available version. · Upgrade webpack-cli to the latest available version...

Core Performance Improvements, Webpack 5, React Native ...

To opt-in to using the new daemon process, after upgrading to Nx 13, set the following environment variable to enable it. NX_DAEMON=true. Read ......

Cypress Component Testing does not use the ...

Is there another method I could add my yaml-loader to the webpack config? Thanks in advance. angular · webpack · cypress · nrwl-nx....