What are the steps to integrate openjphjs with next.js?

Question

What are the steps to integrate openjphjs with next.js?

I am working on a project with Next.js and need to utilize openjphjs for decoding HTJ2K pixel data.

In order to incorporate openjphjs, I have included both openjphjs.js and openjphjs.wasm in a specific folder within the project structure.

To address an error that arose, I made the following adjustments to the next.config.js file:

    webpack: (config) => {
        config.resolve.fallback = { fs: false };
        return config;
    },

These modifications were aimed at resolving the issue highlighted by the error message:

Module not found: Can't resolve 'fs'

Following guidance from the example provided, I attempted the following implementation:

import openjphjs from './openjphjs/openjphjs.js';

const decode = () => {
   const decoder = new openjphjs.HTJ2KDecoder();
}

Unfortunately, this approach resulted in multiple errors being thrown:

GET http://localhost:3000/_next/static/chunks/openjphjs.wasm 404 (Not Found)

Uncaught (in promise) RuntimeError: Aborted(RuntimeError: Aborted(both async and sync fetching of the wasm failed).

Uncaught TypeError: _openjphjs_openjphjs_js__WEBPACK_IMPORTED_MODULE_8___default(...).HTJ2KDecoder is not a constructor

Experimentally, I also tried relocating openjphjs.wasm to the indicated path, as well as placing the files in the /public directory, but the issues persisted.

javascript next.js

Answer 1

Answer №1

Experimented with integrating OpenJPH into a Next.js 14.1.1 app router project, and successfully instantiated it on the client side using the following steps:

The first step is to place both openjphjs.js and openjphjs.wasm in your project's /public directory.
Next, create a server-side page route (e.g., 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 />
  </>
}

Create a client component (e.g., 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 setup should log the instanced decoder: https://i.sstatic.net/hs8Ub.png

Make sure your tsconfig.json includes paths similar to this:

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

Alternatively, you can import the Openjph component using relative paths or any preferred method.

EDIT: If the above code does not work in production builds, here's a workaround for the useEffect hook:

[...]
// @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);
      }
    }
  }, []);

Answer 2

Experimented with integrating OpenJPH into a Next.js 14.1.1 app router project, and successfully instantiated it on the client side using the following steps:

The first step is to place both openjphjs.js and openjphjs.wasm in your project's /public directory.
Next, create a server-side page route (e.g., 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 />
  </>
}

Create a client component (e.g., 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 setup should log the instanced decoder: https://i.sstatic.net/hs8Ub.png

Make sure your tsconfig.json includes paths similar to this:

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

Alternatively, you can import the Openjph component using relative paths or any preferred method.

EDIT: If the above code does not work in production builds, here's a workaround for the useEffect hook:

[...]
// @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);
      }
    }
  }, []);

What are the steps to integrate openjphjs with next.js?

Answer №1

Similar questions

How to dynamically reference an input textbox ID using javascript or jquery

Ways to adjust the brightness of any color when hovered over

What is the process for animating classes instead of ids in CSS?

Quick fix for obtaining only one response

Updating a form field dynamically with AJAX in Laravel

Using both Ajax and a standard submit can be applied to a single form in jQuery

Once an ajax request is made, scripts cease to function correctly

Tips on successfully transferring row data that has been clicked or selected from one adjacent table to another table

Tips for Extracting Real-Time Ice Status Information from an ArcGIS Online Mapping Tool

Unveiling the steps to automatically conceal a submitted form in React, no longer requiring the manual activation of a toggle button

Locating the source and reason behind the [object ErrorEvent] being triggered

Using a table row as a counter in HTML

Add a text to the values in a column of a table when the IDs are the same

How to retrieve the value of a table row by clicking with the mouse using jQuery?

When the tailwind utilities are implemented, they do not appear on the screen

The postMessage function in my Javascript SlackBot seems to be flooding the channel with messages

Customizing the initial search parameters in Vue InstantSearch: A step-by-step guide

The Angular service encounters issues when interacting with REST API

Tips for positioning dynamic high charts in a bootstrap row

Utilize the Webpack library and libraryTarget settings to establish our own custom library as a global variable