Netlify Dev - TypeError: Only absolute URLs are supported

Support
1

I am using Nuxt. For a new feature I need to start using Netlify functions. In order to run everything locally I started using the Netlify CLI.

With running the “netlify dev” command the CLI understands that I am using Nuxt and starts a server on http://localhost:8888/ and the nuxt default client on http://localhost:3000/

Starting Netlify Dev with Nuxt 2

> project@1.0.0 dev
> nuxt

ℹ Parsed 7 files in 1,2 seconds
ℹ Listening on: http://localhost:3000/
ℹ Preparing project for development
ℹ Initial build may take a while
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated

 WARN  Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating

ℹ Compiling Client
ℹ Compiling Server
✔ Server: Compiled successfully in 1.08m
✔ Client: Compiled successfully in 1.11m
ℹ Waiting for file changes
ℹ Memory usage: 835 MB (RSS: 993 MB)
ℹ Listening on: http://localhost:3000/
✔ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘

Since I have a comprehension issue here: Why does it split up in client and server in the first place? Isn’t it possible to run everything on a single port?

Now the actual issue:
With having a client and server calling my endpoint:

const res = await fetch('/.netlify/functions/reviews');

results in the error:

Error in fetch(): TypeError: Only absolute URLs are supported

As far as I have understood from looking up this issue, this error results because of the two different environments the project is running on:

With

const res = await fetch('http://localhost:8888/.netlify/functions/reviews');

I am getting a correct response.

Do I really need to identify dev and prod environment here or is there another solution to this issue?

2

If you’re talking about this:

This is done by Nuxt and not Netlify CLI.

If you’re talking about:

and

That is not splitting client and server. That is done by CLI to help you. Consider this situation:

Your Nuxt app runs of :3000. Since that port is now being used by Nuxt, Netlify CLI cannot use it to serve your Functions. If you notice, CLI logs when you run netlify dev something like: functions server running on #####. Now, if CLI keeps running Functions only on that port, you’d have to write your Nuxt app something like:

if (isDev) {
  fetch('http://localhost:#####/.netlify/functions/example')
} else {
  fetch('/.netlify/functions/example')
}

(assuming isDev tells you that you’re running using Netlify CLI). Instead, you can now always run your Functions like the else statement. This is made possible by the way Netlfy CLI works.

It creates a new server on :8888 that acts as a proxy between the client and you app’s (Nuxt in this case) server. Any request that you make, Netlify CLI matches the Netlify-specific things like Edge Functions, redirects, etc. first, passes the request to your app’s server, receives and response and sends it back to the browser. Same is the way for Functions.

About the actual issue:

I’m assuming you’re using that fetch statement in server-side code. Since that code is run in Lambda or Deno environment and not in browser, they always need to be absolute. Only browsers have the concept of relative URLs and they’re able to resolve it correctly. The other two runtimes are not able to do that. So yes, you’d most likely have to use an environment variable that would give you your site’s URL which you can add as a prefix to that fetch call.

1 Like
3

@hrishikesh Thank you for explaining everything in such detail. Much appreciated! Now I understand everything much better and just start using environment variables for the fetch statements.