fluid-player: Fluid Player doesn't work with Next.js

Describe the bug When trying to implement Fluid Player in a Next.js project, the build fails due to trying to access the window object in the server side. This issue remains even when using "use client" as the code runs on import, and imports always run in the server with Next.js.

I’ve created a Pull Request that fixes this by using globalThis instead of window in the index.js and polyfills.js file.

To Reproduce Steps to reproduce the behavior:

Create a sample Next.js project
Install fluid-player and create the following components, attaching them to the home page

// fluid-player-video.tsx
"use client";

import fluidPlayer from 'fluid-player'
import './fluid-player-video.css';
import {useEffect, useRef} from "react";

function FluidPlayerVideo() {
  let self = useRef(null);
  let player: FluidPlayerInstance | null = null;

  useEffect(() => {
      if (!player && self.current) {
        player = fluidPlayer(self.current, {});
      }
  }, []);

  return (
      <>
        <video ref={self}>
          <source src='https://cdn.fluidplayer.com/videos/valerian-1080p.mkv'
                  data-fluid-hd
                  title='1080p'
                  type='video/mp4'/>
        </video>
      </>
  );
}

export default FluidPlayerVideo;

/* fluid-player-video.css */
@import "~fluid-player/src/css/fluidplayer.css";

Run npm run dev and check the build

Expected behavior Fluid Player should work as normal in the client.

Screenshots or Links Live website: https://codesandbox.io/p/devbox/objective-moon-5w6wcs?file=%2F.codesandbox%2Ftasks.json (You may need to refresh since codesandbox is a bit buggy) Fix PR: https://github.com/fluid-player/fluid-player/pull/788

Desktop (please complete the following information if relevant):

OS: MacOS 14.1.1
Browser: Chrome
Version: 120.0.6099.109

Affected version v3.29.0

Additional context To test locally, fetch the code and run npm link in the fluid-player project, then npm link fluid-player in the Next.js project.

About this issue

Original URL
State: closed
Created 6 months ago
Reactions: 3
Comments: 18 (9 by maintainers)

Most upvoted comments

@tahola You probably need to add the fluid-player to transpilePackages like so.

My next.config.js looks like the following and I stopped getting the error

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  transpilePackages: ['fluid-player'],
}

module.exports = nextConfig

Hope it helps 🤞

joelclaudio on Jan 29, 2024

@dmdb I haven’t got a specific date for you, but I’m pushing for this to be released for next week or the week after. CC: @leroybm

ZentoDH on Jan 17, 2024

This specific issue is fixed for me, I’m still having problem with the styling but It’s probably on my side.

@ZentoDH @brunopick Thank you and the EXADS team for taking a look at this, feel free to close the issue

leroybm on Jan 30, 2024

@joelclaudio that was it, thank you. @leroybm I confirm that everything is working now, thank you.

tahola on Jan 30, 2024

@dmdb do you mind to share your code (player component) ? I am on the same version of nextjs and I cant make it work at all.

/* eslint-disable react-hooks/exhaustive-deps -- debug */
/* eslint-disable @typescript-eslint/no-unnecessary-condition -- debug */
/* eslint-disable jsx-a11y/media-has-caption -- debug */
'use client';

import fluidPlayer from 'fluid-player';
import { useEffect, useRef } from 'react';

export default function FluidExample() {
  const self = useRef(null);
  let player: FluidPlayerInstance | null = null;

  useEffect(() => {
    if (!player && self.current) {
      player = fluidPlayer(self.current, {
        layoutControls: {
          fillToContainer: true,
          primaryColor: '#ffc700',
        },
      });
    }
  }, []);

  return (
    <video ref={self}>
      <source
        src="https://cdn.fluidplayer.com/videos/valerian-1080p.mkv"
        data-fluid-hd
        title="1080p"
        type="video/mp4"
      />
    </video>
  );
}

dmdb on Jan 26, 2024

@leroybm @dmdb This is now released. Could you guys confirm if this fixed the issue?

ZentoDH on Jan 25, 2024

@leroybm I’ll take a look at this tomorrow. Sorry about that, it got lost in the holidays and some huge tickets.

ZentoDH on Jan 4, 2024