在 Netlify 上使用 CI 部署时反应错误,但如果从 CLI 部署则工作正常?

React errors when deployed with CI on Netlify but works fine if deployed from CLI?

我能够使用 Netlify CLI 部署我的网站,一切都很好。当我尝试设置持续集成时,我没有收到构建错误,但是当我访问该站点时,React 抛出错误:

Error: Minified React error #130 https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=

使用 CLI 的步骤:

  1. 运行 'npm run build' 来自项目根目录
  2. cd 到 'build'
  3. 运行 'netlify deploy'
  4. 当我看到此消息时选择是:未指定站点 ID,创建一个新站点 (Y/n)
  5. 当我看到这个时按回车键:要部署的路径? (当前目录)

如果我单击 link,前提是网站看起来不错并且控制台中没有错误。

这是我的 netlify.toml 文件:

[Settings]
  ID = "MyProject"

# Settings in the [build] context are global and are applied to all contexts unless otherwise overridden by more specific contexts.  

[build]
# This is the directory that you are publishing from (relative to root of your repo)
  publish = "build"
# This will be your default build command
  command = "npm run build"
  1. 登录到 Netlify 我选择 "new site from git" 并选择我的 repo 和分支
  2. 我将构建命令和发布目录字段留空,因为它们将被 netlify.toml 文件覆盖。 (为了确定,我尝试输入与 netlify.toml 中相同的值)

这是日志:

9:00:14 AM: Build ready to start
9:00:16 AM: Fetching cached dependencies
9:00:17 AM: Failed to fetch cache, continuing with build
9:00:17 AM: Starting to prepare the repo for build
9:00:17 AM: No cached dependencies found. Cloning fresh repo
9:00:17 AM: git clone git@github.com:myname/project
9:00:18 AM: Preparing Git Reference refs/heads/master
9:00:19 AM: Found netlify.toml. Overriding site configuration
9:00:19 AM: Starting build script
9:00:19 AM: Installing dependencies
9:00:20 AM: v8.9.4 is already installed.
9:00:21 AM: Now using node v8.9.4 (npm v5.6.0)
9:00:21 AM: Attempting ruby version 2.3.6, read from environment
9:00:22 AM: Using ruby version 2.3.6
9:00:22 AM: Using PHP version 5.6
9:00:22 AM: Started restoring cached node modules
9:00:22 AM: Finished restoring cached node modules
9:00:22 AM: Started restoring cached yarn cache
9:00:22 AM: Finished restoring cached yarn cache
9:00:23 AM: Installing yarn at version 1.3.2
9:00:23 AM: Installing Yarn!
9:00:23 AM: > Downloading tarball...
9:00:23 AM: [1/2]: https://yarnpkg.com/downloads/1.3.2/yarn-v1.3.2.tar.gz --> /tmp/yarn.tar.gz.PPdZXZ4deY
9:00:23 AM:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
9:00:23 AM:                                  Dload  Upload   Total   Spent    Left  Speed
9:00:23 AM: 
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
100    91  100    91    0     0   1387      0 --:--:-- --:--:-- --:--:--  1400
9:00:23 AM: 
  0     0    0   608    0     0
9:00:23 AM: 2313      0 --:--:-- --:--:-- --:--:--  2313
9:00:23 AM: 
 39  865k   39  338k    0     0   440k
9:00:23 AM:     0  0:00:01 --:--:--  0:00:01  440k
9:00:23 AM: 
100  865k  100  865k    0     0   880k      0 --:--:-- --:--:-- --:--:-- 2451k
9:00:23 AM: [2/2]: https://yarnpkg.com/downloads/1.3.2/yarn-v1.3.2.tar.gz.asc --> /tmp/yarn.tar.gz.PPdZXZ4deY.asc
9:00:23 AM: 
100    95  100    95    0     0   6080      0 --:--:-- --:--:-- --:--:--  6080
9:00:24 AM: 0
9:00:24 AM:      0    0   612    0     0   5100      0 --:--:-- --:--:-- --:--:--  5100
9:00:24 AM: 
100  1027  100  1027    0
9:00:24 AM:  0   6431      0 --:--:-- --:--:-- --:--:--  6431
9:00:24 AM: > Verifying integrity...
9:00:24 AM: gpg: Signature made Thu 02 Nov 2017 04:44:10 PM UTC using RSA key ID FD2497F5
9:00:24 AM: gpg: Good signature from "Yarn Packaging <yarn@dan.cx>"
9:00:24 AM: gpg: WARNING: This key is not certified with a trusted signature!
9:00:24 AM: gpg:          There is no indication that the signature belongs to the owner.
9:00:24 AM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
9:00:24 AM:      Subkey fingerprint: 6A01 0C51 6600 6599 AA17  F081 46C2 130D FD24 97F5
9:00:24 AM: > GPG signature looks good
9:00:24 AM: > Extracting to ~/.yarn...
9:00:24 AM: > Adding to $PATH...
9:00:24 AM: > We've added the following to your /opt/buildhome/.profile
9:00:24 AM: > If this isn't the profile of your current shell then please add the following to your correct profile:
9:00:24 AM: export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"
9:00:24 AM: 
9:00:24 AM: > Successfully installed Yarn 1.3.2! Please open another terminal where the `yarn` command will now be available.
9:00:25 AM: Installing NPM modules using Yarn version 1.3.2
9:00:25 AM: yarn install v1.3.2
9:00:26 AM: [1/4] Resolving packages...
9:00:28 AM: [2/4] Fetching packages...
9:00:52 AM: info fsevents@1.1.2: The platform "linux" is incompatible with this module.
9:00:52 AM: info "fsevents@1.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
9:00:52 AM: [3/4] Linking dependencies...
9:01:04 AM: [4/4] Building fresh packages...
9:01:07 AM: success Saved lockfile.
9:01:07 AM: Done in 41.51s.
9:01:07 AM: NPM modules installed using Yarn
9:01:08 AM: Installing missing commands
9:01:08 AM: Executing user command: npm run build
9:01:08 AM: > my-project@0.0.1 build /opt/build/repo
9:01:08 AM: > npm-run-all build-css build-js
9:01:09 AM: > my-project@0.0.1 build-css /opt/build/repo
9:01:09 AM: > node-sass-chokidar src/ -o src/
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/Account/AccountDetails.css
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/App/App.css
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/App/AppHeader.css
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/App/base.css
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/App/btn.css
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/App/form.css
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/App/functional.css
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/App/functional/margin-padding.css
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/App/functional/section.css
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/BreadCrumbs/BreadCrumbs.css
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/Comments/Comment.css
9:01:09 AM: Rendering Complete, saving .css file...
9:01:09 AM: Wrote CSS to /opt/build/repo/src/components/Comments/NewComment.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/EventPage/EventPage.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/EventsPage/EventsPage.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/GroupPage/GroupPage.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/GroupPage/GroupPageEvents.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/GroupsPage/GroupsPage.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/LocationPage/LocationPage.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/LocationsPage/LocationsPage.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/Members/Members.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/ModalContent/ModalContent.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/PageNotFound/PageNotFound.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/PeoplePage/PeoplePage.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/UserPic/UserPic.css
9:01:10 AM: Rendering Complete, saving .css file...
9:01:10 AM: Wrote CSS to /opt/build/repo/src/components/vars.css
9:01:10 AM: Wrote 25 CSS files to /opt/build/repo/src/
9:01:10 AM: > my-project@0.0.1 build-js /opt/build/repo
9:01:10 AM: > react-scripts build
9:01:11 AM: Creating an optimized production build...
9:01:34 AM: Compiled successfully.
9:01:34 AM: File sizes after gzip:
9:01:34 AM:   133.85 KB  build/static/js/main.3205f98f.js
9:01:34 AM:   4.19 KB    build/static/css/main.befef5be.css
9:01:34 AM: The project was built assuming it is hosted at the server root.
9:01:34 AM: To override this, specify the homepage in your package.json.
9:01:34 AM: For example, add this to build it for GitHub Pages:
9:01:34 AM:   "homepage" : "http://myname.github.io/myapp",
9:01:34 AM: The build folder is ready to be deployed.
9:01:34 AM: You may serve it with a static server:
9:01:34 AM:   yarn global add serve
9:01:34 AM:   serve -s build
9:01:35 AM: Caching artifacts
9:01:35 AM: Started saving node modules
9:01:35 AM: Finished saving node modules
9:01:35 AM: Started saving yarn cache
9:01:35 AM: Finished saving yarn cache
9:01:35 AM: Started saving pip cache
9:01:35 AM: Finished saving pip cache
9:01:35 AM: Started saving emacs cask dependencies
9:01:35 AM: Finished saving emacs cask dependencies
9:01:35 AM: Started saving maven dependencies
9:01:35 AM: Finished saving maven dependencies
9:01:35 AM: Started saving boot dependencies
9:01:35 AM: Finished saving boot dependencies
9:01:37 AM: Cached node version v8.9.4
9:01:39 AM: Build script success
9:01:39 AM: Starting to deploy site from 'build'
9:01:39 AM: Starting post processing
9:01:39 AM: Post processing done
9:01:40 AM: Site is live
9:01:54 AM: Finished processing build request in 1m38.175862661s

站点已部署:https://pedantic-sam-d59591.netlify.com/

Netlify 没有发现任何错误,但当我查看页面时 React 抛出此错误:

react-dom.production.min.js:187 错误:缩小 React 错误 #130;访问 http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= 获取完整消息或使用非缩小开发环境获取完整错误和其他有用的警告。

我 运行 Netlify 的技术支持团队。

一般来说,这类问题更容易通过我们的帮助台解决,可通过 support@netlify.com 联系。我这么说并不是因为我想在那里再次与您进行对话,而是因为支持团队可以访问您的构建设置和完整的部署日志以及构建创建的文件,并且可以为您提供有关您实际情况的答案部署,而不是我要在这里给你的一般故障排除技巧。我们最终可能仍会为您提供一些 "how to debug it yourself" 类型的提示 - 但我们至少可以根据您的 URL 和当前设置调整它们。无论如何,关于这些提示...

在高层次上,通过 CLI 部署意味着我们不更改您的文件 - 您在本地构建它们,将它们发送给我们,我们将它们发送到我们的 CDN,完成。当我们通过 git 提交部署时,我们构建它们 - 在我们的构建环境中,这几乎肯定与您的不同。这些文章中描述了该构建环境的一些关键特征:

我们倾向于提供 first-pass 调试建议,一旦我们确认您的配置中没有像 none 存在的部署目录这样的总错误(我们可以看到情况并非如此您在这里分享的日志,感谢您没有过早切断它们!),是基于我们用来构建的软件的版本和设置,具体来说:

  • 节点 8
  • Yarn 1.3.2(您在本地使用 npm 吗?从您的存储库中删除 yarn.lock,我们也会使用它!)
  • NODE_ENV=development

您可以覆盖所有这些,如链接的构建设置文章中所示。一旦您同步了版本和设置,如果构建仍然不正确,则值得在清除依赖项(构建)缓存的情况下手动触发部署。您可以点击部署列表页面上的 'trigger deploy' 按钮以在没有提交的情况下启动构建,当您这样做时,您可以 select "clear build cache"。我可以看到您没有在日志中使用缓存(第 2-3 行),所以这不是影响您的原因,但可能会帮助下一个找到此问题和答案的人。

最后,如果您已同步版本,并且缓存不是问题,下一个最简单的调试步骤是使用 diff -r。但是您如何轻松地查看所有这些文件呢?每个已完成的部署日志页面上的这个小图标可让您下载部署的副本:

如果最终 none 有帮助,您可以在我链接的第一篇文章末尾找到在我们的构建环境中调试构建的说明。