Include polyfills for webpack 5 in Cypress 10.10.0

[fjpedrosa]

I want to use components testing, but when starting the test runner I receive messages saying that webpack 5 is missing polyfills.

So that, I added this configuration in the components section of cypress.config.js:

   setupNodeEvents(on, config) {
      const options = webpackPreprocessor.defaultOptions

      options.webpackOptions.resolve = { 
          fallback: {
            crypto: require.resolve('crypto-browserify'),
            stream: require.resolve('stream-browserify'),
            assert: require.resolve('assert'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            os: require.resolve('os-browserify'),
            url: require.resolve('url'),
         }
      }

      options.webpackOptions.plugins = (
        options.webpackOptions.plugins || []
      ).concat([
        new webpack.ProvidePlugin({
          process: 'process/browser',
          Buffer: ['buffer', 'Buffer'],
        }),
      ])

      on('file:preprocessor', webpackPreprocessor(options))

      return config
    },

However seems that it is not overriding the webpack config file, since I still receiving this error message with a wrong route to resolve the package:

ERROR in ./node_modules/jws/lib/verify-stream.js 8:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/javi/react-project/node_modules/jws/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: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

Am i doing something wrong?

[emilyrohrbough]

@fjpedrosa You'll want to update the devServer configuration which start the dev server which serves your test content. Using the file-preprocessor is likely too late. This documentation / example might be helpful: https://docs.cypress.io/guides/component-testing/component-framework-configuration#React-with-Webpack