TypeError: spotifyApi.createAuthorizeURL is not a function

[Kageetai]

I recently my project (that has been dormant for a while) from version 4.0.0 to version 5.0.0 of your wonderful project. It seemed to work fine at first, but when running the frontend, it get an TypeError: spotifyApi.createAuthorizeURL is not a function.

I have initialised the library as below:

const spotifyApi = new SpotifyWebApi({
  clientId: process.env.REACT_APP_SPOTIFY_CLIENT_ID,
  redirectUri: redirectUri,
});

export default spotifyApi;

export const createAuthorizeURL = (): string => {
  const newState = generateRandomString(16);
  localStorage.setItem('authState', newState);
  return spotifyApi.createAuthorizeURL(scopes, newState);
};

I could not find anything about this specific error in the changelog, existing issues or the current documentation. Did I miss anything?

If I downgrade to 4.0.0 again it works without any other change.

[dig]

Yep, also getting the same but with clientCredentialsGrant. Doesn't work on 4.0.0 or 5.0.0.

[Kageetai]

Yep, also getting the same but with clientCredentialsGrant. Doesn't work on 4.0.0 or 5.0.0.

Yeah I didn't have the feeling that it depends in the auth flow chosen.

[tylermmorton]

I thought this was an issue with my environment, but I'm getting this as well in 5.0.0 when trying to use the SpotifyWebApi in a Nuxt application

client.js?06a0:97 TypeError: spotify.createAuthorizeURL is not a function
    at eval (spotify.client.js?1450:14)
    at _callee2$ (index.js?f26e:64)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
    at _next (asyncToGenerator.js?1da1:25)

[dhondtlaurens]

spotifyApi.createAuthorizeURL(scopes, state) does work on 4.0.0 but it doesn't in 5.0.2... I guess a temporary workaround is downgrading until the issue is resolved.

[TheDelta]

Looks like the server methods are missing. This is my 1am fix if you don't want to downgrade:

npm i spotify-web-api-node
npm i @types/spotify-web-api-node --save-dev

import SpotifyWebApi from 'spotify-web-api-node';
import SpotifyWebApiServer from 'spotify-web-api-node/src/server-methods';

// (...)

// add server methods to client methods   
(SpotifyWebApi as unknown as { _addMethods: (fncs: unknown) => void })._addMethods(SpotifyWebApiServer);
this._api = new SpotifyWebApi();
this._api.createAuthorizeURL()

(taken from source: https://github.com/thelinmichael/spotify-web-api-node/blob/2785f79d58a9017e9f57fbb0f06e6d23022fd3b4/src/server.js) Obviously this is an unofficial fix and may break in the future. (works for 5.0.2)

[ssubham]

Looks like the server methods are missing. This is my 1am fix if you don't want to downgrade:

npm i spotify-web-api-node
npm i @types/spotify-web-api-node --save-dev

import SpotifyWebApi from 'spotify-web-api-node';
import SpotifyWebApiServer from 'spotify-web-api-node/src/server-methods';

// (...)

// add server methods to client methods   
(SpotifyWebApi as unknown as { _addMethods: (fncs: unknown) => void })._addMethods(SpotifyWebApiServer);
this._api = new SpotifyWebApi();
this._api.createAuthorizeURL()

(taken from source: https://github.com/thelinmichael/spotify-web-api-node/blob/2785f79d58a9017e9f57fbb0f06e6d23022fd3b4/src/server.js) Obviously this is an unofficial fix and may break in the future. (works for 5.0.2)

Thanks for sharing this code. Can you tell me how can i add this in reactjs as it is js not Typescript?

[hkievet]

This is still an issue when I tried to import and use as follows:

Version: ^5.0.2 Svelte-Kit App

(works on server side, not on client side).

import SpotifyWebApi from 'spotify-web-api-node';

export function getAuthUrl() {
   // ...

	const spotifyApi = new SpotifyWebApi({
		redirectUri: redirectUri,
		clientId: clientId
	});

        // Uncaught (in promise) TypeError: spotifyApi.createAuthorizeURL is not a function
	const authorizeURL = spotifyApi.createAuthorizeURL(scopes, state, showDialog);

	return authorizeURL;
}

Solution based on @ssubham's above works.

import SpotifyWebApi from 'spotify-web-api-node';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import SpotifyWebApiServer from 'spotify-web-api-node/src/server-methods';

(SpotifyWebApi as unknown as { _addMethods: (fncs: unknown) => void })._addMethods(
	SpotifyWebApiServer
);

[robertncoomber]

Thanks for sharing this code. Can you tell me how can i add this in reactjs as it is js not Typescript?

The following code worked for me with JS.

import  SpotifyWebApi from 'spotify-web-api-node';
import  SpotifyWebApiServer from 'spotify-web-api-node/src/server-methods';

SpotifyWebApi._addMethods = function(fncs) {
  Object.assign(this.prototype, fncs);
};
SpotifyWebApi._addMethods(SpotifyWebApiServer);