title: Heroku deploy fails with react and next js
body: <p>My react/next js app works perfectly fine (zero errors/warnings) in my localhost and somehow fails to deploy on Heroku. 
  When I deploy, I consistently get the same error stating that my <code>posts</code> array (in <code>pages/landing.js</code>) is undefined. </p>
  
  <p>I tried debugging and creating a support ticket as suggested in the logs, but Heroku support was unable to help.</p>
  
  <p>I added log statements as log 1,2, what are the posts,3 and in the deploy logs, I only see "log 3 landing js undefined" so it somehow skips the API call and the client-side log from the <code>pages.index.js</code></p>
  
  <p>This is what my code looks like:</p>
  
  <pre><code>// 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 }) =&gt; (
    &lt;Layout&gt;
      &lt;div&gt;
        {console.log("what are the posts???", posts)}
        &lt;Landing posts={posts} /&gt;
      &lt;/div&gt;
    &lt;/Layout&gt;
  );
  
  export default Index;
  
  Index.getInitialProps = async () =&gt; {
    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 };
  };
  
  </code></pre>
  
  <pre><code>//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 }) =&gt; {
    return (
      &lt;Layout&gt;
        &lt;Navigation /&gt;
  // ...
        {console.log("log 3 landing js ", posts)}
              {posts.map(post =&gt; (
                &lt;h1&gt;post.title&lt;/h1&gt;
              ))}
        &lt;Navigation /&gt;
      &lt;Layout&gt;
  export default Landing;
  
  </code></pre>
  
  <pre><code>//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"
    }
  }
  </code></pre>
  
  <pre><code>// next.config.js
  
  module.exports = {
    webpack: config =&gt; {
      config.module.rules.push({
        test: /\.md$/,
        use: "raw-loader"
      });
  
      return config;
    }
  };
  </code></pre>
  
  <p>And finally,the Heroku deploy log:</p>
  
  <pre><code>-----&gt; Node.js app detected
  
  -----&gt; Creating runtime environment
  
         NPM_CONFIG_LOGLEVEL=error
         NODE_ENV=production
         NODE_MODULES_CACHE=true
         NODE_VERBOSE=false
  
  -----&gt; 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
  
  -----&gt; 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 " &gt; bootstrap@4.4.1" has unmet peer dependency "jquery@1.9.1 - 3".
         warning " &gt; bootstrap@4.4.1" has unmet peer dependency "popper.js@^1.16.0".
         warning " &gt; raw-loader@4.0.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
         warning "react-scripts &gt; @typescript-eslint/eslint-plugin &gt; tsutils@3.17.1" has unmet peer dependency "typescript@&gt;=2.8.0 || &gt;= 3.2.0-dev || &gt;= 3.3.0-dev || &gt;= 3.4.0-dev || &gt;= 3.5.0-dev || &gt;= 3.6.0-dev || &gt;= 3.6.0-beta || &gt;= 3.7.0-dev || &gt;= 3.7.0-beta".
         [4/4] Building fresh packages...
         Done in 52.24s.
  
  -----&gt; 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 (&lt;anonymous&gt;)
  &gt; 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.
  -----&gt; 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
  
  </code></pre>