为什么 GitHub 页面不显示我的 React Redux Todo Web 应用程序

Question

I wrote a simple React Redux Todo webapp, this is its GitHub repository ; it works fine on my desktop but when I publish it to GitHub pages all I get is a blank page. Interestingly, I added a few console.log statements as page elements are rendered, they show up on the Console, but their page fragments do not.

I used the instructions in the Create React App Deployment page, specifically the ones in the GitHub Pages section .

Not the homepage attribute, predeploy and deploy scritps, and the gh-pages development dependency in the following is my package.json file:

{
  "name": "react_todo",
  "author": "Rodrigo Silveira",
  "version": "0.2.0",
  "homepage": "https://rodrigomattososilveira.github.io/react-redux-todo/",
  "private": true,
  "license": "MIT",
  "dependencies": {
    "@material-ui/core": "^4.9.11",
    "@material-ui/icons": "^4.9.1",
    "classnames": "^2.2.6",
    "material-table": "^1.57.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "shortid": "^2.2.15",
    "typeface-roboto": "^0.0.75"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "yarn run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "@types/shortid": "^0.0.29",
    "gh-pages": "^2.2.0",
    "typescript": "~3.7.2"
  }
}

A

Also note that I have a React Todo application that I was able to publish to its own GitHub Pages using the exact same recipe I'm using for its [React Redux Todo( https://github.com/RodrigoMattosoSilveira/react-redux-todo ) cousin.

Answer 1

How to debug a React application?

In this case, since the error only happened once in production (deployed on Github Pages), it may seem hard to find the source.

First step is to look for error in the console, which there was:

Uncaught Error: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Component for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

The full error message from the link is:

Component(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

The next step is to figure out how to reproduce the error easily (and hopefully, locally).

With Create-React-App, you can manually make a production build with yarn build . It will compile the final static files into the ./build directory. Then, you can start any simple HTTP server on your local machine. Personally, I use http-server which I have installed globally as a quick debug tool!

yarn build
http-server ./build

And you should be able to see the same thing as if it was on Github Pages, but from http://127.0.0.1:8080/ by default.

The last step is the search for the culprit code. There are possibly better ways to do this, but here's a way that always work. Start with the most minimal code, so comment out all of your own code.

const Root = () => (
  <Provider store={store}>
    {/* <TodoApp /> */}
  </Provider>
);

Then test the build again. If it works, it means the problem is within <TodoApp /> . If it doesn't work, it means the problem comes from elsewhere (maybe a configuration, etc).

Now in TodoApp , continue this process: comment half of the component, test the build, rince and repeat until you narrow your search to the last place the problem is happening.

This is just a simple binary search applied in a debugging context.

---

What was wrong in your code?

That said, I took the time to test the repository and the problem comes from the TodoForm component .

 return ( // <div className="todo-form"> // <input // ref={inputRef} // type="text" // placeholder='Enter new todo' // onChange={event => handleInputOnChange(event)} // onKeyPress={event => handleInputOnKeyPress(event)} // /> // </div> <div className={classes.root} style={{marginTop: '10px', marginBottom: '10px'}}> <form noValidate autoComplete="off"> <div>

The comments at the start of this JSX block are possibly transformed incorrectly in the final build, meaning that the component is missing a valid return value.

The fix is only to remove these comments.