Next.js: [with-typescript] `next export` step fails in Netlify's CI/CD due to hard-coded localhost API route

[jplew]

Examples bug report

Example name

with-typescript

Describe the bug

I am unable to deploy the basic with-typescript example to Netlify.

Here is my repo, it has only slight changes from the original typescript example: https://github.com/jplew/netlify-blog/tree/export-failure.

The above repo is based on Netlify CMS's own installation guide: https://www.netlifycms.org/docs/nextjs/

I am able to build and export the site locally using npm run build && next export, but in Netlify's CI pipeline I get the following error during the export step:

Error occurred prerendering page "/users": Error: request to http://localhost:3000/api/users failed, reason: connect ECONNREFUSED 127.0.0.1:3000
    at sampleFetchWrapper (/opt/build/repo/.next/server/static/RfV0ICu9wki1DRNQ8CUoT/pages/users.js:174:11)
    at process._tickCallback (internal/process/next_tick.js:68:7)

To Reproduce

1. Fork this repo on Github: https://github.com/jplew/netlify-blog
2. With a free Netlify account, click "New Site From Git"
3. Configure your new site to point to your forked repo
4. Attempt to deploy the site

Expected behavior

I expect my build step, npm run build && next export, to succeed on my dev machine as well as in Netlify's CI pipeline.

Additional context

Here is my repo with the offending branch: https://github.com/jplew/netlify-blog/tree/export-failure

Here are the Netlify's deploy logs:

12:31:09 PM: Build ready to start
12:31:15 PM: build-image version: 9cade8af58c2cf3a17a1e9433d2e979149488837
12:31:15 PM: build-image tag: v3.3.5
12:31:15 PM: buildbot version: 1c753eef258dfb3c0efc0675c36d881d135e648f
12:31:15 PM: Fetching cached dependencies
12:31:15 PM: Failed to fetch cache, continuing with build
12:31:15 PM: Starting to prepare the repo for build
12:31:16 PM: No cached dependencies found. Cloning fresh repo
12:31:16 PM: git clone https://github.com/jplew/netlify-blog
12:31:16 PM: Preparing Git Reference refs/heads/master
12:31:17 PM: Starting build script
12:31:17 PM: Installing dependencies
12:31:18 PM: v10.17.0 is already installed.
12:31:19 PM: Now using node v10.17.0 (npm v6.11.3)
12:31:20 PM: Attempting ruby version 2.6.2, read from environment
12:31:21 PM: Using ruby version 2.6.2
12:31:22 PM: Using PHP version 5.6
12:31:22 PM: Started restoring cached node modules
12:31:22 PM: Finished restoring cached node modules
12:31:22 PM: Installing NPM modules using NPM version 6.11.3
12:31:31 PM: npm
12:31:31 PM:  WARN deprecated [email protected]: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
12:31:36 PM: npm
12:31:36 PM: WARN
12:31:36 PM: deprecated
12:31:36 PM:  [email protected]: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
12:31:57 PM: > [email protected] postinstall /opt/build/repo/node_modules/core-js
12:31:57 PM: > node postinstall || echo "ignore"
12:31:57 PM: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
12:31:57 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
12:31:57 PM: > https://opencollective.com/core-js 
12:31:57 PM: > https://www.patreon.com/zloirock 
12:31:57 PM: Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
12:31:58 PM: npm WARN
12:31:58 PM:  [email protected] No repository field.
12:31:58 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
12:31:58 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
12:31:58 PM: added 774 packages from 427 contributors and audited 10290 packages in 33.882s
12:31:58 PM: found 0 vulnerabilities
12:31:58 PM: NPM modules installed
12:31:59 PM: Started restoring cached go cache
12:31:59 PM: Finished restoring cached go cache
12:31:59 PM: unset GOOS;
12:31:59 PM: unset GOARCH;
12:31:59 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
12:31:59 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
12:31:59 PM: go version >&2;
12:31:59 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
12:31:59 PM: go version go1.12 linux/amd64
12:31:59 PM: Installing missing commands
12:31:59 PM: Verify run directory
12:31:59 PM: Executing user command: npm run export
12:31:59 PM: > [email protected] export /opt/build/repo
12:31:59 PM: > npm run build && next export
12:32:00 PM: > [email protected] build /opt/build/repo
12:32:00 PM: > next build
12:32:01 PM: Warning: No build cache found. Please configure build caching for faster rebuilds. Read more: https://err.sh/next.js/no-cache
12:32:01 PM: Creating an optimized production build...
12:32:01 PM: Attention: Next.js now collects completely anonymous telemetry regarding usage.
12:32:01 PM: This information is used to shape Next.js' roadmap and prioritize features.
12:32:01 PM: 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:
12:32:01 PM: https://nextjs.org/telemetry
12:32:16 PM: Compiled successfully.
12:32:16 PM: Automatically optimizing pages...
12:32:17 PM: Page                 Size
12:32:17 PM: ┌ * /                3.17 kB
12:32:17 PM: ├   /_app            227 kB
12:32:17 PM: ├   /_document
12:32:17 PM: ├   /_error          1.96 kB
12:32:17 PM: ├ * /about           483 B
12:32:17 PM: ├ σ /api/users
12:32:17 PM: ├ σ /api/users/[id]
12:32:17 PM: ├ σ /users           2.38 kB
12:32:17 PM: └ σ /users/[id]      4.43 kB
12:32:17 PM: σ  (Server)       page will be server rendered (i.e. getInitialProps)
12:32:17 PM: *  (Static File)  page was prerendered as static HTML
12:32:19 PM: > using build directory: /opt/build/repo/.next
12:32:19 PM:   copying "static build" directory
12:32:19 PM: > No "exportPathMap" found in "next.config.js". Generating map from "./pages"
12:32:19 PM:   launching 7 workers
12:32:19 PM: Exporting (0/6)
12:32:19 PM: Exporting (1/6)
12:32:19 PM: Exporting (2/6)
12:32:20 PM: Exporting (3/6)
12:32:20 PM: Error occurred prerendering page "/users": Error: request to http://localhost:3000/api/users failed, reason: connect ECONNREFUSED 127.0.0.1:3000
12:32:20 PM:     at sampleFetchWrapper (/opt/build/repo/.next/server/static/RfV0ICu9wki1DRNQ8CUoT/pages/users.js:174:11)
12:32:20 PM:     at process._tickCallback (internal/process/next_tick.js:68:7)
12:32:20 PM: Exporting (4/6)
12:32:20 PM: Exporting (5/6)
12:32:20 PM: Exporting (6/6)
12:32:20 PM: Error: Export encountered errors
12:32:20 PM:     at _default (/opt/build/repo/node_modules/next/dist/export/index.js:15:788)
12:32:20 PM:     at process._tickCallback (internal/process/next_tick.js:68:7)
12:32:20 PM: npm
12:32:20 PM:  ERR! code ELIFECYCLE
12:32:20 PM: npm
12:32:20 PM:  ERR! errno 1
12:32:20 PM: npm
12:32:20 PM: ERR! [email protected] export: `npm run build && next export`
12:32:20 PM: npm
12:32:20 PM:  ERR! Exit status 1
12:32:20 PM: npm
12:32:20 PM: ERR!
12:32:20 PM: npm
12:32:20 PM: ERR! Failed at the [email protected] export script.
12:32:20 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
12:32:20 PM: npm
12:32:20 PM: ERR! A complete log of this run can be found in:
12:32:20 PM: npm ERR!     /opt/buildhome/.npm/_logs/2019-11-25T20_32_20_147Z-debug.log
12:32:20 PM: Skipping functions preparation step: no functions directory set
12:32:20 PM: Caching artifacts
12:32:20 PM: Started saving node modules
12:32:20 PM: Finished saving node modules
12:32:20 PM: Started saving pip cache
12:32:20 PM: Finished saving pip cache
12:32:20 PM: Started saving emacs cask dependencies
12:32:20 PM: Finished saving emacs cask dependencies
12:32:20 PM: Started saving maven dependencies
12:32:20 PM: Finished saving maven dependencies
12:32:20 PM: Started saving boot dependencies
12:32:20 PM: Finished saving boot dependencies
12:32:20 PM: Started saving go dependencies
12:32:20 PM: Finished saving go dependencies
12:32:26 PM: Error running command: Build script returned non-zero exit code: 1
12:32:26 PM: Failing build: Failed to build site
12:32:26 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
12:32:26 PM: Finished processing build request in 1m11.674386767s

[jplew]

I attempted to change the offending file like this:
Before:

  const items: User[] = await sampleFetchWrapper(
    "http://localhost:3000/api/users"
  )

After:

  const items: User[] = await sampleFetchWrapper(
    "/api/users"
  )

But isomorphic-fetch complains because it requires absolute URLs, not relative ones.

It would appear that, if I want to deploy my API to production, I would have to use environment variables kind of like this: await sampleFetchWrapper("$SITE_URL/api/users"). Is that correct?

[jamesmosier]

I've been using environment variables as you mentioned, but would be interested in seeing if there was a "better" way.

This is also similar to #9047 which was opened to create a discussion around best practices as it relates to calling API routes (and also wanting to update examples accordingly).

[jplew]

Neat, thanks for the link.
I'm confused how this feature works on my local machine to begin with. During the renderToHTML step, how do requests to http://localhost:3000/api/users succeed when my server is not running? Shouldn't those 404 too?

[jamesmosier]

I'm not certain I'm understanding. When you run next export, getInitialProps is called during the export process. But if you are calling your locahost:3000/api/users in getInitialProps and run next export, if localhost:3000 isn't running then that should fail (as it did when you deployed to Netlify).

[jplew]

you're right, my bad. It only succeeded locally because my dev server was running in the background. Thanks for clearing that up. :)

[timneutkens]

Netlify is a hosting provider for static sites. You can't use API routes with next export.