Heroku部署失败与React和下一个js

时间：2019-12-10 09:35:05

标签： reactjs heroku next.js

我的react / next js应用在我的本地主机上运行良好（零错误/警告），并且无法在Heroku上部署。 部署时，始终出现相同的错误，指出我的posts数组（在pages/landing.js中）是未定义的。

我尝试按照日志中的建议调试并创建支持票证，但Heroku支持无法提供帮助。

我添加了日志语句作为日志1,2，这些日志是什么3，在部署日志中，我只看到“ log 3 Landing js undefined”，因此它以某种方式跳过了API调用和客户端日志pages.index.js

这是我的代码的样子：

// pages/index.js
import React from "react";
import Landing from "./landing";
import Layout from "../src/components/layout";
import fetch from "isomorphic-unfetch";
import Error from "next/error";

const Index = ({ posts }) => (
  <Layout>
    <div>
      {console.log("what are the posts???", posts)}
      <Landing posts={posts} />
    </div>
  </Layout>
);

export default Index;

Index.getInitialProps = async () => {
  console.log("log 1");
  const res = await fetch("http://localhost:3000/api/posts");

  const json = await res.json();
  console.log("log 2 what is json", json);
  return { posts: json.posts };
};


//pages/landing.js
import React from "react";
import Navigation from "../src/components/navigation";
import Layout from "../src/components/layout";
import Link from "next/link";
import ReactMarkdown from "react-markdown";

const Landing = ({ posts }) => {
  return (
    <Layout>
      <Navigation />
// ...
      {console.log("log 3 landing js ", posts)}
            {posts.map(post => (
              <h1>post.title</h1>
            ))}
      <Navigation />
    <Layout>
export default Landing;


//package.json
{
  "version": "1.0.0",
  "private": true,
  "engines": {
    "node": "12.2.0",
    "npm": "6.4.1",
    "yarn": "1.13.0"
  },
  "dependencies": {
    "bootstrap": "^4.4.1",
    "isomorphic-unfetch": "^3.0.0",
    "next": "^9.1.4",
    "raw-loader": "^4.0.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-markdown": "^4.2.2",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT"
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

// next.config.js

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.md$/,
      use: "raw-loader"
    });

    return config;
  }
};

最后，Heroku部署日志：

-----> Node.js app detected

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false

-----> Installing binaries
       engines.node (package.json):  12.2.0
       engines.npm (package.json):   6.4.1
       engines.yarn (package.json):  1.13.0

       Resolving node version 12.2.0...
       Downloading and installing node 12.2.0...
       Bootstrapping npm 6.4.1 (replacing 6.9.0)...
       npm 6.4.1 installed
       Resolving yarn version 1.13.0...
       Downloading and installing yarn (1.13.0)...
       Installed yarn 1.13.0

-----> Installing dependencies
       Installing node modules (yarn.lock)
       yarn install v1.13.0
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info fsevents@1.2.9: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
       info fsevents@2.0.7: The platform "linux" is incompatible with this module.
       info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning " > bootstrap@4.4.1" has unmet peer dependency "jquery@1.9.1 - 3".
       warning " > bootstrap@4.4.1" has unmet peer dependency "popper.js@^1.16.0".
       warning " > raw-loader@4.0.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
       warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
       [4/4] Building fresh packages...
       Done in 52.24s.

-----> Build
       Running build (yarn)
       yarn run v1.13.0
       $ next build
       Creating an optimized production build...
       Attention: Next.js now collects completely anonymous telemetry regarding usage.
       This information is used to shape Next.js' roadmap and prioritize features.
       You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
       https://nextjs.org/telemetry


       Compiled successfully.

       Automatically optimizing pages...
       log 3 landing js  undefined
Error occurred prerendering page "/landing": TypeError: Cannot read property 'map' of undefined
    at Landing (/tmp/build_e6fcf8d3b8da4774fe2ba078e3d46384/.next/server/static/ATrNApXPLQXluLPvZMJ2m/pages/landing.js:4246:32)
    at d (/tmp/build_e6fcf8d3b8da4774fe2ba078e3d46384/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:498)
    at Za (/tmp/build_e6fcf8d3b8da4774fe2ba078e3d46384/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
    at a.b.render (/tmp/build_e6fcf8d3b8da4774fe2ba078e3d46384/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:476)
    at a.b.read (/tmp/build_e6fcf8d3b8da4774fe2ba078e3d46384/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
    at renderToString (/tmp/build_e6fcf8d3b8da4774fe2ba078e3d46384/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:364)
    at render (/tmp/build_e6fcf8d3b8da4774fe2ba078e3d46384/node_modules/next/dist/next-server/server/render.js:81:16)
    at Object.renderPage (/tmp/build_e6fcf8d3b8da4774fe2ba078e3d46384/node_modules/next/dist/next-server/server/render.js:323:20)
    at /tmp/build_e6fcf8d3b8da4774fe2ba078e3d46384/.next/server/static/ATrNApXPLQXluLPvZMJ2m/pages/_document.js:2046:21
    at Generator.next (<anonymous>)
> Build error occurred
Error: Export encountered errors
    at _default (/tmp/build_e6fcf8d3b8da4774fe2ba078e3d46384/node_modules/next/dist/export/index.js:15:788)
    at processTicksAndRejections (internal/process/task_queues.js:89:5)
    at async build (/tmp/build_e6fcf8d3b8da4774fe2ba078e3d46384/node_modules/next/dist/build/index.js:20:145)
error Command failed with exit code 1.
       info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-----> Build failed

       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys

       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/

       Love,
       Heroku

 !     Push rejected, failed to compile Node.js app.
 !     Push failed

2 个答案:

答案 0 :(得分：1)

由于您的landing页上没有getInitialProps，因此next.js试图对其进行预渲染，因此post是未定义的。您可以做的一件事是将landing移入组件。

如果每个页面上都需要posts，则可以在自定义应用中使用getInitialProps，就像in the docs所述

以下实际上是另一个问题的答案

我想，在您的Heroku实例上使用localhost:3000不太正确。相反，您可以从请求标头中获取api页面的网址，因此您的getInititalProps看起来可能与此类似：

Index.getInitialProps = async ctx => {
  if (ctx.req) {
    const host = ctx.req.headers['x-forwarded-host'];
    const proto = ctx.req.headers['x-forwarded-proto'];
    const port =  ctx.req.headers['x-forwarded-port'];

    const res = await fetch(`${proto}//${host}:${port}/api/posts`);

    const json = await res.json();
    return { posts: json.posts };
  } else {
    // otherwise we are in the browser
    const res = await fetch(`/api/posts`);

    const json = await res.json();
    return { posts: json.posts };
  }
}

我在这里查看过：https://spectrum.chat/next-js/general/calling-pages-api-directly-in-ssr-getinitialprops~8416c24b-19dc-46eb-aab7-8943a0c4a92e

答案 1 :(得分：0)

为了在heroku中成功部署nextjs应用程序，您需要在package.json文件中做一个小的修改

更新启动命令为："start": "next start -p $PORT"

之前：

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

之后：

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start -p $PORT"
}
相关问题
最新问题