Cypress-file-upload: [Bug] Dependency on node.js 'path' breaking tests with certain bundlers (e.g. esbuild)

[JaydenNavarro-at]

Current behavior:

The following error originated from your test code, not from Cypress. > process is not defined

Desired behavior:

The test runs as expected.

Steps to reproduce: (app code and test code)

Bundle Cypress tests that use cypress-file-upload using esbuild or webpack >= v5.

The issue is that these bundlers by default do not polyfill node core modules/variables such as process, which the path module used by cypress-file-upload depends on: https://github.com/nodejs/node/blob/6ca785b951979fa3629505653b19d47bf7b9edde/lib/path.js#L50

Versions

Cypress: 6.1.0
cypress-file-upload: 5.0.6
esbuild: 0.9.6

[abramenal]

Hi @JaydenNavarro-at
Thanks for submitting the issue!

This is something I've been struggling to fix. The idea is – Cypress allows using node.js built-ins inside your custom command, but using any bundler by end user breaks this.

For now I have 2 ideas:

• get rid of literally any Node.js built-in usage (which is couple of places, but still weird to have own implementation of something like this)
• move any Node.js internal usage into custom plugins, which will be registered before the main command.

I think going with 2nd option looks more proper from Cypress "mindset", though I am not sure if this even fixes the issue.

To understand your use case better, why exactly you are using a bundler for the tests? How can I replicate this setup?

[pyrocat101]

@abramenal

To understand your use case better, why exactly you are using a bundler for the tests? How can I replicate this setup?

Cypress by default uses the webpack preprocessor to bundle the test file for running in the browser. It only supports Webpack <= 4 so far. By default, Webpack 4 polyfills node core modules.

To replicate this setup, try out this preprocessor in our Cypress project that bundles the code with esbuild: https://github.com/bahmutov/cypress-esbuild-preprocessor

As the community is moving towards Webpack 5 and maybe esbuild, which don't polyfill node core modules by default, sooner or later we will have to fix this issue.

I don't quite understand why a custom plugin is the solution here. But I checked the source code and the only usages of path are two functions: basename and extname, both are fairly straightforward to implement. Would you consider replacing those usages with a custom implementation?

[abramenal]

@pyrocat101 thanks for explaining this. I think the easier way then is indeed replacing with custom implementation.
Working on this now.

[abramenal]

Released in v5.0.7

[pyrocat101]

Thank you!