React - 错误：目标容器不是 DOM 元素

Question

I just got started using React so this is probably a very simple mistake, but here we go. The following code throws me always the following message: Error: Target container is not a DOM element. Furthermore it indicates that there's something wrong with the last line (render). I'm working through a tutorial for LinguiJS and I use their code so I'm confused why this is not working.

I tried replacing render by ReactDOM.render and adapted the import consequently, but I received the same error. Any help would be highly appreciated!

//index.js

import React from 'react'
import { render } from 'react-dom'
import Inbox from './Inbox.js'
import catalogCs from './locales/cs/messages.js'

import { I18nProvider } from '@lingui/react'

const catalogs = { cs: catalogCs };
const App = () => (
  <I18nProvider language="cs" catalogs={catalogs}>
    <Inbox />
  </I18nProvider>
)

render(<App />, document.getElementById('app'))

Second file:

//Inbox.js
import React from 'react'
import { Trans } from '@lingui/macro'
import {Link} from 'react-router-dom';


const Inbox = ({ messages, markAsRead, user }) => {
   const messagesCount = messages.length
   const { name, lastLogin } = user

   return (
      <div>
        <h1><Trans>Message Inbox</Trans></h1>

        <p>
          <Trans>
          See all <Link to="/unread">unread messages</Link>{" or "}
          <a onClick={markAsRead}>mark them</a> as read.
          </Trans>
        </p>

        <p>
          {
            messagesCount === 1
              ? `There's ${messagesCount} message in your inbox.`
              : `There're ${messagesCount} messages in your inbox.`
          }
        </p>

        <footer>
          Last login on {lastLogin}.
        </footer>
      </div>
   )
}

export default Inbox;

Answer 1

I found the answer to my question. It's rather simple; the in index.html was id=root , thus I only had to change render(<App />, document.getElementById('app')) to render(<App />, document.getElementById('root'))