Fluid Player doesn't work with Next.js

[leroybm]

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:

1. Create a sample Next.js project
2. 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";

3. 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.

[leroybm]

@fpfcarvalho @brunopick @ZentoDH Could you guys take a look at this when possible? I've created a PR to fix it #788

[leroybm]

@fpfcarvalho @brunopick @ZentoDH ping

[ZentoDH]

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

[leroybm]

@ZentoDH Thanks! Just pinged in case you missed it :)

[dmdb]

Hi guys! Going to try it with the latest Nextjs. Any dates on release?

[ZentoDH]

@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]

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

[tahola]

@ZentoDH I just follow that https://docs.fluidplayer.com/docs/integration/react/ and I still get the same error "SyntaxError: Cannot use import statement outside a module .... /node_modules/fluid-player/src/index.js (30)"

[dmdb]

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

Thanks! I was using @leroybm branch with fix since then and had no issues on nextjs 14.0.4

[tahola]

@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.

[dmdb]

@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>
  );
}

[tahola]

@dmdb I still get this "Cannot use import statement outside a module" error but thank you I will investigate.

[leroybm]

This was deployed last Friday, @tahola @dmdb maybe using the latest version will make it work?

The project that I was building was this one FYI https://github.com/berTrindade/video-player-manager

[tahola]

@leroybm I am using 3.31.0 and I cant even import it :

node_modules/fluid-player/src/index.js:30 import './polyfills'; ^^^^^^ SyntaxError: Cannot use import statement outside a module

Maybe I am doing something wrong.

[joelclaudio]

@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 🤞

[tahola]

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

[leroybm]

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

[ZentoDH]

Thanks a mill @leroybm for the help! Closing...