Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

150
Views
My react app is showing a blank page on localhost

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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You made a typo within index.js

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

A message in the console should show you an error

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!