decaporg / decaporg/decap-cms

few issues with decap-cms-app @ 3.5.0

Open
#7,375 13 comments 9 reactions 0 assignees View on GitHub
pinned type: bug
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

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

After the [esm fixes](https://github.com/decaporg/decap-cms/pull/7358), 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
```shell
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. `clean-stack@4.x` is not browser friendly
`clean-stack@4.x` imports `os`, which is a node module (`node:os`), and not resolved in browser-land. This was [fixed](https://github.com/sindresorhus/clean-stack/commit/dccdb49b3215ffb78b962e578be9e7cf87eb1ace) and released in `clean-stack@5.0.0`.
### 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 `clean-stack@5.2.0` to your `package.json`:
```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`](https://www.npmjs.com/package/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](https://github.com/user-attachments/files/18435351/decap-cms-widget-code%2B3.1.4.patch)
- [decap-cms-widget-map+3.1.4.patch](https://github.com/user-attachments/files/18435352/decap-cms-widget-map%2B3.1.4.patch)

```js
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. `react-scroll-sync@0.9.0` 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 `react-scroll-sync@0.11.2` to your `package.json`:
```json
"overrides": {
"react-scroll-sync": "0.11.2"
},
```

### Proposed Fix
bump `react-scroll-sync@^0.11.2` in `decap-cms-core`

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.