SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

[ChandanJal]

Browser window keep showing this error

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
overrideMethod @ installHook.js:1
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
eval @ video-loader.js:34
await in eval
eval @ utils.js:41
tick @ utils.js:52
setInterval
eval @ utils.js:55
commitHookEffectListMount @ react-dom.development.js:21102
invokePassiveEffectMountInDEV @ react-dom.development.js:23980
invokeEffectsInDev @ react-dom.development.js:26852
legacyCommitDoubleInvokeEffectsInDEV @ react-dom.development.js:26835
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:26816
flushPassiveEffectsImpl @ react-dom.development.js:26514
flushPassiveEffects @ react-dom.development.js:26438
commitRootImpl @ react-dom.development.js:26337
commitRoot @ react-dom.development.js:26077
performSyncWorkOnRoot @ react-dom.development.js:24925
flushSyncWorkAcrossRoots_impl @ react-dom.development.js:7758
flushSyncWorkOnAllRoots @ react-dom.development.js:7718
processRootScheduleInMicrotask @ react-dom.development.js:7863
eval @ react-dom.development.js:8034

GET http://localhost:3000/api/video?url=https://file_url_path/video.mp4 404 (Not Found)

[luwes]

is next-video added in the next config? something like

import { withNextVideo } from 'next-video/process';

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextVideo(nextConfig);

do you have an API handler configured?
https://github.com/muxinc/next-video#remote-videos

dup issue
#278

[ChandanJal]

Hi @luwes ,

I've added this line please check

import { withNextVideo } from "next-video/process";

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "media.themoviedb.org",
      },
      {
        protocol: "https",
        hostname: "image.tmdb.org",
      },
    ],
  },
};

export default withNextVideo(nextConfig);

[ChandanJal]

Did anyone found any solution ?

[luwes]

@ChandanJal are you sure you want to process the video you're defining in the src attribute?

1. yes, then you have to define a API handler to process the string source https://github.com/muxinc/next-video#remote-videos
2. no, just want to play that source? then you need https://github.com/muxinc/next-video#player-only-demo