Как исправить код chatkit с неопределенным содержимым jsx?

Question

Я настраиваю пакет chatkit-direct-messenger из pusher с atom и node.js. И я следую данному уроку. Но теперь, когда я хочу подключиться к localhost с запуском npm, я показываю "Ошибка синтаксического анализа: неопределенное содержимое JSX" как реакцию.

Это ошибка:

Строка 100: ошибка синтаксического анализа: неопределенное содержимое JSX

   98 |               ) : null}
   99 |             </aside>
> 100 |           </div>
      |                 ^
  101 |       );
  102 |       }
  103 |     }


import React, { Component } from 'react';
    // [..]
    import {
      handleInput,
      connectToChatkit,
      connectToRoom,
    } from './methods';
    import Dialog from './components/Dialog';
      import RoomList from './components/RoomList';

    import 'skeleton-css/css/normalize.css';
    import 'skeleton-css/css/skeleton.css';
    import './App.css';

    class App extends Component {
      constructor() {
        super();
        this.state = {
          userId: '',
          showLogin: true,
          isLoading: false,
          currentUser: null,
          currentRoom: null,
          rooms: [],
          roomUsers: [],
          roomName: null,
          messages: [],
          newMessage: '',
        };

        this.handleInput = handleInput.bind(this);
        this.connectToChatkit = connectToChatkit.bind(this);
        this.connectToRoom = connectToRoom.bind(this);
      }
      render() {
        const {
          userId,
          showLogin,
          rooms,
          currentRoom,
          currentUser,
          messages,
          newMessage,
          roomUsers,
          roomName,
        } = this.state;



        return (
          <div className="App">
            <aside className="sidebar left-sidebar">
              {currentUser ? (
                <div className="user-profile">
                  <span className="username">{currentUser.name}</span>
                  <span className="user-id">{`@${currentUser.id}`}</span>
                </div>
              ) : null}

              {currentRoom ? (
             <RoomList
               rooms={rooms}
               currentRoom={currentRoom}
               connectToRoom={this.connectToRoom}
               currentUser={currentUser}
             />
           ) : null}

         </aside>
         <section className="chat-screen">
         // update `.chat-header`
          <header className="chat-header">
             {currentRoom ? <h3>{roomName}</h3> : null}
           </header>

            <section className="chat-screen">
            <header className="chat-header"></header>
            <ul className="chat-messages"></ul>
            <footer className="chat-footer">
              <form className="message-form">
                <input
                  type="text"
                  name="newMessage"
                  className="message-input"
                  placeholder="Type your message and hit ENTER to send"
                />
              </form>
            </footer>
            </section>

            <aside className="sidebar right-sidebar">
              {showLogin ? (
                <Dialog
                  userId={userId}
                  handleInput={this.handleInput}
                  connectToChatkit={this.connectToChatkit}
                />
              ) : null}
            </aside>
          </div>
      );
      }
    }

кто-нибудь знает, как мне помочь?