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

Question

我写了一个简单的 React Redux Todo webapp，这是它的GitHub repository；它在我的桌面上运行良好，但是当我将它发布到GitHub pages 时，我得到的只是一个空白页。有趣的是，我在渲染页面元素时添加了一些 console.log 语句，它们显示在控制台上，但它们的页面片段没有。

我使用了Create React App Deployment 页面中的说明，特别是GitHub Pages section 中的说明。

不是homepage属性，predeploy和deploy脚本，下面gh-pages开发依赖是我的package.json文件：

{
  "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"
  }
}

一个

另外请注意，我有一个 React Todo application，我可以使用与 [React Redux Todo(https://github.com/RodrigoMattosoSilveira/react-redux-todo) 表亲完全相同的配方将其发布到它自己的 GitHub Pages。

Answer 1

如何调试 React 应用程序？

在这种情况下，由于错误只在生产中发生过一次（部署在 Github Pages 上），因此似乎很难找到源头。

第一步是在控制台中查找错误，其中有：

未捕获的错误：缩小的 React 错误 #152；访问https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Component 获取完整消息或使用非缩小开发环境获取完整错误和其他有用的警告。

链接中的完整错误消息是：

Component(...): 渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

下一步是弄清楚如何轻松（希望在本地）重现错误。

使用 Create-React-App，您可以使用 yarn build 手动进行生产构建。它将最终的静态文件编译到./build 目录中。然后，您可以在本地计算机上启动任何简单的 HTTP 服务器。就我个人而言，我使用已在全球范围内安装的http-server 作为快速调试工具！

yarn build
http-server ./build

您应该能够看到与在 Github 页面上相同的内容，但默认来自 http://127.0.0.1:8080/。

最后一步是寻找罪魁祸首代码。可能有更好的方法可以做到这一点，但这是一种始终有效的方法。从最小的代码开始，所以注释掉你自己的所有代码。

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

然后再次测试构建。如果有效，则表示问题在<TodoApp /> 内。如果它不起作用，则意味着问题来自其他地方（可能是配置等）。

现在在TodoApp，继续这个过程：注释一半的组件，测试构建，rince 并重复，直到你将搜索范围缩小到问题发生的最后一个地方。

这只是在调试上下文中应用的简单二进制搜索。

---

你的代码有什么问题？

也就是说，我花时间测试了存储库，问题来自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>

这个 JSX 块开头的 cmets 可能在最终构建中被错误地转换，这意味着组件缺少有效的返回值。

修复只是删除这些 cmets。