CODEWITHSUNDEEP
cypress
Nicolas Bouvrette
Nicolas Bouvrette

Reputation: 4767

How to extend Webpack config in Cypress 10+

I'm trying to extend the Webpack config in Cypress 10.8.0, but the only documentation I could find refers to the "legacy plugin file": https://github.com/cypress-io/cypress/tree/master/npm/webpack-preprocessor#modifying-default-options

I suppose there is a way to do this directly in the cypress.config file, but how?

Upvotes: 7

Views: 6414

Answers (2)

Lucca Mordente
Lucca Mordente

Reputation: 1131

Just use @cypress/webpack-batteries-included-preprocessor.

This preprocessor is a wrapper for @cypress/webpack-preprocessor. The webpack preprocessor does not include any extra dependencies (e.g. babel-loader, ts-loader), since most users will use their own webpack.config.js with it and already have the necessary dependencies installed. This preprocessor is for users who do not have those dependencies installed and would prefer not to configure the preprocessor to handle things like TypeScript and CoffeeScript.

Here's an example of how to use it:

const { defineConfig } = require('cypress');

const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor');
const webpack = require('webpack');

const config = defineConfig({
  // ...
  e2e: {
    // ...
    setupNodeEvents(on) {
      const options = webpackPreprocessor.defaultOptions;

      options.webpackOptions.plugins = options.webpackOptions.plugins ?? [];
      options.webpackOptions.plugins.push(
        new webpack.NormalModuleReplacementPlugin(/^node:/u, (resource) => {
          resource.request = resource.request.replace(/^node:/u, '');
        }),
      );
      options.typescript = require.resolve('typescript');

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

export default config;

Upvotes: 0

Nicolas Bouvrette
Nicolas Bouvrette

Reputation: 4767

I actually ended up finding how (probably the Cypress documentation should be updated at some point). Here is an example to "Polyfill" the node: prefixed modules:

import { defineConfig } from "cypress";
import webpackPreprocessor from "@cypress/webpack-preprocessor";
import Webpack from "webpack";

export default defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    setupNodeEvents(on) {
      const options = webpackPreprocessor.defaultOptions;
      options.webpackOptions.plugins = options.webpackOptions.plugins ?? [];
      options.webpackOptions.plugins.push(
        new Webpack.NormalModuleReplacementPlugin(
          /^node:/,
          (resource: { request: string }) => {
            resource.request = resource.request.replace(/^node:/, "");
          }
        )
      );

      on("file:preprocessor", webpackPreprocessor(options));
    },
  },
});

Upvotes: 10

Related Questions