{"id":19438,"library":"cypress-webpack-preprocessor-v5","title":"@cypress/webpack-preprocessor","description":"A Cypress preprocessor for bundling JavaScript specs via webpack (v5, alpha). Integrates webpack 4.x or 5.x with Cypress's file:preprocessor hook. Requires peer dependencies: @babel/core, @babel/preset-env, babel-loader, webpack. Provides sensible defaults (Babel transpilation, development mode) but allows full customization of webpack options, watchOptions, and additionalEntries. Ships TypeScript types. Not yet stable (alpha); breaking changes may occur. Consider using @cypress/webpack-preprocessor v4 for stable releases.","status":"active","version":"5.0.0-alpha.1","language":"javascript","source_language":"en","source_url":"https://github.com/cypress-io/cypress","tags":["javascript","cypress","cypress-plugin","cypress-preprocessor","webpack","typescript"],"install":[{"cmd":"npm install cypress-webpack-preprocessor-v5","lang":"bash","label":"npm"},{"cmd":"yarn add cypress-webpack-preprocessor-v5","lang":"bash","label":"yarn"},{"cmd":"pnpm add cypress-webpack-preprocessor-v5","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Babel core dependency for transpilation via babel-loader","package":"@babel/core","optional":false},{"reason":"Default Babel preset used in webpack configuration","package":"@babel/preset-env","optional":false},{"reason":"Webpack loader for Babel transpilation","package":"babel-loader","optional":false},{"reason":"Bundling engine (4.x or 5.x)","package":"webpack","optional":false}],"imports":[{"note":"CommonJS require; package does not export ES module syntax; use default require.","wrong":"const webpackPreprocessor = require('@cypress/webpack-preprocessor').default","symbol":"default","correct":"const webpackPreprocessor = require('@cypress/webpack-preprocessor')"},{"note":"ESM import not supported; must use CommonJS require.","wrong":"import { defaultOptions } from '@cypress/webpack-preprocessor'","symbol":"defaultOptions","correct":"const webpackPreprocessor = require('@cypress/webpack-preprocessor'); const defaults = webpackPreprocessor.defaultOptions"},{"note":"Use type import to avoid runtime bundling issues. Types are exported from the package.","wrong":"import { CypressWebpackPreprocessorOptions } from '@cypress/webpack-preprocessor'","symbol":"Types","correct":"import type { CypressWebpackPreprocessorOptions } from '@cypress/webpack-preprocessor'"}],"quickstart":{"code":"// plugins/index.js - Cypress plugins file\nconst webpackPreprocessor = require('@cypress/webpack-preprocessor');\n\nmodule.exports = (on) => {\n  const options = {\n    webpackOptions: {\n      mode: 'development',\n      module: {\n        rules: [\n          {\n            test: /\\.jsx?$/,\n            exclude: /node_modules/,\n            use: {\n              loader: 'babel-loader',\n              options: {\n                presets: ['@babel/preset-env'],\n              },\n            },\n          },\n        ],\n      },\n    },\n    watchOptions: {},\n  };\n  on('file:preprocessor', webpackPreprocessor(options));\n};","lang":"javascript","description":"Shows typical usage: import the preprocessor, configure webpack options (with Babel preset-env), and hook into Cypress's file:preprocessor event."},"warnings":[{"fix":"Use latest stable 4.x version or pin to a specific alpha and test thoroughly.","message":"Version 5.0.0-alpha.1 is alpha software; API may change without major version bump.","severity":"breaking","affected_versions":"5.0.0-alpha.1"},{"fix":"Update webpack to version 4 or 5, or use @cypress/webpack-preprocessor 1.x if webpack 2/3 required.","message":"webpack 2 and 3 are not supported; require webpack 4.x or 5.x.","severity":"breaking","affected_versions":">=5.0.0-alpha.1"},{"fix":"Upgrade to Babel 7, or use @cypress/webpack-preprocessor <= 2.x for Babel 6 support.","message":"Babel 6 not supported; require @babel/core 7.x.","severity":"deprecated","affected_versions":">=5.0.0-alpha.1"},{"fix":"Set nodeVersion: 'system' in cypress.config.js and ensure Node matches project requirements.","message":"The preprocessor requires Node version bundled with Cypress; using system Node may break.","severity":"gotcha","affected_versions":"*"},{"fix":"Set webpackOptions.devtool = false in options to disable source maps.","message":"Source maps are always enabled by default; explicit 'devtool: false' required to disable.","severity":"gotcha","affected_versions":"*"},{"fix":"Use const pkg = require('@cypress/webpack-preprocessor') instead of import.","message":"Package does not support ESM imports; must use CommonJS require().","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev @babel/core @babel/preset-env babel-loader webpack","cause":"Missing peer dependency @babel/core","error":"Cannot find module '@babel/core'"},{"fix":"npm install --save-dev webpack","cause":"Missing peer dependency webpack","error":"Error: Cannot find module 'webpack'"},{"fix":"Use const webpackPreprocessor = require('@cypress/webpack-preprocessor')","cause":"Incorrect import style - used named export instead of default","error":"TypeError: webpackPreprocessor is not a function"},{"fix":"Upgrade webpack to 4.x or 5.x, or downgrade to @cypress/webpack-preprocessor 1.x","cause":"webpack version < 4","error":"Error: You are using a non-standard, unsupported version of webpack."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}