throws error when called in nextjs

[dsbrianwebster]

 const { blurHashBase64, sourceWidth, sourceHeight } = await muxBlurHash(video.muxAsset.playbackId);

throws..

./node_modules/.pnpm/sharp@0.30.7/node_modules/sharp/build/Release/sharp-darwin-arm64v8.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

For additional context this is in Next13, in app router.

[dylanjha]

@dsbrianwebster thanks for the issue, would it be possible to provide a repro that reproduces the issue? That would make it easiest for us to track down and fix.

In your application, do you run into any issues when using with the pages/ directory?

[VaniaPopovic]

This only occurs when you try to use it in the app directory, not the /pages directory

[billyberkouwer]

This error isn't thrown when calling muxBlurData from a page component in Next 13 app directory

[sagarchoudhary96]

@dylanjha any updates on this issue ?

[Ojay]

Yeah I'm suffering the same fate, similar setup to @dsbrianwebster... any update? Its working fine locally for me which is odd.

"@mux/blurhash": "^0.1.2", "next": "^13.5.4", "react": "^18.2.0"

Here's a Codesandbox example of the example repository illustrating the issue.

[HJGreen]

This could potentially be caused by having two different versions of sharp installed in your project. In my case, running pnpm why sharp resulted in:

dependencies:
@mux/blurhash 0.1.2
└── sharp 0.30.7
sharp 0.32.6

Adding the following to my package.json seemed to resolve the issue by enforcing a common installed version:

"pnpm": {
    "overrides": {
        "sharp": "^0.32.6"
    }
}

[jerico-wf]

Still doesn't work for me too in the app router and OSX. I'm getting the same error as @dsbrianwebster

./node_modules/.pnpm/sharp@0.30.7/node_modules/sharp/build/Release/sharp-darwin-arm64v8.node
Module parse failed: Unexpected character '�' (1:0)

@dylanjha I've reproduced in a minimal project in this Stackblitz link on a linux machine and it looks like it's a different error but related to sharp

https://stackblitz.com/edit/nextjs-hkwzqt?file=app%2Fpage.tsx

 X Error: 
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-linuxnull-x64.node'

It looks like that the component only works on the pages router and not app as in the example https://www.mux.com/blog/mux-player-lazy-loading-with-blurhash

Would be nice for this to work as loading videos right now is janky experience using mux. Are there any workarounds that work in the meantime?

[luwes]

Thanks for the feedback and sorry for the late update.

It's curious because sharp is one of the modules that is added to the default external packages list: https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages

This makes it so sharp is not bundled in but kept as a require() on the server side.

This issue is explained in more detail here with a fix for Webpack: https://github.com/lovell/sharp/issues/2350#issuecomment-762977956

In Next.js the easy way to fix this error is to add that Webpack config to your next.config.js file which would make it look a bit like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    if (Array.isArray(config.externals)) {
      config.externals.unshift({
        sharp: 'commonjs sharp'
      });
    } else {
      config.externals = Object.assign({}, {
        sharp: 'commonjs sharp'
      }, config.externals);
    }
    return config
  },
}

module.exports = nextConfig

That should resolve the issue in any case but it might not be needed in newer Next.js versions because of the default external packages list. Not sure when that was added. Hope this helps!

[jerico-wf]

@luwes getting back on this again. I tried adding the provided webpack config. Installed the latest nextjs version 14.1.0 and @mux/blurhash 0.1.2

export async function MuxPlayer({
  style = {},
  ...props
}: React.ComponentProps<typeof MuxPlayerReact>) {
  if (!props.playbackId) return null;
  const { blurHashBase64, sourceWidth, sourceHeight } = await muxBlurHash(
    props.playbackId
  );
  return (
    <MuxPlayerReact
      {...props}
      placeholder={blurHashBase64}
      streamType="on-demand"
      disableCookies={true}
    />
  );
}

I get the following error. Not sure if anyone else is

Unhandled Runtime Error
ReferenceError: require is not defined

Call Stack
Object.sharp
file:///Users/jerico.pingul/projects/website/.next/static/chunks/app/(site)/%5Bslug%5D/page.js (18:1)
options.factory
file:///Users/jerico.pingul/projects/website/.next/static/chunks/webpack.js (721:31)
__webpack_require__
file:///Users/jerico.pingul/projects/website/.next/static/chunks/webpack.js (37:33)
fn
file:///Users/jerico.pingul/projects/website/.next/static/chunks/webpack.js (376:21)
eval
(app-pages-browser)/./node_modules/.pnpm/@mux+blurhash@0.1.2/node_modules/@mux/blurhash/dist/index.js (2:63)
(app-pages-browser)/./node_modules/.pnpm/@mux+blurhash@0.1.2/node_modules/@mux/blurhash/dist/index.js
file:///Users/jerico.pingul/projects/website/.next/static/chunks/app/(site)/%5Bslug%5D/page.js (9874:1)
options.factory
file:///Users/jerico.pingul/projects/website/.next/static/chunks/webpack.js (721:31)

[luwes]

@jerico-wf is this a React client component?

muxBlurHash() has to be called on the server side

[jerico-wf]

Hi @luwes this is a server component using nextjs 14.1.

I didn't add the imports in the original code snippet but it is

import muxBlurHash from "@mux/blurhash";
import MuxPlayerReact from "@mux/mux-player-react/lazy";

[intelligence]

Can confirm, I get the same error in console.

[eivindml]

Same issue