bahmutov/cypress-esbuild-preprocessor

Bundle Cypress specs using esbuild

@bahmutov/cypress-esbuild-preprocessor

Bundle Cypress specs using esbuild

Install

npm i -D cypress @bahmutov/cypress-esbuild-preprocessor esbuild
# note: this plugin assumes the esbuild is peer dependency

esbuild version support

esbuild version	cypress-esbuild-preprocessor version
< 0.17	< 2.2.0
>= 0.17	2.2.0

Use

Cypress v10+

In your config file add this module as a preprocessor

// cypress.config.js
import { defineConfig } from 'cypress'
import createBundler from '@bahmutov/cypress-esbuild-preprocessor'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('file:preprocessor', createBundler())
    },
  },
})

Cypress before v10

In your plugin file use this module as the preprocessor

// cypress/plugins/index.js
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
module.exports = (on, config) => {
  on('file:preprocessor', createBundler())
}

ESBuild options

If you want to pass your own ESBuild options

// cypress/plugins/index.js
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
module.exports = (on, config) => {
  const bundler = createBundler({
    // any ESBuild options here
    // https://esbuild.github.io/api/
  })
  on('file:preprocessor', bundler)
}

Debugging

Run with the environment variable DEBUG=cypress-esbuild-preprocessor

But also if something is not working, check out the alternative package: cypress-esbuild-preprocessor

Breaking changes

v1 to v2

• instead of the file preprocessor, exposes a constructor function to allow user options to ESBuild

// v1
const bundler = require('cypress-esbuild-preprocessor')
module.exports = (on, config) => {
  on('file:preprocessor', bundler)
}

// v2
const createBundler = require('cypress-esbuild-preprocessor')
module.exports = (on, config) => {
  // pass ESBuild options to be applied to each spec file
  const bundler = createBundler({
    define: {
      'process.env.NODE_ENV': '"development"',
    },
  })
  on('file:preprocessor', bundler)
}

Small print

Author: Gleb Bahmutov <[email protected]> © 2022

• @bahmutov
• glebbahmutov.com
• blog
• videos
• presentations
• cypress.tips
• Cypress Tips & Tricks Newsletter
• my Cypress courses

License: MIT - do anything with the code, but don't blame me if it does not work.

Support: if you find any problems with this module, email / tweet / open issue on Github

cypress-esbuild-preprocessor's Issues

This library doesn't support recent versions of esbuild

From glancing at the package.json, it seems that the peer dependencies haven't been updated in a while, and now I'm getting this locally:

 ERR_PNPM_PEER_DEP_ISSUES  Unmet peer dependencies

../../tools/test-e2e
├─┬ @bahmutov/cypress-esbuild-preprocessor 2.2.0
│ └── ✕ unmet peer [email protected]: found 0.19.0
└─┬ @esbuild-plugins/node-modules-polyfill 0.2.2
  └── ✕ unmet peer [email protected]: found 0.19.0

Hyperlink in log when code fails is incorrect with Cypress 10xx

In debugger when a test fails and failing line of code is highlighted the path to the class/code block seems incorrect

clicking on this link unsurprisingly does not work as it seems to have too many ../../

i raised with cypress and their reply was

cypress-io/cypress#23917 (comment)

it seems they think that the issue is with the pre processor

RFE: please add TypeScript definitions

Other Cypress and esbuild plugins offer TS definitions, which are always helpful.

using esbuild with injectDevServer for @cypress/react component testing

if i run cypress open-ct it crashes

To run component-testing, cypress needs the dev-server:start event.

Please implement it by adding this code to your pluginsFile.

// /Users/me/dev/testcase/cypress/plugins/index.js
module.exports = (on, config) => {
  on('dev-server:start', () => startDevServer(...)
}

this is how my plugin index looks for now

/// <reference types="cypress" />

const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
const path = require('path');

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = (on, config) => {
    const bundler = createBundler({
        // any ESBuild options here
        // https://esbuild.github.io/api/
        esbuildOptions: {
            resolveExtensions: ['.js', '.jsx', '.ts', '.tsx', '.css'],
            define: {'process.env.NODE_ENV': '"development"'},
        },
    })
    on('file:preprocessor', bundler)
    return config
}

any ideas how to use esbuild with the component testing?

test the esbuild loader

Need to a loader example to confirm it is working

https://esbuild.github.io/plugins/#load-callbacks

Compatibility issues with the latest Cucumber preprocessor

I am using Cypress 10 with @badeball/cypress-cucumber-preprocessor and your Cypress-esbuild-preprocessor.

Everything worked very well, but now I updated the Cucumber preprocessor to the latest version 12.2.0 (before I think I had 11.5.0).

Now seems, your esbuild preprocessor is not compatible with the latest cucumber, I have this error:

Error: Build failed with 1 error:
node_modules/common-ancestor-path/index.js:17:37: ERROR: [plugin: feature] Reduce of empty array with no initial value
    at failureErrorWithLog (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1605:15)
    at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1251:28
    at runOnEndCallbacks (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1034:63)
    at buildResponseToResult (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1249:7)
    at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1358:14
    at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:666:9
    at handleIncomingPacket (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:763:9)
    at Socket.readFromStdout (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:632:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

and this prevents Cypress tests to run as due to this error no tests are found.

The only solution that worked was to downgrade Cucumber preprocessor to the previous version.

Please take a look and it'll be good if you take care of this esbuild preprocessor and regularly release a compatible versions.

Thank you

Incompatibility issues with the latest esbuild versions

When trying to compile a typescript project using the esbuild-preprocessor I was getting the following error

Command npx tsc

cypress.config.ts(80,17): error TS2322: Type 'import("<project>/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").Plugin' is not assignable to type 'import("<local_libraries_path>/node_modules/esbuild/lib/main").Plugin'.
  Types of property 'setup' are incompatible.

After checking the log of new versions for esbuild I noticed there were recent updates, and it seems the esbuld-preprocessor is not compatible versions 0.15.17 or higher.

I found a provisional solution, updating the package.json to explicitly use a given esbuild version as follows

"devDependencies": {
    "@badeball/cypress-cucumber-preprocessor": "14.0.0",
    "@bahmutov/cypress-esbuild-preprocessor": "2.1.5",
    "esbuild": "0.15.16"
   ...
}

But I'd say that this should be addressed from the project.

Sharing the complete exception stack trace.

cypress.config.ts(80,17): error TS2322: Type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").Plugin' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").Plugin'.
  Types of property 'setup' are incompatible.
    Type '(build: import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").PluginBuild) => void | Promise<void>' is not assignable to type '(build: import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").PluginBuild) => void | Promise<void>'.
      Types of parameters 'build' and 'build' are incompatible.
        Type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").PluginBuild' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").PluginBuild'.
          The types of 'initialOptions.plugins' are incompatible between these types.
            Type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").Plugin[] | undefined' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").Plugin[] | undefined'.
              Type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").Plugin[]' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").Plugin[]'.
                Type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").Plugin' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").Plugin'.
                  Types of property 'setup' are incompatible.
                    Type '(build: import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").PluginBuild) => void | Promise<void>' is not assignable to type '(build: import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").PluginBuild) => void | Promise<void>'.
                      Types of parameters 'build' and 'build' are incompatible.
                        Type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").PluginBuild' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").PluginBuild'.
                          The types of 'esbuild.build' are incompatible between these types.
                            Type '{ (options: import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").BuildOptions & { write: false; }): Promise<...>; (options: import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main")....' is not assignable to type '{ (options: import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").BuildOptions & { write: false; }): Promise<import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").BuildResult & { ...; }>; (options: import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").BuildOptions & { ...'.
                              Types of parameters 'options' and 'options' are incompatible.
                                Type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").BuildOptions & { write: false; }' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").BuildOptions & { write: false; }'.
                                  Type 'BuildOptions & { write: false; }' is not assignable to type 'BuildOptions'.
                                    Types of property 'plugins' are incompatible.
                                      Type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").Plugin[] | undefined' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").Plugin[] | undefined'.
                                        Type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").Plugin[]' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").Plugin[]'.
                                          Type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").Plugin' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").Plugin'.
                                            Types of property 'setup' are incompatible.
                                              Type '(build: import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").PluginBuild) => void | Promise<void>' is not assignable to type '(build: import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").PluginBuild) => void | Promise<void>'.
                                                Types of parameters 'build' and 'build' are incompatible.
                                                  Type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").PluginBuild' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").PluginBuild'.
                                                    The types of 'esbuild.initialize' are incompatible between these types.
                                                      Type '(options: import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").InitializeOptions) => Promise<void>' is not assignable to type '(options: import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").InitializeOptions) => Promise<void>'.
                                                        Types of parameters 'options' and 'options' are incompatible.
                                                          Type 'import("/home/vsts/work/1/s/web-agent/node_modules/esbuild/lib/main").InitializeOptions' is not assignable to type 'import("/home/vsts/work/1/s/web-agent/node_modules/@badeball/cypress-cucumber-preprocessor/node_modules/esbuild/lib/main").InitializeOptions'.
                                                            Types of property 'wasmURL' are incompatible.
                                                              Type 'string | URL | undefined' is not assignable to type 'string | undefined'.
                                                                Type 'URL' is not assignable to type 'string'.

In watch mode, if there is a compile error, Cypress is not notified (fix included!)

If the compilation actually fails in watch mode, Cypress just carries on using the last compiled file, which is incredibly confusing ("why aren't my changes coming through"). What is supposed to happen is it goes to the error state.

The reason this is happening is the errors array is never checked and a rejected promise is never returned.

Cypress docs state:

The callback function should return one of the following:

• A promise* that eventually resolves the path to the built file**.
• A promise* that eventually rejects with an error that occurred during processing.

There's a few other fixes needed where I know the solution. Especially around how its not using the promises correctly to track when the file has truly been written.

However, going to see if this PR is merged first before making the effort as unsure if this is monitored. I'm happy to help maintain this :).

[Question] How to instrument into the pre-processor pipeline?

@bahmutov sorry to bother but your guide here Instrumenting the code as a pre-processor step isn't working by itself (I'm on Windows, perhaps that may be a reason after more reading).

Right now I'm using these scripts

"scripts": {
  "instrument": "npx nyc instrument --compact=false src/js cypress/instrumented",
  "coverage:report": "npx nyc report --exclude=src/js/util --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
  "cypress": "npm run instrument && npx cypress open"
}

and these dependencies

"devDependencies": {
    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
    "@cypress/code-coverage": "^3.9.12",
    "babel-plugin-istanbul": "^6.1.1",
    "cypress": "^9.5.4",
    "esbuild": "^0.14.30"
}

It's working fine just like that for a quick test (actually this setup is the only one that works for me), however the problem is that my spec files import files from cypress/instrumented and after every little change, I have to restart the cypress window because it throws errors.

So we're trying to implement what you describe in your guide with the esbuild pre-processor, so please enlighten us.

Thank you so much.

Allow to pass options to esbuild

For example we can't run tests without these options:

define: {
  global: 'globalThis',
  'process.env.NODE_ENV': JSON.stringify('production'),
},

Invalid path when loading bundled spec

Hi,

When cypress is loaded and I try to open the spec in the app, I get the following error:
Error: ENOENT: no such file or directory, stat '/home/elias/.config/Cypress/cy/production/projects/tests-535beb165404f40fd3d30b63481a8024/bundles/cypress/e2e/all.spec.ts'

when I check the folder, the folder exists and the following file is found:

Error: ENOENT: no such file or directory, stat '/home/elias/.config/Cypress/cy/production/projects/tests-535beb165404f40fd3d30b63481a8024/bundles/cypress/e2e/all.spec.ts.js'

so the file exists, but with the .ts.js extension (not .ts)

How to solve this so cypress can resolve the file path correctly ?

Environment: ubuntu 22, node 18

cypress.config.ts

import createBundler from "@bahmutov/cypress-esbuild-preprocessor"
import { defineConfig } from "cypress"

import plugins from "./cypress/plugins/index"

export default defineConfig({
  projectId: "xxxxx",
  component: {
    devServer: {
      framework: "react",
      bundler: "vite",
    },
  },
  defaultCommandTimeout: 10000,
  requestTimeout: 10000,
  pageLoadTimeout: 10000,
  reporter: "mochawesome",
  reporterOptions: {
    reportDir: "cypress/results",
    overwrite: false,
    html: false,
    json: true,
  },
  waitForAnimations: false,
  numTestsKeptInMemory: 10,
  videoUploadOnPasses: false,
  videoCompression: 15,
  e2e: {
    async setupNodeEvents(on, config) {
      on("file:preprocessor", createBundler())
      const result = plugins(on, config) as Cypress.PluginConfigOptions
      return {
        ...result,
        excludeSpecPattern:
          process.env.CI || config.isTextTerminal
            ? ["cypress/e2e/all.spec.ts"]
            : [],
      }
    },
    baseUrl: process.env.CI ? "http://localhost:2222" : "http://localhost:3000",
    specPattern: "cypress/e2e/*.spec.ts",
  },
})

tsconfig.json

{
  "compilerOptions": {
    "target": "es2019",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noUnusedLocals": true,
    "allowUnusedLabels": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noFallthroughCasesInSwitch": true,
    "types": ["node"],
    "skipDefaultLibCheck": true,
    "skipLibCheck": true
  },
  "include": ["e2e"],
  "exclude": ["**/node_modules", "**/.*/"],
  "references": [
    { "path": "../../packages/@some/types" }
  ]
}

package.json

{
  "name": "tests",
  "version": "0.0.0",
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "clean": "rimraf -rf .turbo ./dist tsconfig.tsbuildinfo",
    "e2e-tests": "cypress open",
    "e2e-run": "cypress run",
    "report": "node -r esbuild-register scripts/cypress.ts",
    "lint": "eslint \"./cypress/**/*.ts\" --quiet",
    "format": "yarn lint --fix --quiet"
  },
  "dependencies": {
    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
    "@some/types": "*",
    "expect": "^29.5.0",
    "mocha": "^10.2.0"
  },
  "devDependencies": {
    "@auth0/auth0-spa-js": "2.0.7",
    "cypress": "^12.14.0",
    "cypress-file-upload": "^5.0.8",
    "eslint-config-lyra-presets": "*",
    "eslint-plugin-no-autofix": "^1.2.3",
    "eslint-plugin-no-only-tests": "^3.1.0",
    "mochawesome": "7.1.3",
    "mochawesome-merge": "4.3.0",
    "mochawesome-report-generator": "6.2.0"
  }
}

Compiling of files keeps failing when there is a bad import statement

I originally opened an issue on badeball/cypress-cucumber-preprocessor. The maintainer pointed out that the issue is within this package.

So the report here is the original report, including some badeball/cypress-cucumber-preprocessor related info:

Current behavior

Given I have a step definition file that contains an invalid (relative) import
When I start cypress and try to run that feature
Then I get the following error
  > Error: Build failed with 1 error:
  > cypress/e2e/test.js:1:42: ERROR: Could not resolve "../support/helpers"
When I then fix the broken import
Then I still get the error

Desired behavior

When the broken import is fixed, the feature should start running.

Test code to reproduce

https://github.com/younited/cypress_cucumber_import_bug

Instructions on how to replicate the issue are in the readme.

Versions

• Cypress version: 10.4.0
• Cypress version: 10.4.0
• Esbuild Preprocessor version: 2.1.3
• Esbuild version: 0.14.51
• Node version: 16.14.2

Dynamic require of is not supported when running a cypress test

I am getting a message that Dynamic require of <> is not supported when I try to run a cypress test either from the command line or from the cypress GUI, not really sure what to do to fix this, I had been under the impression that putting the package in external: ['cypress-*'] would make esbuild ignore my package, but this does not appear to be the correct assumption.

Has anyone had this error before ?

My custom esbuild configurations in cypress/plugins/index.js

const bundler = createBundler({
      platform: 'node',
      format: 'iife',
      external: ['cypress-*'],
      packages: 'external',
  });
on('file:preprocessor', bundler);

node modules are :
"@bahmutov/cypress-esbuild-preprocessor": "2.2.0",
"esbuild": "0.17.19",

My error when I run a test with Cypress

The following error originated from your test code, not from Cypress.

Dynamic require of "cypress-file-upload" is not supported
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.

 at eval (https://<REDACTED>/__cypress/tests?p=cypress/support/e2e.js:27:11)
    at cypress/support/commands.js (<REDACTED>/__cypress/tests?p=cypress/support/e2e.js:40:36)
    at __init (https://<REDACTED>/__cypress/tests?p=cypress/support/e2e.js:30:58)
    at cypress/support/e2e.js (<REDACTED>/__cypress/tests?p=cypress/support/e2e.js:3453:7)
    at __require2 (https://<REDACTED>/__cypress/tests?p=cypress/support/e2e.js:33:52)
    at eval (<REDACTED>/__cypress/tests?p=cypress/support/e2e.js:3489:3)
    at eval (<REDACTED>/__cypress/tests?p=cypress/support/e2e.js:3490:3)
    at eval (<anonymous>)
From previous event:
    at evalScripts (<REDACTED>__cypress/runner/cypress_runner.js:168521:58)
    at <unknown> (<REDACTED>/__cypress/runner/cypress_runner.js:168530:152)
From previous event:
    at runScriptsFromUrls (https://<REDACTED>/__cypress/runner/cypress_runner.js:168530:136)
    at Object.runScripts (https://<REDACTED>/__cypress/runner/cypress_runner.js:168571:12)
    at $Cypress.onSpecWindow (https://<REDACTED>/__cypress/runner/cypress_runner.js:157151:75)

my cypress/support/e2e.js file

import './commands';
import 'cypress-axe';
import 'cypress-file-upload';

Cypress hangs with cypress esbuild preprossor when running tests on CLI with cypress run

Cypress hangs with cypress esbuild preprossor when running tests on CLI, the same test is passing and bundled nicely with esbuild when running tests on the cypress GUI.

// cypress.config.js
import { defineConfig } from 'cypress'
import createBundler from '@bahmutov/cypress-esbuild-preprocessor'

export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
on('file:preprocessor', createBundler())
},
},
})

DEBUG=cypress-** npx cypress run --spec cypress/tests/login.cy.js

@bahmutov/cypress-esbuild-preprocessor: 2.2.0,
esbuild: 0.18.16

importing css

Hi,
I'm trying to use this plugin with component testing. It adds this small amount of speed which gives a very smooth dev experience. 👍
However, I can't apply my css styles.
With regular esbuild, I just add "index.css" to root html and it's ok.
I tried import "mycss.css" in support/index.js.
Looking at : /home/myhome/.config/Cypress/cy/production/projects/htmlrew-c7050eed47b7365eab4267f47e5954f4/bundles/cypress/support/ I can see a index.css bundling my "mycss".
So it seems to be handled.
I don't know if it's a limitation of this plugin/cypress or esbuild.

How to add coverage

I was using your previous @bahmutov/cy-rollup where it was fairly easy to implement, however, this package make a lot more sense. The following is not working:

const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
const codeCoverageTasks = require('@cypress/code-coverage/task');

module.exports = (on, config) => {
  codeCoverageTasks(on, config);

  // pass ESBuild options to be applied to each spec file
  const bundler = createBundler({
    define: {
      "process.env.NODE_ENV": '"development"'
    }
  });
  on('file:preprocessor', bundler);

  // code coverage
  on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'));

  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config;
}

I'm getting

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

Is there a way to use esbuild with component testing?

Is there a way to use esbuild preprocessor instead of webpack with component testing? I tried to configure it in the same way as for e2e testing, but still, webpack was used. Changing the bundler to esbuild in cypress.config.json files results in an error message about an unsupported bundler.

	component: {
		devServer: {
			framework: 'next',
			bundler: 'webpack',
		},
	},

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

github-actions

.github/workflows/badges.yml

• actions/checkout v4
• stefanzweifel/git-auto-commit-action v5
• ubuntu 22.04

.github/workflows/ci.yml

• actions/checkout v4
• cypress-io/github-action v5
• cycjimmy/semantic-release-action v3
• ubuntu 22.04

npm

package.json

• debug 4.3.4
• cypress 13.8.1
• esbuild 0.20.2
• prettier 3.2.5
• semantic-release 23.0.8
• typescript 5.4.5
• esbuild >=0.17.0

---

• Check this box to trigger a request for Renovate to run again on this repository