Next.js support

[kochie]

I'm hoping to get some help around using threads.js on next. I've configured next to use the plugin but I get this error:

> Using external babel configuration
> Location: "/Users/robekoc/Projects/lqip/.babelrc"
Creating an optimized production build

Failed to compile.

chunk static/QIOKXaRhhPw5Q3pzYxrVx/pages/index.js [initial]
static/QIOKXaRhhPw5Q3pzYxrVx/pages/index.js
/Users/robekoc/Projects/lqip/node_modules/next/dist/build/webpack/loaders/next-babel-loader.js??ref--4!/Users/robekoc/Projects/lqip/src/pages/index.tsx
No template for dependency: ConstDependency

> Build error occurred
Error: > Build failed because of webpack errors
    at build (/Users/robekoc/Projects/lqip/node_modules/next/dist/build/index.js:9:900)

If anyone has had any success using next and can share how they did it that would be great. The project is https://zeit.co/kochie/lqip/f1stqdw4q

I've tried using the next-workers plugin as well but it seems to be incompatible with this library.

[andywer]

Hey @kochie! Yeah, that’s indeed a bummer.

I already had a look at it and also googled for a while, but couldn’t come up with anything yet. Webpack can be such a bitch...

I couldn’t even find anything about using the worker-plugin (what this plugin is a fork of) and next.js.

Just one random idea: Since I suppose that next.js will initialize a bunch of other webpack plugins, too, can you try to prepend the threads-plugin to the webpack plugins? Maybe it does make a difference...

Otherwise let’s have a look at the resulting webpack config as a whole. Maybe next.js configures some loaders in a certain way that this plugin doesn’t when auto-loading the worker module.

[kochie]

That's a good idea @andywer, I'm not an expert with webpack so I've been troubleshooting the old fashioned way by commenting out lines. I've found that it seems to be something to do with this line. I've been looking for the docs relating to ParserHelpers but I haven't found anything.

https://github.com/andywer/threads-plugin/blob/c433b8c7f51a5fc56f3c59ae603ad30a9a6a326d/src/index.js#L79

I'll see what the outputted webpack config looks like, I'll also see if I can add the threads-plugin as a next plugin and see if that helps.

[kochie]

So I've just made a small plugin for next to add this plugin to webpack (God help us). link here. Surprise, surprise, it doesn't work but at least it errors with something else, so this might be the right idea.

[shivamragnar]

@andywer Do we have any progress on this yet?

[lubobill1990]

In the latest next.js 12, we don't need any Webpack plugin to work with web worker.

Just do this:

spawn(new Worker(new URL('../workers/thread.worker', import.meta.url))).then(workerFunctions => {
  workerFunctions.calculate().then(result => console.log(result))
});