Adding InlineBlocks per tutorial gives error "Element type is invalid"

Following the “Working with Inline Blocks” tutorial, I get up to Convert Hero to a Block | TinaCMS Docs , but when I run yarn start, I don’t see the “plus” icon at the bottom of the page as expected, and when I click anywhere in the “hero” block, all page content disappears, and I see this in the console:

index.js:1 Warning: React.createElement: 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.
    in Unknown (at Hero.js:22)
    in Component (created by nn)
    in nn (created by ForwardRef(Field))
    in div (created by w)
    in w (created by ForwardRef(Field))
    in ForwardRef(Field) (created by y)
    in y
    in Unknown (at Home.js:24)
    in ReactFinalForm (created by a)
    in a
    in div
    in div
    in Unknown
    in Unknown (at Home.js:23)
    in div (at Home.js:22)
    in Home (at App.js:15)
    in Unknown (created by xn)
    in xn (at App.js:14)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)
console.<computed> @ index.js:1
printWarning @ react.development.js:315
error @ react.development.js:287
createElementWithValidation @ react.development.js:1788
n.BlocksControls @ index.js:1
renderWithHooks @ react-dom.development.js:14803
updateFunctionComponent @ react-dom.development.js:17034
beginWork @ react-dom.development.js:18610
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22157
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
index.js:1 Warning: React.createElement: 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.
    in Unknown (at Hero.js:22)
    in Component (created by nn)
    in nn (created by ForwardRef(Field))
    in div (created by w)
    in w (created by ForwardRef(Field))
    in ForwardRef(Field) (created by y)
    in y
    in Unknown (at Home.js:24)
    in ReactFinalForm (created by a)
    in a
    in div
    in div
    in Unknown
    in Unknown (at Home.js:23)
    in div (at Home.js:22)
    in Home (at App.js:15)
    in Unknown (created by xn)
    in xn (at App.js:14)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)
console.<computed> @ index.js:1
printWarning @ react.development.js:315
error @ react.development.js:287
createElementWithValidation @ react.development.js:1788
n.BlocksControls @ index.js:1
renderWithHooks @ react-dom.development.js:14803
updateFunctionComponent @ react-dom.development.js:17039
beginWork @ react-dom.development.js:18610
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22157
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
react-dom.development.js:23965 Uncaught 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.
    at createFiberFromTypeAndProps (react-dom.development.js:23965)
    at createFiberFromElement (react-dom.development.js:23988)
    at reconcileSingleElement (react-dom.development.js:14233)
    at reconcileChildFibers (react-dom.development.js:14293)
    at reconcileChildren (react-dom.development.js:16762)
    at updateHostComponent (react-dom.development.js:17302)
    at beginWork (react-dom.development.js:18627)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at discreteUpdates$1 (react-dom.development.js:21893)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)
createFiberFromTypeAndProps @ react-dom.development.js:23965
createFiberFromElement @ react-dom.development.js:23988
reconcileSingleElement @ react-dom.development.js:14233
reconcileChildFibers @ react-dom.development.js:14293
reconcileChildren @ react-dom.development.js:16762
updateHostComponent @ react-dom.development.js:17302
beginWork @ react-dom.development.js:18627
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22157
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
index.js:1 The above error occurred in the <div> component:
    in div (created by BlockAction)
    in BlockAction
    in div (created by BlockMenu)
    in BlockMenu
    in div (created by BlockMenuWrapper)
    in BlockMenuWrapper
    in div (created by StyledFocusRing)
    in StyledFocusRing
    in Unknown (at Hero.js:22)
    in Component (created by nn)
    in nn (created by ForwardRef(Field))
    in div (created by w)
    in w (created by ForwardRef(Field))
    in ForwardRef(Field) (created by y)
    in y
    in Unknown (at Home.js:24)
    in ReactFinalForm (created by a)
    in a
    in div
    in div
    in Unknown
    in Unknown (at Home.js:23)
    in div (at Home.js:22)
    in Home (at App.js:15)
    in Unknown (created by xn)
    in xn (at App.js:14)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
update.callback @ react-dom.development.js:20708
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19883
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
react-dom.development.js:23965 Uncaught 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.
    at createFiberFromTypeAndProps (react-dom.development.js:23965)
    at createFiberFromElement (react-dom.development.js:23988)
    at reconcileSingleElement (react-dom.development.js:14233)
    at reconcileChildFibers (react-dom.development.js:14293)
    at reconcileChildren (react-dom.development.js:16762)
    at updateHostComponent (react-dom.development.js:17302)
    at beginWork (react-dom.development.js:18627)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at discreteUpdates$1 (react-dom.development.js:21893)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

I pushed the exact code that gives me this error, to a new repo at GitHub - Jaza/tina-nextjs-github-test: TinaCMS with Next.js and GitHub test . Anyone should be able to reproduce the same error by cloning that repo and running the app.

src/index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

src/App.js :

import React from 'react';
import { TinaProvider, TinaCMS } from 'tinacms';
import Home from './Home';
import DummyMediaStore from './mediaStore';

function App() {
  const cms = new TinaCMS({
    enabled: true,
    toolbar: true,
    media: new DummyMediaStore(),
  });

  return (
    <TinaProvider cms={cms}>
      <Home />
    </TinaProvider>
  );
}

export default App;

src/Home.js :

import React from 'react'
import { useForm, usePlugin, useCMS } from 'tinacms'
import { InlineForm, InlineBlocks } from 'react-tinacms-inline'
import { heroBlock } from './components/Hero'
import data from './data/data.json'

export default function Home() {
  const cms = useCMS()

  const formConfig = {
    id: './data/data.json',
    initialValues: data,
    onSubmit() {
      cms.alerts.success('Saved!')
    },
  }

  const [, form] = useForm(formConfig)
  usePlugin(form)

  return (
    <div className="home">
      <InlineForm form={form}>
        <InlineBlocks name="blocks" blocks={HOME_BLOCKS} />
      </InlineForm>
    </div>
  )
}

const HOME_BLOCKS = {
  hero: heroBlock,
}

src/components/Hero.js :

import React from 'react'
import { InlineTextarea, BlocksControls } from 'react-tinacms-inline'
import '../styles/hero.css'

export function Hero() {
  return (
    <div className='hero'>
      <div className='wrapper wrapper--narrow'>
        <h1>
          <InlineTextarea name="headline" />
        </h1>
        <p>
          <InlineTextarea name="subtext" />
        </p>
      </div>
    </div>
  );
}

export const heroBlock = {
  Component: ({ index }) => (
    <BlocksControls index={index}>
      <Hero />
    </BlocksControls>
  ),
  template: {
    label: 'Hero',
    defaultItem: {
      headline: 'Suspended in a Sunbeam',
      subtext: 'Dispassionate extraterrestrial observer',
    },
    fields: [],
  },
}

I’m new to React and to TinaCMS. Am I missing something obvious?

Ah-ha, finally got it working! A simple yarn upgrade --latest did the trick. Now the “plus” icon shows, and when I click it, another hero block is added to the page, as expected.

You can see here exactly the version upgrades performed by yarn, that resolved it for me: yarn upgrade --latest does the trick · Jaza/tina-inline-blocks-test@cceadb2 · GitHub .

Submitted PRs to fix the tutorial at yarn upgrade --latest for master by Jaza · Pull Request #8 · tinacms/inline-blocks-demo · GitHub and yarn upgrade --latest for final-state by Jaza · Pull Request #9 · tinacms/inline-blocks-demo · GitHub .

1 Like