npm start printing an empty screen

Question

I am trying to print my app component from the index file, and for some reason it prints nothing. This is my index.js file (created automatically by npx create-react-app):

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>

);

and this is my App.js:

import "./general.css";
import IntIsland from "./components/interactiveIsland";
import Home from "./paginas/Home";
import Education from "./paginas/Education";
import Portfolio from "./paginas/Portfolio";
import Contact from "./paginas/Contact";

function App() {
  return (
    <div>
      <IntIsland />
      <div className="todo" id="todo">
        <Home />
        <Education />
        <Portfolio />
        <Contact />
      </div>
    </div>
  );
}

export default App;

The weird thing here is, when I delete all the components inside App.js and start putting them one by one, saving the file everytime I add a new component, it actually works and prints the page, but when I refresh the localhost it goes back to blank. This makes me assume the problem isn't about the components inside the App.js, but about the render or reactDOM. I've tried following the instructions of other posts similar to this one but none of them worked.

my package.json:

{
  "name": "portfolio-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "node-sass": "^7.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.3",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

These are the two errors showing in the browser:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Warning: Invalid DOM property for. Did you mean htmlFor?

The first one happens because since nothing is being printed, there's nothing to listen. The second I don't know what it means.

Here's the code that triggers the first error:

 const todo = document.getElementById("todo");
  var lastScrollTop = 0;

  todo.addEventListener("scroll", scrollDetection);

  function scrollDetection() {
    var st = this.scrollTop();
    if (st > lastScrollTop) {
      console.log("GOING DOWN");
    } else {
      console.log("GOING UP");
    }
    lastScrollTop = st;
  }`

You added `react-router` in the list of tags. Are you using it ? If yes, please show us the code — Weedoze, Nov 03 '22 at 13:22
Does this answer your question? [Blank page after running build on create-react-app](https://stackoverflow.com/questions/55568697/blank-page-after-running-build-on-create-react-app) — Weedoze, Nov 03 '22 at 14:23
Unfortunately not, the thing is I want to show all the components on a single page so I think I don't really have to use react-router. I've uploaded my package.json just in case it may give more information. — Javi Gauxachs Monserrat, Nov 03 '22 at 14:46
So, in one of your components you seem to be using `addEventListener` can you post the relevant code ? Because you seem to be trying to attach an event handler to an element that is not in the DOM yet — Gabriele Petrioli, Nov 03 '22 at 14:58
This was the issue. I didn't know an error like this one could prevent the entire page from rendering! How could it be done then? — Javi Gauxachs Monserrat, Nov 03 '22 at 15:07
javascript's errors, if not handled, will stop the execution of the javascript. So in this case it would stop the rendering of the components. Why don't you move the scrolling code in the `App` component, since that is where you use it really, and also do the `addEventListener` inside a [`useEffect`](https://reactjs.org/docs/hooks-effect.html). Finally you should use a [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) to get access to the `todo` element, instead of using `getElementById`. — Gabriele Petrioli, Nov 03 '22 at 15:13

npm start printing an empty screen

0 Answers0