Javascript 如何将Openjphjs与next.js一起使用

我在一个应用程序路由项目中使用Next.js 14.1.1try 了一下，并通过以下步骤在客户端上实例化了它，看看它是否可以提供帮助:

1. 在/public目录中同时放置openjphjs.js和openjphjs.wasm

2. 创建一个服务器页面路由(我 Select 了app/openjph/page.tsx):

import Openjph from "@/components/openjph/open";
import Script from "next/script";

export default async function Page(props) {
  return <>
    <Script
      strategy="beforeInteractive"
      src="/openjphjs.js"
    />
    <Openjph />
  </>
}

3. 创建一个客户端组件(我 Select 了app/components/openjph/open.tsx):

"use client";

import { useEffect } from 'react';

const Openjph = (props) => {
  useEffect(() => {
      try {
        const decoder = new Module.HTJ2KDecoder();
        console.log(decoder);
      } catch (error) {
        console.log(error)
      }
  }, [])
  
  return (
    <>[...more stuff...]</>
  );
};

export default Openjph;

This oughta print the instanced decoder:

并根据需要继续进行.我的tsconfig.json美元大致是这样写的:

    "paths": {
      "@/components/*": ["app/components/*"],
    },

或者，您可以简单地使用相对路径或您喜欢的任何方式导入Openjph组件.

编辑: 如果上面的内容在生产版本中不起作用，这里有一个useEffect钩子的变通方法:

[...]
// @ts-nocheck
[...]

 useEffect(() => {
    try {
      const decoder = new Module.HTJ2KDecoder();
      console.log("has a constructor: ", decoder);
    } catch (error) {
      try {
        console.log("doesn't have a a constructor yet");
        Module.onRuntimeInitialized = async () => {
          const decoder = new Module.HTJ2KDecoder();
          console.log("now it does", decoder);
          const encoder = new Module.HTJ2KEncoder();
          console.log(encoder);
        };
      } catch (error) {
        console.log(error);
      }
    }
  }, []);