从React 15.6.2更新到16 Breaks Web Application

时间:2018-04-28 19:35:26

标签: javascript reactjs npm create-react-app react-bootstrap

目前的行为是我的index.js都没有被渲染。当我使用react-scripts在16.2.0中构建Web应用程序时,当我访问localhost地址时,我得到一个r.PropTypes是未定义的错误。我认为这是因为PropTypes在15.5之后被弃用并且在16中被删除,但是我不能在我的生活中弄清楚是什么叫这个。它位于main的一些奇怪部分。########。js在create-react-app构建之后。我已经尝试更新所有其他依赖项,但是一旦我更新到React 16就没有骰子。应用程序在15.6.2中正常工作。

我正在使用NPM,这是我的package.json:

{
  "name": "node-wf",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "create-react-app": "^1.5.2",
    "halogen": "^0.2.0",
    "prop-types": "^15.6.1",
    "react": "^16.3.0",
    "react-bootstrap": "^0.32.1",
    "react-bootstrap-toggle": "^2.3.1",
    "react-contenteditable": "^2.0.7",
    "react-dom": "^16.3.0",
    "react-split-pane": "^0.1.77",
    "react-textarea-autosize": "^6.1.0"
  },
  "devDependencies": {
    "react-scripts": "^1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001/"
}

我还使用了一些用于jQuery,Bootstrap 3.3.7,Bootstrap切换和绘图的CDN脚本。我不确定这些是否存在兼容性问题?

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您将无法找到导致错误的呼叫。您的浏览器开发工具可以提供很大的帮助:我确信Chrome和Firefox包含一个"暂停未捕获的例外"分别在Source / Debugger选项卡中的按钮

Screenshot for how that looks on firefox

打开该选项后,刷新页面,调试器应在异常即将抛出时暂停 - 然后通过调用堆栈直到找到源代码中的主调用方。我的猜测是罪魁祸首文件是从R​​eact导入PropTypes而不是prop-types包。

希望这有帮助!

修改

azium提出了一个很好的建议,即确保使用npm run start运行开发构建 - 这应该保持清晰的源映射,以便您可以拥有更清晰的堆栈跟踪和源代码来查看