workerpool icon indicating copy to clipboard operation
workerpool copied to clipboard

Next.js

Open moichim opened this issue 7 months ago • 1 comments

Hi, please, has someone managed to make workerpool run in Next.js? I tried several approaches, non of them are working...

"use client";

import { useEffect, useRef } from "react";
import { Pool } from "workerpool";

const ComponentWithPool: React.FC<React.PropsWithChildren> = ({children}) => {

    const pool = useRef<Pool>();

    useEffect( () => {

        import( "workerpool" ).then( result => {
            pool.current = result.pool();
        } );

    }, [] );

    return <div>{children}</div>
}

export default ComponentWithPool;
"use client";

import { useRef } from "react";
import * as workerpool from "workerpool";
import { Pool } from "workerpool";

const ComponentWithPool: React.FC<React.PropsWithChildren> = ({children}) => {

    const pool = useRef<Pool>( workerpool.pool() );

    return <div>{children}</div>
}

export default ComponentWithPool;

The components above are loaded dynamically in page.tsx:

const ComponentWithPool = dynamic(
  () => import( "../components/ComponentWithPool" ),
  { ssr: false }
);

In both cases, I get the following error:

Build Error

Failed to compile

Next.js (14.2.5)
../../node_modules/.pnpm/[email protected]/node_modules/workerpool/dist/workerpool.js:49:1

Module not found: Can't resolve 'worker_threads'
https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./components/App.tsx
./app/page.tsx

Have I missed something?

In fact, what I try to do is much more complex - I have a TS library using workerpool internally. But the components using it have the same issues.

moichim avatar Jul 19 '24 09:07 moichim