Error when exporting liveRemarkForm

Hi - I followed the tutorial steps here: https://www.gatsbyjs.org/blog/2019-12-20-integrate-tinacms-with-your-gatsby-website/

Everything was working perfectly until I came to integrate inline editing. When changing

export default remarkForm(IndexPage, IndexPageForm);

to

export default liveRemarkForm(IndexPage, IndexPageForm);

I get

×

TypeError: Object(...) is not a function

Module.<anonymous>

src/templates/home-page.js:274

```
  271 |   ],  272 | };  273 | > 274 | export default liveRemarkForm(IndexPage, IndexPageForm);  275 |   276 | export const pageQuery = graphql`  277 |   query IndexPageTemplate {
```

Any suggestions here?

1 Like

I think it’s just useForm now, with a hook rather than a HOC, and you wrap around your content?

Would you mind elaborating a little on what you mean… in the context of:

So something like


//...
import { useForm, usePlugin } from 'tinacms'
import { InlineForm } from 'react-tinacms-inline'
import ReactMarkdown from 'react-markdown'
//...
const BlogPost = ({ data }) => {
    const { markdownRemark: post } = data
    const [post, form] = useForm(data)
    usePlugin(form)

    return (
        <InlineForm form={form}>
            <BlogPostTemplate
                description={post.frontmatter.description}
                helmet={
                    <Helmet titleTemplate="%s | Blog">
                        <title>{`${post.frontmatter.title}`}</title>
                        <meta
                            name="description"
                            content={`${post.frontmatter.description}`}
                        />
                    </Helmet>
                }
                tags={post.frontmatter.tags}
                title={post.frontmatter.title}
                date={post.frontmatter.date}
                content={post.frontmatter.postContent}
                featuredImage={post.frontmatter.featuredimage}
                blogCtaTitle={post.frontmatter.blogCtaTitle}
                blogCtaText={post.frontmatter.blogCtaText}
                blogCtaButtonText={post.frontmatter.blogCtaButtonText}
                blogCtaButtonTarget={post.frontmatter.blogCtaButtonTarget}
                metaTitle={post.frontmatter.metaTitle}
            />
        </InlineForm>
    )
}

Then you need to wrap each section in the kind of <Inline[type]></Inline[type]> you want.

<InlineWysiwyg name="markdownBody" format="markdown">
        <ReactMarkdown source={data.markdownBody} />
 </InlineWysiwyg>

inlineRemarkForm (formerly liveRemarkForm) was deprecated in favor of a different inline editing API via the react-tinacms-inline package.

So the information in the gatsby blog example is out of date. You can reference the Inline Editing documentation to learn more about the current API. Let us know if you have more quesitons!

Hi Lauren, thanks for the suggestion. I am struggling to get this work with the structure of this document. Implementing your suggestion exactly yields:

  120:10  error  Parsing error: Identifier 'post' has already been declared

  118 | const BlogPost = ({ data }) => {
  119 |   const { markdownRemark: post } = data
> 120 |   const [post, form] = useForm(data)
      |          ^
  121 |   usePlugin(form)
  122 | 
  123 |   return (

You can see the file on a branch here: https://github.com/larpo1/lavanda-website/blob/tina/src/templates/blog-post.js

That’s because post is being declared twice. Also, when using the useForm hook, you’ll need to pass a form configuration object, not just the data. Another reference documenting useForm is in the introductory tutorial.