few issues with decap-cms-app @ 3.5.0

[dragons-library]

I just bumped decap-cms-app @ 3.5.0 (from 3.4.0).

After the esm fixes, there are a few lingering things that prevent it from fully functioning.

Note: with the below fixes / workarounds, I have decap-cms-app working in Next.js with React 19.

1. can't resolve 'slate-hyperscript'

decap-cms-app does not declare a dependency / peerDependency on slate-hyperscript, so it fails to resolve (nested dependency from decap-cms-core).

Error

Module not found: Can't resolve 'slate-hyperscript'
   5 | });
   6 | exports.default = void 0;
>  7 | var _slateHyperscript = require("slate-hyperscript");

Workaround

npm i slate-hyperscript

Proposed Fix

Adding slate-hyperscript to decap-cms-app/package.json#peerDependencies should probably work, but peerDeps are notoriously problematic.

2. [email protected] is not browser friendly

[email protected] imports os, which is a node module (node:os), and not resolved in browser-land. This was fixed and released in [email protected].

Error

os is not defined
ReferenceError: os is not defined at [project]/node_modules/decap-cms-app/node_modules/clean-stack/index.js

Workaround

add a local override to bump [email protected] to your package.json:

  "overrides": {
    "clean-stack": "5.2.0"
  }

Proposed Fix

bump clean-stack@^5.2.0 in decap-cms-core

3. Next.js app fails to resolve css

• ol/ol.css
• codemirror/lib/codemirror.css
• codemirror/theme/material.css

Error (with turbopack)

Module [project]/node_modules/ol/ol.css [client] (css) was instantiated because it was required from module [project]/node_modules/decap-cms-widget-map/dist/esm/withMapControl.js [client] (ecmascript), but the module factory is not available. It might have been deleted in an HMR update.

Error (without turbopack):

./node_modules/codemirror/lib/codemirror.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/decap-cms-widget-code/dist/esm/CodeControl.js

Workaround

patch-package and remove the css imports from the packages (see attachments), and manually import them directly in my app:

• decap-cms-widget-code+3.1.4.patch
• decap-cms-widget-map+3.1.4.patch

import 'ol/ol.css';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';

Workaround

The esm build output should probably inline the CSS, as there isn't an industry standard for resolving css imports.

4. [email protected] is not compatible with React 19

This isn't specifically related to the esm build changes, but this should help fix React compatibility issues. The current version of react-scroll-sync is not compatible with React 19.

Error

TypeError: this.context.unregisterPane is not a function at ScrollSyncPane.componentWillUnmount

Workaround

add a local override to bump [email protected] to your package.json:

  "overrides": {
    "react-scroll-sync": "0.11.2"
  },

Proposed Fix

bump react-scroll-sync@^0.11.2 in decap-cms-core

[martinjagodic]

@dragons-library Thanks for raising these and providing the workarounds. These will be useful until we come up with a solution. Note that Decap + React 19 is not officially supported yet, so it's great that we can use your suggestions to make it work.

[dragons-library]

Just for context, I think the first two are things that "broke" with the 3.5.0 release for anyone that started consuming the esm build of decap-cms-app. The 3rd item probably broke as well, but it might also be somewhat specific to Next.js' build pipeline, though I suspect it will impact anyone without a custom css import rule (I haven't tested this with Vite, parcel, etc).

The 4th item is definitely more specific to React 19 support.

If I have time over the next week or so, I'll try to put together a PR, but if anyone else has the bandwidth and wants to take a stab at it, the above details should be sufficient.

[fgnass]

I opened a PR that fixes 3 of the 4 issues. For the CSS imports, we could probably use some babel magic. Simply removing them is not an option, since this would break the pre-built scripts.

[fgnass]

I updated the PR to also address the CSS issue. It now uses babel-plugin-inline-import to inline the CSS as string in the same way the webpack loader does it.

[martinjagodic]

@dragons-library Can you check if this is fixed in [email protected]?

[danwulff]

@martinjagodic I'm seeing new errors with an unresolved dependency on decap-cms-app 3.7.0.

node_modules/decap-cms-core/dist/esm/constants/configSchema.js:22:16: ERROR: Could not resolve "ajv"
node_modules/decap-cms-core/dist/esm/constants/configSchema.js:23:83: ERROR: Could not resolve "ajv-keywords/dist/keywords"
node_modules/decap-cms-core/dist/esm/constants/configSchema.js:24:22: ERROR: Could not resolve "ajv-errors"

[martinjagodic]

@danwulff can you share a bit about your project so I can recreate the problem?

[martinjagodic]

Workaround: npm install ajv ajv-keywords ajv-errors

I will look into it. We also need tests for running a project with decap-cms-app.

[danwulff]

@martinjagodic yeah, I was able to reproduce by following the Installing with npm section of the docs on a vanilla ts project created via vite.

[martinjagodic]

@danwulff fix released in 3.7.1

[danwulff]

@martinjagodic thanks, 3.7.1 compiles which is great. I've now got a ReferenceError but I can open up a separate issue for that as it isn't package related.

Said ReferenceError: https://github.com/decaporg/decap-cms/issues/7521

[tresorama]

I'm encountering the clean-stack problem: Next 14 + Decap CMS + clean-stack 5.3.0

2 weeks ago clean-stack introduced new code that use node:url, and of course in browser runtime is not available.

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
...

For what I can understand clean-stack doesn't hae to goal to be browserfriendly, so would opt for replacing clean-stack entirely with a browser first dep.

Here is the code addition that breaks webpack https://github.com/sindresorhus/clean-stack/commit/7eb47b8f69eb02133b4a6c24c31f73a3bf82ee55

For now i think clean-stack 5.2.0 should be fixed.

[martinjagodic]

@tresorama, this is ripe for a separate issue.