Cypress Component Testing not working properly / webpack build fails

[Nasicus]

So after "some" research I managed to get nx together with Cypress component testing work.

This commit pretty much summarizes what I did to make it work (the template here was just a vanilla nx react webpack app).

However after that I tried to do the same in our real application (which is a "little" more complex), everything fails horribly 😄 .

I tried to make a minimal reproducible example with just one of the errors, because there are multiple, but I have hopes that if I solve one, the others will go away too.

As you can see in the commit above in the app.spec.tsx I describe, that this import line breaks it:

// using the following import will break the build
//import styled from 'styled-components/macro'
// with this import it works
import styled from 'styled-components'

I personally suspect it has something to do with the way cypress builds / serves the app. Something with babel seems to be missing. I'm not at all sure if this is my fault (maybe something in here?) or if there is a bug in nx or cypress.

Any help would be appreciated.

---

It basically will go from this:

To this.

Compiled with problems:X

WARNING in ../../node_modules/babel-plugin-macros/dist/index.js 78:24-31

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ../../node_modules/import-fresh/index.js 32:31-48

Critical dependency: the request of a dependency is an expression

ERROR in ../../node_modules/@babel/helper-module-imports/lib/import-builder.js 8:14-31

Module not found: Error: Can't resolve 'assert' in 'C:\git\gogi\node_modules\@babel\helper-module-imports\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
    - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "assert": false }

ERROR in ../../node_modules/@babel/helper-module-imports/lib/import-injector.js 8:14-31

Module not found: Error: Can't resolve 'assert' in 'C:\git\gogi\node_modules\@babel\helper-module-imports\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
    - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "assert": false }

ERROR in ../../node_modules/babel-plugin-macros/dist/index.js 9:10-25

Module not found: Error: Can't resolve 'path' in 'C:\git\gogi\node_modules\babel-plugin-macros\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ../../node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/Explorer.js 8:35-50

Module not found: Error: Can't resolve 'path' in 'C:\git\gogi\node_modules\babel-plugin-macros\node_modules\cosmiconfig\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ../../node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/ExplorerBase.js 9:35-50

Module not found: Error: Can't resolve 'path' in 'C:\git\gogi\node_modules\babel-plugin-macros\node_modules\cosmiconfig\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ../../node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/ExplorerSync.js 8:35-50

Module not found: Error: Can't resolve 'path' in 'C:\git\gogi\node_modules\babel-plugin-macros\node_modules\cosmiconfig\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ../../node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/getDirectory.js 9:35-50

Module not found: Error: Can't resolve 'path' in 'C:\git\gogi\node_modules\babel-plugin-macros\node_modules\cosmiconfig\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ../../node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js 10:33-46

Module not found: Error: Can't resolve 'os' in 'C:\git\gogi\node_modules\babel-plugin-macros\node_modules\cosmiconfig\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }

ERROR in ../../node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/readFile.js 9:33-46

Module not found: Error: Can't resolve 'fs' in 'C:\git\gogi\node_modules\babel-plugin-macros\node_modules\cosmiconfig\dist'

ERROR in ../../node_modules/error-ex/index.js 3:11-26

Module not found: Error: Can't resolve 'util' in 'C:\git\gogi\node_modules\error-ex'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
    - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "util": false }

ERROR in ../../node_modules/import-fresh/index.js 2:13-28

Module not found: Error: Can't resolve 'path' in 'C:\git\gogi\node_modules\import-fresh'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ../../node_modules/import-fresh/node_modules/resolve-from/index.js 2:13-28

Module not found: Error: Can't resolve 'path' in 'C:\git\gogi\node_modules\import-fresh\node_modules\resolve-from'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ../../node_modules/import-fresh/node_modules/resolve-from/index.js 3:15-32

Module not found: Error: Can't resolve 'module' in 'C:\git\gogi\node_modules\import-fresh\node_modules\resolve-from'

ERROR in ../../node_modules/import-fresh/node_modules/resolve-from/index.js 4:11-24

Module not found: Error: Can't resolve 'fs' in 'C:\git\gogi\node_modules\import-fresh\node_modules\resolve-from'

ERROR in ../../node_modules/path-type/index.js 2:20-35

Module not found: Error: Can't resolve 'util' in 'C:\git\gogi\node_modules\path-type'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
    - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "util": false }

ERROR in ../../node_modules/path-type/index.js 3:11-24

Module not found: Error: Can't resolve 'fs' in 'C:\git\gogi\node_modules\path-type'

ERROR in ../../node_modules/resolve/lib/async.js 1:9-22

Module not found: Error: Can't resolve 'fs' in 'C:\git\gogi\node_modules\resolve\lib'

ERROR in ../../node_modules/resolve/lib/async.js 2:11-26

Module not found: Error: Can't resolve 'path' in 'C:\git\gogi\node_modules\resolve\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ../../node_modules/resolve/lib/node-modules-paths.js 1:11-26

Module not found: Error: Can't resolve 'path' in 'C:\git\gogi\node_modules\resolve\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ../../node_modules/resolve/lib/sync.js 2:9-22

Module not found: Error: Can't resolve 'fs' in 'C:\git\gogi\node_modules\resolve\lib'

ERROR in ../../node_modules/resolve/lib/sync.js 3:11-26

Module not found: Error: Can't resolve 'path' in 'C:\git\gogi\node_modules\resolve\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ../../node_modules/styled-components/node_modules/babel-plugin-styled-components/lib/visitors/displayNameAndId.js 8:35-50

Module not found: Error: Can't resolve 'path' in 'C:\git\gogi\node_modules\styled-components\node_modules\babel-plugin-styled-components\lib\visitors'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ../../node_modules/styled-components/node_modules/babel-plugin-styled-components/lib/visitors/displayNameAndId.js 10:33-46

Module not found: Error: Can't resolve 'fs' in 'C:\git\gogi\node_modules\styled-components\node_modules\babel-plugin-styled-components\lib\visitors'

[Nasicus]

In the meantime I tried to do the same (import styled from 'styled-components/macro') in a new CRA project with cypress component testing and there it works.

So it definitely only happens together with nx. (Not saying that I didn't configure anything wrong there, but still...).

I still have no idea to solve this btw.

I also tried updating all nrwl and cypress packages, but that didn't help.

[Temmermans]

I just had the same issue but for a node app after we upgraded to NX 13 and webpack 5. Before the upgrade all the tests did work. For me the failing libs are crypto and stream. Did someone find a workaround for this? Because we use the standard webpack config of NX, I suppose we do not have a way of configuring those fallback ourselves?

[kilalo]

Hi, i have the same issue after updating NX 13 and angular 13.

Is anyone has found any solution to fix this ?

The problem is coming when i launch the nx serve cli

[ghost]

For anyone who wants to use Cypress component testing over a library, this is the webpack configuration I use. It requires Storybook configuration in your library because it leverages its webpack configuration:

const { startDevServer } = require('@cypress/webpack-dev-server')
const { webpack } = require('@nrwl/react/plugins/storybook/index')
const { getWebpackConfig } = require('@nrwl/cypress/plugins/preprocessor')
const { join } = require('path')
const project = require('../../project.json')

module.exports = async (on, config) => {
  const cypressWebpack = getWebpackConfig(config)

  const webpackConfig = await webpack(
    { ...cypressWebpack, mode: 'development' },
    {
      ...project.targets.storybook.options,
      configDir: join(__dirname, '../../.storybook'),
      workspaceRoot: join(__dirname, '../../../../')
    }
  )

  on('dev-server:start', (options) =>
    startDevServer({ options, webpackConfig })
  )
}

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.