bug: deps - `clean-stack 5.3.0+` is not browser friendly - triggers `Module build failed: UnhandledSchemeError: Reading from "node:url"`

[tresorama]

Background

This issue is extracted from a comment on an other issue that explain several problem of decap and it's dependencies.

Problem

If you opt for using decap via npm install , opposed to cdn, and your bundler is webpack (next.js uses it), you get this error in the browser runtime on page load of the cms page

Module build failed: UnhandledSchemeError: Reading from "node:url" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
Import trace for requested module:
node:url
./node_modules/.pnpm/[email protected]/node_modules/clean-stack/index.js
./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]__@emotion_a50ca47a6744b7ce5e4028262924054d/node_modules/decap-cms-core/dist/esm/components/UI/ErrorBoundary.js
 ...

The reason is:

• decap uses clean-stack under the hood
• clean-stack is a library built with focus on server usage (node)
• clean-stack purpose is not being a browser friendly lib
• clean-stack 5.3.0+ introduced new code that uses node:url, and this is not present in browser Here is the code addition that breaks webpack https://github.com/sindresorhus/clean-stack/commit/7eb47b8f69eb02133b4a6c24c31f73a3bf82ee55

Potential Solution

Short-term:

• fix clean-stack at 5.2.0 for now (latest version without node:url addition)

Long-term:

• switch to a different library that has the goal of being browser-friendly

[meganfilo]

and your bundler is webpack

Adding that this is happening within Nuxt.js that utilizes Vite.

[danwulff]

This seems to be a pattern with this repo. Perhaps its time for an e2e test that checks the integrity of the final npm package prior to pushing to the registry?

[martinjagodic]

@danwulff good idea, I opened an issue https://github.com/decaporg/decap-cms/issues/7623