decap-cms Live preview wont work with React components: **Error: Minified React error #525;**

I am trying to create a live preview for one of my collections but I keep getting Error: Minified React error #525;

I have tried, removing the --external react, react-dom flags from the script and the import React from 'react' but then I get the error React is not defined

Below is my setup and dependencies.

"cms:build": "tsup src/cms-preview/index.js --format iife --out-dir public/admin --minify --loader .js=jsx --external react,react-dom",

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <title>Content Manager</title>
  </head>
  <body>
    <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
    <script src="./index.global.js"></script>
  </body>
</html>

import PagePreview from './PagePreview'
const CMS = window.CMS

CMS.registerPreviewTemplate('pages', PagePreview)

"react": "^18.2.0", "react-dom": "^18.2.0", "next": "^14.2.5",

import React from 'react'

import Banner from '../components/success_story/Banner'
import TextSection from '../components/success_story/TextSection'
import ImageSection from '../components/success_story/ImageSection'
import LargeTextBlock from '../components/success_story/LargeTextBlock'
import Testimonial from '../components/success_story/SuccessStoryTestimonial'
import ProblemsAndSolutions from '../components/success_story/ProblemsAndSolutions'
import Timeline from '../components/success_story/Timeline'
import Booking from '../components/success_story/Booking'

const componentMap = {
  Banner,
  TextSection,
  ImageSection,
  LargeTextBlock,
  Testimonial,
  ProblemsAndSolutions,
  Timeline,
  Booking
}

const PagePreview = ({ entry }) => {
  const data = entry.getIn(['data']).toJS()
  const sections = data.sections || []

  return (
    <div>
      {sections.map((section, i) => {
        const Component = componentMap[section.componentType]
        if (!Component) return <p key={i}>Unknown section type: {section.componentType}</p>
        return <Component key={i} {...section} />
      })}
    </div>
  )
}

export default PagePreview

Jul 25 '25 11:07 Drinosi

We were having the same issue and it turns out it's a Decap / React version compatibility issue. Removing the caret in your decap script should fix it.

- <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
+ <script src="https://unpkg.com/[email protected]/dist/decap-cms.js"></script>

Aug 06 '25 13:08 BuckyBuck135

@BuckyBuck135 I resolved it to some extent with the same fix you mentioned, it accepts the react component that render pure html from JSX, but any other complexity like React.useState/useEffect/useRef it throws "Cannot access properties of undefined reading useEffect/useState/useRef".

Can you render such functionalities or just pure html?

Aug 06 '25 16:08 Drinosi

Our use case is pretty simple: just adding custom CSS for the live preview. We're not using your React use-*. So, I don't think I can help you with that, sorry. If you want to take a peek: https://github.com/CodeStitchOfficial/Intermediate-Website-Kit-SASS/blob/main/src/admin/index.html

Aug 06 '25 17:08 BuckyBuck135

@Drinosi I just run into the same issue, did you find a solution or any workaround ? I was thinking maybe try to build a version of decap with external react in order to have the same react instance for both the CMS and the preview

Oct 02 '25 08:10 ooga

I fixed it with this code:


<body>
      <script src="https://unpkg.com/[email protected]/dist/decap-cms.js"></script>
  
      <!-- Decap CMS preview pane script -->
      <!-- Edit this script to customize the preview pane for your blog posts.  -->
      <!-- Documentation: https://decapcms.org/docs/customization/ -->
      <script>
          // Use functional component syntax compatible with Decap CMS
          const BlogPreview = ({ entry, getAsset, widgetFor }) => {
              // Get all the props from the collection
              const data = entry.getIn(['data']).toJS();
              const { title, author, date: rawDate, image } = data;
              const date = typeof rawDate === "string" ? new Date(rawDate) : rawDate;
              let formattedDate = "";
              if (date) {
                  formattedDate = Intl.DateTimeFormat("en-US", {
                      month: "long",
                      day: "numeric",
                      year: "numeric"
                  }).format(date);
              }
  
              const cover = getAsset(image);
  
              // Return React elements using h() function (Decap CMS uses Preact)
              return h('div', { className: 'blog' },
                  h('h1', { className: 'title' }, title),
                  h('div', { className: 'metadata' },
                      h('span', { className: 'author' }, author),
                      h('span', { className: 'dot' }),
                      h('span', { className: 'date' }, formattedDate)
                  ),
                  cover && h('img', { src: cover.toString(), className: 'cover', alt: 'Cover' }),
                  h('hr', { className: 'divider' }),
                  h('div', { className: 'markdown' }, widgetFor('body'))
              );
          };
  
          // Register the elements and styles for the "blog" collection
          CMS.registerPreviewTemplate("blog", BlogPreview);
          CMS.registerPreviewStyle("/admin/decap-preview-styles.css");
      </script>
  </body>

I use thais code instead of https://github.com/CodeStitchOfficial/Intermediate-Website-Kit-SASS/blob/main/src/admin/index.html

Thank me later

Oct 31 '25 14:10 norbertorok92