-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Description
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. 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 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
:
"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:
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
:
"overrides": {
"react-scroll-sync": "0.11.2"
},
Proposed Fix
bump react-scroll-sync@^0.11.2
in decap-cms-core