SubtitlesOctopus Nextjs Runtime Error

[Abdullah-988]

I've been trying to solve this problem since forever
when using SubtitlesOctopus with Nextjs project I always get errors like

I'm using Nextjs With Typescript
My code:

// Player.tsx

import { useEffect, useRef } from "react";
// @ts-ignore
import SubtitlesOctopus from "libass-wasm";

const MainDomain = "https://cdn..../"; // Basically my CDN url

type PlayerProps = {
  eng: string;
};

export default function Player({ eng }: PlayerProps) {

 useEffect(() => {
    Subtitles();
  }, []);

  function Subtitles() {
    var options = {
      video: document.querySelector("video"),
      subUrl: MainDomain + eng,
      workerUrl: new URL("libass-wasm/dist/js/subtitles-octopus-worker.js", import.meta.url)
    };

    var instance = new SubtitlesOctopus(options);
  }

  return <video />;
}

I would be appreciated If someone know how to solve this issue or If someone can make a repo example of how to use SubtitlesOctopus with Nextjs Typescript

Thank You!

[zoriya]

Subtitle octopus does not provide typescript definitions (it could if #95 is merged one day). To include types, you must create a .d.ts file that define the type of SubtitleOctopus, you can refer to this example if you want.

I created this file by copy-pasting the type.d.ts file from the PR and adding necessary lines to make it work from another project.

[Abdullah-988]

Same Error

The error is probably from the worker when I comment the worker option

function Subtitles() {
    var options: any = {
      video: document.querySelector("video"),
      subUrl: MainDomain + eng,
      // workerUrl: new URL("libass-wasm/dist/js/subtitles-octopus-worker.js", import.meta.url),
    };

    var instance = new SubtitlesOctopus(options);
  }

this shows:

[jeffuofa93]

Did you ever find a fix for this @Abdullah-988? Running into the same issue

[Abdullah-988]

@jeffuofa93

It seems that the issue was workerUrl and its options

I fixed the issue by copying the dist folder from libass-wasm/dist/js to .next build and development folder using copy-webpack-plugin plugin in webpack

make sure you install copy-webpack-plugin package and
In next.config.js file:

/** @type {import('next').NextConfig} */
const CopyWebpackPlugin = require("copy-webpack-plugin");

const nextConfig = {
  webpack: (config, { isServer }) => {
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "node_modules/libass-wasm/dist/js",
            to: `${isServer ? "../" : ""}static`,
          },
        ],
      })
    );

    return config;
  },
  reactStrictMode: true,
};

module.exports = nextConfig;

in the function:

var instance = new SubtitlesOctopus({
    video: video,
    subUrl: MainDomain + Source,
    useLocalFonts: false,
    prescaleFactor: 3,
    availableFonts: {
      Font: "https://yourfonturl.com"
    },
    fallbackFont: "https://yourfonturl.com",
    fonts: [ "https://yourfonturl.com" ],
    workerUrl: "/_next/static/subtitles-octopus-worker.js" // <---------

    // or

    workerUrl: "/static/subtitles-octopus-worker.js"
  });