Nested blocks with NextJS and Github form not working for me

I’m building a Github backed Next JS page builder experience.

I’m having trouble setting up with Nested Blocks. I have the error which seems to be coming from _document.tsx, which makes me think it is NextJS related.

I have a section block with a title and markdown content. This setup works. Now, I want to add blocks at the highlighted area.

I created a super simple title block to add to test out the system, which works when I add it as a top level block.

Once I try to add InlineBlocks inside of the block, the error comes up.

Section Block Code

import React from "react";
import { InlineTextarea, BlocksControls } from "react-tinacms-inline";
import { InlineWysiwyg, InlineBlocks, InlineForm } from "react-tinacms-editor";
import { titleBlock } from "../blocks/title";

// ... other imports

function InformationSection({ index, data }) {
  return (
    <BlocksControls index={index} focusRing={{ offset: 0 }} insetControls>
      <Flex pt={5} pb={14}>
        <Heading>
          <InlineTextarea name="title" focusRing={false} />
        </Heading>
        <Box>
          <InlineWysiwyg
            name="content"
            format="markdown"
            sticky={false}
            focusRing={true}
          >
            <ReactMarkdown source={data.content} renderers={renderers} />
          </InlineWysiwyg>
          <Box>
            <InlineBlocks name="sectionBlocks" blocks={SECTION_BLOCKS} />
          </Box>
        </Box>
      </Flex>
    </BlocksControls>
  );
}

const SECTION_BLOCKS = {
  title: titleBlock
};

export const sectionBlock = {
  Component: InformationSection,
  template: {
    label: "Information Section",
    defaultItem: {
      _template: "section",
      title: "Test title",
      content: "Some content",
      sectionBlocks: [
        {
          _template: "title",
          title: "Hello there Title",
        },
      ],
    },
    fields: [],
  },
};

Title block

import React from "react";
import { InlineTextarea, BlocksControls } from "react-tinacms-inline";

function Title() {
  return <InlineTextarea name="title" focusRing={false} />
}

export const titleBlock = {
  Component: ({ index, data }) => (
    <BlocksControls index={index}>
      <Title {...data} />
    </BlocksControls>
  ),
  template: {
    label: "Title",
    defaultItem: {
      title: "The title",
    },
    fields: [],
  },
};

Error

# Server Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

<small>This error happened while generating the page. Any console logs will be displayed in the terminal window.</small>

##### Source

###### ReactDOMServerRenderer.render

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/react-dom/cjs/react-dom-server.node.development.js (4053:17)

###### ReactDOMServerRenderer.read

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/react-dom/cjs/react-dom-server.node.development.js (3690:29)

###### renderToString

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/react-dom/cjs/react-dom-server.node.development.js (4298:27)

###### Object.renderPage

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/next/dist/next-server/server/render.js (54:851)

../../pages/_document.tsx (89:33) @ Function.getInitialProps

87 | } 88 | > 89 | const { html, head } = await ctx.renderPage({ enhanceApp }) | ^ 90 | const styles = [...flush()] 91 | return { html, head, styles } 92 | }

##### Call Stack

###### loadGetInitialProps

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/next/dist/next-server/lib/utils.js (5:101)

###### renderToHTML

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/next/dist/next-server/server/render.js (54:1142)

###### runMicrotasks

<anonymous>

###### processTicksAndRejections

internal/process/task_queues.js (97:5)

###### async

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/next/dist/next-server/server/next-server.js (109:97)

###### async

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/next/dist/next-server/server/next-server.js (102:142)

###### async DevServer.renderToHTMLWithComponents

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/next/dist/next-server/server/next-server.js (134:387)

###### async DevServer.renderToHTML

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/next/dist/next-server/server/next-server.js (135:522)

###### async DevServer.renderToHTML

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/next/dist/server/next-dev-server.js (34:578)

###### async DevServer.render

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/next/dist/next-server/server/next-server.js (72:236)

###### async Object.fn

file:///Users/tudvari/Developer/2021/tech-center-website/node_modules/next/dist/next-server/server/next-server.js (56:580)

Hide collapsed frames![Screenshot 2021-03-26 at 14.18.02|690x185](upload://nxpno7gNKhvv43fowBvU0OjVGpE.png)

Szia,

Try making sure component is lower case in your block definitions.

Joe

Szia,

I’m tried, but I’m still getting this error at getInitialProps.

In the documentation, the component field seems to be uppercase as well. I’m guessing this is what you meant.

I think another way for me to debug would be to have a working project with nextjs and nested blocks. I don’t know if there is a project with that floating out there.

// 2. Define the block component with Hero
export const heroBlock = {
  Component: ({ index }) => (
    <BlocksControls index={index}>
      <Hero />
    </BlocksControls>
  ),
  template: {},
}

Hmm, it’s a bit odd for sure - there seems to be some inconsistency around this across Tina, but looks like the Component version is preferred:

Anyway, back to business, that error means Next is trying to render something which is undefined, which suggests you’ve got a spelling mistake somewhere, but I can’t see it. Do you have a repo for this project?

I mirrored my repository over here

OK, so I cloned it and I can reproduce the issue, but I’m not sure yet what the cause is. I will keep looking tomorrow.

1 Like

Thanks, I’ve been trying all day today, really not clear for me how to debug this.

Still not sure why it doesn’t work, but it seems if I move everything into a single file, it works:

Hopefully that’ll help…

Thanks! I’ve refactored it twice over as well. Finished by working. I think what might have caused the issue was my import statements, where I erroneously imported from react-tinacms-editor instead of react-tinacms-inline.

import { InlineTextarea, BlocksControls } from "react-tinacms-inline";
import { InlineWysiwyg, InlineBlocks, InlineForm } from "react-tinacms-editor";