0

I have a custom block that uses a render function which works fine for the front end but the as soon as I add <ServerSideRender /> to the edit function of my block it just errors out with This block has encountered an error and cannot be previewed. and doesn't show any of the sidebar controls either.

This is my edit function:

edit: function ({attributes, setAttributes}) {
    const blockProps = useBlockProps()
    
    const data = JSON.parse(attributes.data)

    const saveData = () => {
      setAttributes({data: JSON.stringify(data)})
    }

    return <div>
      <InspectorControls>
        // Snip
      </InspectorControls>
      <div { ...blockProps }>
        <ServerSideRender block="lhs-theme/feature-boxes" attributes={attributes} />
      </div>
    </div>
  },

I can't see any requests in the network tab that look like it trying to hit the render function.

The Dev Console logs this error:

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
6
  • what is the error message in your browsers dev tools console for this problem? Also it's very unusual to store your data in a JSON string that then gets stored in an attribute and serialised into JSON by the editor. If you're trying to store repeatable content inside a block then structured data inside an attribute is a huge anti-pattern/mistake, the solution for that is nested blocks/innerblocks, much in the same way that for HTML the solution is nested tags. See how Columns and Column blocks work for an example.
    – Tom J Nowell
    Oct 11, 2023 at 11:57
  • That would only work for me if there is a way to sort nested blocks. I want to display a list of items in alphabetical order. One of the reasons for this rewrite is to get away from the horrific nightmare of managing our Elementor site that requires you to copy and replace every box after the one you want to add.
    – Arcath
    Oct 11, 2023 at 12:12
  • Are you defining ServerSideRender anywhere? Depending on your build process you either need to import it or get it from the global wp variable. Oct 11, 2023 at 13:45
  • I'm importing it, and used a good old console.dir to prove that its a react element.
    – Arcath
    Oct 11, 2023 at 13:55
  • where's the PHP code? Note that the error it's reporting may be a PHP error, not a JS error, and this would be the block editors way of indicating the server responded with HTTP 500. Right now there isn't enough information in the question to answer it. Do you have a stack trace for the error you added to your question? Are you sure there are no errors or messages before or after it?
    – Tom J Nowell
    Oct 11, 2023 at 13:57

1 Answer 1

0

After some digging I found that I had a left over save function on my block that was throwing an error.

I removed that and ensured that wp-server-side-render was in the script deps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.