3

I encountered a TypeError: Only absolute URLs are supported error while tying to deploy a Next.js app both in Vercel and Netlify. In my app, I have a config file to avoid of absolute path errors, since data is fetched from the server.
config.js

const dev = process.env.NODE_ENV !== "production";

export const server = dev
  ? "http://localhost:3000"
  : "https://next-js-next-app-pjjs4ka8d-grf.vercel.app";

The domain I picked from vercel when a random domain was generated before starting the deployment. But I guess it's wrong and I must provide another url for deployment.
Here is how I am using the server url in the app from config file in pages/article[id] file.

export const getStaticProps = async (context) => {
  const res = await fetch(`${server}/api/articles/${context.params.id}`);
  const article = await res.json();
  return {
    props: {
      article,
    },
  };
};

export const getStaticPaths = async () => {
  const res = await fetch(`${server}/api/articles/`);

  const articles = await res.json();
  const ids = articles.map((article) => article.id);

  const paths = ids.map((id) => ({ params: { id: id.toString() } }));

  return {
    fallback: "blocking",
    paths: paths,
  };
};

Error output in Vercel while trying to deploy

10:11:04.813    > Build error occurred
10:11:04.815    TypeError: Only absolute URLs are supported
10:11:04.815        at getNodeRequestOptions (/vercel/path0/node_modules/node-fetch/lib/index.js:1305:9)
10:11:04.815        at /vercel/path0/node_modules/node-fetch/lib/index.js:1410:19
10:11:04.815        at new Promise (<anonymous>)
10:11:04.815        at fetch (/vercel/path0/node_modules/node-fetch/lib/index.js:1407:9)
10:11:04.815        at getStaticPaths (/vercel/path0/.next/server/pages/article/[id].js:168:21)
10:11:04.815        at buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:16:86)
10:11:04.815        at /vercel/path0/node_modules/next/dist/build/utils.js:26:628
10:11:04.815        at processTicksAndRejections (internal/process/task_queues.js:93:5)
10:11:04.815        at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584) {
10:11:04.815      type: 'TypeError'
10:11:04.815    }
10:11:04.834    npm ERR! code ELIFECYCLE
10:11:04.834    npm ERR! errno 1
10:11:04.838    npm ERR! traversytutorial@0.1.0 build: `next build && next export`
10:11:04.838    npm ERR! Exit status 1
10:11:04.839    npm ERR! 
10:11:04.839    npm ERR! Failed at the traversytutorial@0.1.0 build script.
10:11:04.839    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
10:11:04.846    npm ERR! A complete log of this run can be found in:
10:11:04.847    npm ERR!     /vercel/.npm/_logs/2021-06-18T08_11_04_839Z-debug.log
10:11:04.859    Error: Command "npm run build" exited with 1

Any help will be appreciated

FD3
  • 1,462
  • 6
  • 24
  • 47
  • Are you importing the config file correctly? Could you add that import part of the code too? – Bojan Krkic Jun 18 '21 at 08:37
  • Hi @BojanKrkic thanks for response. Sure, Here it is: import { server } from "../config"; Actually, the app works fine locally. Problems I have only on deployment – FD3 Jun 18 '21 at 08:41
  • Just shooting in the dark - could the issue be that it's looking for `config/index.js` when you do `import {server} from "../config"`? Try renaming `config.js` to `index.js`, worth a shot... – Bojan Krkic Jun 18 '21 at 09:32
  • Hi @juliomalves thanks for the answer. I updated my question with the code from `pages/article/[id].js`. But I think I am doing pretty much the same here. – FD3 Jun 20 '21 at 08:30
  • @Gregfan You should use the logic that's in your API routes directly in `getStaticPaths`/`getStaticProps` rather than fetching from your internal API. See [Internal API fetch with getServerSideProps? (Next.js)](https://stackoverflow.com/a/65760948/1870780) for more details (mentions `getServerSideProps` but same applies here). – juliomalves Jun 20 '21 at 08:43
  • Hi @juliomalves thanks for the quick response. Does it mean that I need to import the 'handler function' from 'api' to `pages/article/[id]` file and use in `getStaticPaths/getStaticProps` files instead of fetching from internal API? – FD3 Jun 20 '21 at 09:01
  • Not the full handler as you don't want the part that deals with returning the response - just the logic to get the data you need (like the example in that answer I've linked). – juliomalves Jun 20 '21 at 11:42
  • @juliomalves ok, thanks, I'll try it – FD3 Jun 20 '21 at 12:05

0 Answers0