"Only absolute URLs are supported" after upgrading from 9.3.6 to 9.4

[squishydough]

Good afternoon all! I appreciate any guidance you can offer as I'm eager to start using Next 9.4.

I allow my users to login to my site via Discord. I've tested and code still works fine in Next 9.3.6. Doing an upgrade to 9.4 with absolutely no other changes cause the catch block in my code to fire off with the error message "Only absolute URLs are supported." I've done console.logs of my env vars and those are still pulling in correctly. I use a fetch library called ky, and so I thought that perhaps the fetch changes noted in 9.4 release notes could be at play, but removing ky and replacing with fetch did not fix the error. I'm hoping you all might be able to help me figure this out!

redirectUri ends up looking like: http%3A%2F%2Flocalhost%3A3000%2Fauth to point to my localhost while testing. This code is executed from getServerSideProps() on a page.

export class Discord {
  private clientId = process.env.DISCORD_CLIENT_ID;

  private clientSecret = process.env.DISCORD_SECRET;

  private headerCredentials = btoa(`${this.clientId}:${this.clientSecret}`);

  public redirectUri = encodeURIComponent(`${BasePath.client}/auth`);

  /**
   * Grants a token to authenticate user logged in via Discord
   * @param ctx NextPageContext
   * @param code The code granted by logging in to Discord
   */
  async grantToken(ctx: NextPageContext, code: string): Promise<BaseResponse> {
    const { res } = ctx;
    if (!res) return { cookie: null, maxAge: 0, successful: false };

    const tokenEndpoint = `https://discordapp.com/api/oauth2/token?grant_type=authorization_code&code=${code}&redirect_uri=${this.redirectUri}`;

    try {
      // Get authorization token
      const tokenResponse: TokenResponse = await ky
        .post(tokenEndpoint, {
          headers: {
            Authorization: `Basic ${this.headerCredentials}`,
          },
        })
        .json();
    } catch (e) {
      logger.error(`Could not get token response. ${e.message}`);
      return { cookie: null, maxAge: 0, successful: false };
    }
  }
}

Here is the try/catch block with fetch instead of ky:

    try {
      // Get authorization token
      const initialTokenResponse = await fetch(tokenEndpoint, {
        method: 'POST',
        headers: {
          Authorization: `Basic ${this.headerCredentials}`,
        },
      });
      const tokenResponse: TokenResponse = await initialTokenResponse.json();
    } catch (e) {
      logger.error(`Could not get token response. ${e.message}`);
      return { cookie: null, maxAge: 0, successful: false };
    }

[nifte]

It has to do with how next handles env variables now.

From the blog post:

• Environment variables are only available in the Node.js environment by default
• Environment variables prefixed with NEXT_PUBLIC_ are exposed to the browser

So any env variables you want to expose to the browser now need to be prepended with NEXT_PUBLIC_ unless you define them in next.config.js.

[squishydough]

Thank you for the response. When I do console.log of the env vars before the fetch call, it does correctly log the vars. Additionally, I do have my next.config in place that was working under 9.3.6. This is also being run from getServerSideProps(), so I thought these shouldn't have to be exposed to the browser.

I am going to try it anyway and see if it works!

/* eslint-disable @typescript-eslint/no-var-requires */
const withCSS = require('@zeit/next-css');
require('dotenv').config();

module.exports = withCSS({
  env: {
    DISCORD_BOT_TOKEN: process.env.DISCORD_BOT_TOKEN,
    DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
    DISCORD_SECRET: process.env.DISCORD_SECRET,
    MONGODB_URL: process.env.MONGODB_URL,
  },
  target: 'serverless',
});

[squishydough]

I removed the definition in my next.config and prefixed every env var with NEXT_PUBLIC_ and the results are the same.

[nifte]

Same here. I think there may be a bug with public env variables at the moment. 😣

[squishydough]

Not sure if it helps, but I updated my comment on the marked answer to specify exactly what I did. Good luck with what your issue - I'd help if I had a use case I could test.

[squishydough]

Edited answer with a fix in case you need to continue using ky-universal
See discussion at #12761

Original answer
I ended up resolving this issue. It appears it was some conflict in the ky-universal library I was using coupled with the latest fetch changes in Next 4.0. I think in my initial attempt to convert to using fetch(), I must have used it wrong.

I ended up doing the following and getting my project upgraded:

1. Removed all of the env var definitions in my next.config.js file, which is nice.
2. Replaced all ky() calls with fetch(), and removed the ky and ky-universal packages entirely.

// Old
const response = await ky.post('my_absolute_path', { json: myRequestData }).json

// New
const data = await fetch('my_absolute_path', { method: 'post', body: JSON.stringify(myRequestData) });
const response = await data.json();

3. I had to specify JSON.parse on the data I was passing via fetch to my endpoints.

// Old
const { discordId } = req.body;

// New
const { discordId } = JSON.parse(req.body).

I think step 3 is what I overlooked the first time and tripped me up. Putting this all here in case it helps someone else with this issue.

[nifte]

Are your NEXT_PUBLIC_ variables working in development mode? Because mine are still showing undefined.

[squishydough]

I am actually not using NEXT_PUBLIC_ vars at all. In my situation, this was all being done via getServerSideProps() and I was able to see my server-side only env vars in log statements. I haven't tried the NEXT_PUBLIC env vars yet.

[nifte]

I see. My issue had something to do with dotenv preventing next from loading the public vars. Uninstalling dotenv fixed it :)

[paambaati]

I'm facing the same issue, except I can't get rid of ky-universal; I rely on their hooks too much. I'm guessing this has to do with the fetch polyfill introduced in Next.js 9.4, but I'm not sure how to fix this.

It works fine on Next 9.3.6 but breaks with this error on 9.4, without any changes to any other dependencies. For now, I've downgraded to 9.3.6 again.

[squishydough]

Yep, same exact thing I faced, except I was fortunate to be able to drop ky-universal. Not sure what the solution could be to this unless Next lets you opt out of their polyfill in some way.

[paambaati]

Reported here — #12353 (comment)

[paambaati]

And FWIW, when this error is thrown, the URL object looks like this —

Url {
  protocol: null,
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: null,
  search: null,
  query: null,
  pathname: '[object%20Request]',
  path: '[object%20Request]',
  href: '[object%20Request]' }

[squishydough]

You may want to open a new issue rather than posting here since I closed this issue. My title for this post I don't think gives proper visibility to the real issue you and I were having, which is the new Next fetch polyfill clashing with other libraries built on fetch.