My react app is showing a blank page on localhost-CodePudding

In my chat application folder, I have a client\my-app and a server folder. In the client folder, I have other folders called node modules, public, and src. I also have a .gitignore, package-lock.json, package.json, and readme.md. Within the src, I have a components folder, an App.jsx, and an index.js. Within the components folder, I have a ChannelContainer.jsx, a ChannelListContainer.jsx, and an index.js.

This is my App.jsx

import React from 'react';

import { StreamChat } from 'stream-chat';
import { Chat } from 'stream-chat-react';

import Cookies from 'universal-cookie';

import { ChannelListContainer, ChannelContainer } from './components';

const apiKey = '98dzy6uqhm8m';

const client = StreamChat.getInstance(apiKey);

console.log("hi")

const App = () => {
    return (
        <div className="app__wrapper">
            <Chat client={client} theme="team light">
                <ChannelListContainer
                    
                    />
                <ChannelContainer
                    />
            </Chat>
            
            </div>
    );
}

export default App;

This is the index.js that is in the src folder:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

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

This is the index.js that is in the components folder:

export { default as ChannelContainer } from './ChannelContainer';
export { default as ChannelListContainer } from './ChannelListContainer';

This is the ChannelListContainer.jsx:

import React from 'react';

console.log("hi")

const ChannelListContainer = () => {
    return (
        <div>
            ChannelListContainer
            </div>
    );
}

export default ChannelListContainer;

This is the ChannelContainer:

import React from 'react';

console.log("hi")
const ChannelContainer = () => {
    return (
        <div>
            ChannelContainer
            </div>
    );
}

export default ChannelContainer;

I've googled for hours. I added a "homepage": "./", in my package.json in between "private": true, and "dependencies": { but that didn't help. I cd into the client folder, then the my-app folder. Then I do npm start but the create-react-app page is blank even though the terminal says that it compiled successfully. I even put console.log("hi") everywhere but nothing shows up on the screen.

Edited: I fixed ID to Id, but the page is still blank.

CodePudding user response：

You made a typo within index.js

Replace document.getElementByID() with document.getElementById()

A message in the console should show you an error