Can't load <Script> tag?

[rnnyrk]

Hi,

I get the following error after using your package.

My Root file is as followed:

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import useSpotifyWebPlaybackSdk from 'use-spotify-web-playback-sdk';

import store from 'store';
import theme from 'styles/theme';
import configureSocket from 'services/configureSocket';

import App from './App';

export const socket = configureSocket();

const Root = () => {
  const {
    Script: WebPlaybackSdkScript,
    deviceId,
    connect: connectWebPlaybackSdk,
    player, // https://developer.spotify.com/documentation/web-playback-sdk/reference/#api-spotify-player
    isReady,
  } = useSpotifyWebPlaybackSdk({
    name: 'Spotify Together',
    getOAuthToken: () => Promise.resolve('BQAeM4nWxCNE291VQEQZb2cF-9eYd82O_ImBHFmj59DeHPeajUaGB-Jvrcibc4A412VZUMdoKU_-MqVctRIVHKZHEKhy7spCyvfMw96PGFIyF7bP3_Gtkp_S97f11IdO1j75KWt6iutBYLyeTdLVZmCu0jOfU5JJI8zX'),
    onPlayerStateChanged: (playerState) => {
      console.log('player state changed:', playerState);
    },
  });

  React.useEffect(() => {
    if (isReady) {
      player.connect();
    }
  }, [isReady]);

  return (
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <React.Suspense fallback={'loading...'}>
            <WebPlaybackSdkScript>
              <App />
            </WebPlaybackSdkScript>
          </React.Suspense>
        </BrowserRouter>
      </ThemeProvider>
    </Provider>
  );
};

export default Root;

My Webpack has the following loaders:

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
      {
        test: /\.svg$/,
        oneOf: [
          {
            resourceQuery: /external/,
            loader: 'url-loader?limit=10000',
          },
          {
            loader: '@svgr/webpack',
          },
        ],
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        oneOf: [
          {
            resourceQuery: /external/,
            loader: 'file-loader',
            query: { name: 'static/[name].[ext]' },
          },
          {
            loader: 'url-loader',
            query: {
              limit: 10000,
              name: 'static/images/[name].[ext]',
            },
          },
        ],
      },
      {
        exclude: [
          /\.[tj]sx?$/,
          /\.css$/,
          /\.svg$/,
          /\.(jpe?g|png|gif)$/i,
          /\.json$/,
          /\.html$/,
          /\.ejs$/,
        ],
        loader: 'file-loader',
        options: { name: 'static/[name].[ext]' },
      },
    ],
  },

Any idea what's the issue?

[niekert]

Hi! I published a new version that fixes the bundling of the package.

Unfortunately it seems like the <Script /> tag can't be injected properly because of this issue: https://github.com/facebook/react/issues/14780

What you can do instead is add a <script src="https://sdk.scdn.co/spotify-player.js" /> tag to the head of the document yourself instead, and not use the <Script /> tag, for now :(

[ohsnaplol]

@niekert Could you update the readme to show how to get a working example of this running?

Thank you.

[rnnyrk]

I couldn't fix it with the provided solution by @niekert either. Now trying to build my own hook based on this repo and this SO solution. Not completely there, but it seems to work so far.

[niekert]

I haven't had time to update the repo yet with a working version, but I am using a similar hook in one of my projects. You can check here for inspiration on how to inject the spotify script: https://github.com/niekert/FissList/blob/master/packages/client/src/hooks/spotifyWebSdk.tsx

[rnnyrk]

Also got it working now. Got almost the same setup, but with an authentication prop;

  React.useEffect(() => {
    if (authenticated) {
      window.onSpotifyWebPlaybackSDKReady = () => {
        playerRef.current = new window.Spotify.Player({
          name: 'Spotify Together',
          getOAuthToken: (cb) => {
            console.log('accessToken', localStorage.getItem('accessToken'));
            const token = localStorage.getItem('accessToken');
            cb(token);
          },
        });

        setIsReady(true);
      };
    }

    if (!window.Spotify) {
      const scriptTag = document.createElement('script');
      scriptTag.src = 'https://sdk.scdn.co/spotify-player.js';

      document.head.appendChild(scriptTag);
    }
  }, [authenticated]);