Trying to work with Next.js

[zzulanas]

Hi there! Been trying to get this setup in my project with Next.js. I'm a bit confused on how to get it working with the Dynamic Imports that are mentioned in the docs, could someone provide an example on how to use it in Next.js? If I try to import the module like any other module, I get this error:

error - file:///Users/user/Documents/ProgrammingProjects/flubber/node_modules/react-spotify-web-playback/dist/index.mjs:64
import { canUseDOM as canUseDOMBool } from "exenv";
         ^^^^^^^^^
SyntaxError: Named export 'canUseDOM' not found. The requested module 'exenv' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'exenv';
const { canUseDOM: canUseDOMBool } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
  page: '/profile'
}

I'm unsure how to fix/change this, any advice/tips?

This is using the current version of 0.13.1 on Next 13.1.6 and React 18.2.0

Thank you!

[gilbarbara]

Hey @zzulanas

Create a wrapper component for the player and add 'use client'; before anything else.
The Spotify Web Playback SDK is a client-only library dependent on the window.

[AnmarRahman]

Im still getting the same error
Could you please help me?
Here is my player.jsx code :

import { useEffect } from "react";
import { useRecoilState } from "recoil";
import { playingTrackState, playState } from "../atoms/playerAtom";
import SpotifyPlayer from "react-spotify-web-playback";
import PlayerWrapper from "./PlayerWrapper";

function Player({ accessToken, trackUri }) {
const [play, setPlay] = useRecoilState(playState);
const [playingTrack, setPlayingTrack] = useRecoilState(playingTrackState);

useEffect(() => {
if (trackUri) {
setPlay(true);
}
}, [trackUri]);

if (!accessToken) return null;

return (
<>
{/* Premium Users /}
<SpotifyPlayer
styles={{
activeColor: "#fff",
bgColor: "#181818",
color: "#fff",
loaderColor: "#fff",
sliderColor: "#1cb954",
trackArtistColor: "#ccc",
trackNameColor: "#fff",
height: "70px",
sliderTrackColor: "#535353",
sliderTrackBorderRadius: "4px",
sliderHandleColor: "#fff",
errorColor: "#fff",
}}
token={accessToken}
showSaveIcon
callback={(state) => {
setPlay(state.isPlaying);
}}
play={play}
uris={trackUri ? [trackUri] : []}
magnifySliderOnHover={true}
autoPlay={true}
/>
{/ */}
</>
);
}

export default Player;

[gilbarbara]

@AnmaritoS

Sorry, I can't help with the implementation...
Check next.js docs for more information.

[oshibka404]

Hey @zzulanas. There's nothing wrong with your implementation. Unfortunately, it's not something you can fix yourself without patching this package.
exenv package is a commonjs module and in some other environments it can't (and in general shouldn't) be resolved when imported using named exports.

Possible solutions:

1. using exenv-es6 instead of exenv https://github.com/chrisdholt/exenv-es6
2. instead of relying on an npm package for this simple task, implement the check yourself like:

	var canUseDOM = !!(
		typeof window !== 'undefined' &&
		window.document &&
		window.document.createElement
	);

3. replace

import { canUseDOM as canUseDOMBool } from "exenv";
...
export const canUseDOM = () => canUseDOMBool;

with

import * as exenv from 'exenv';
...
export const canUseDOM = () => exenv.canUseDOM;

(this is almost literally what the error suggests to do, by the way, and the one I would choose if I were @gilbarbara )

Any one of these options would fix the issue.

@gilbarbara what do you think?

[oshibka404]

@zzulanas FYI: The issue is fixed in 0.13.3